Problem/Motivation

The bug was discovered while backporting to Navbar. A tray without a heading will raised a JS error because we attempt to access to the text node of the element before establishing if the element exists.

The image above shows the Inspector in Chrome just as the error is about to occur in the onActiveTray method in navbar.js.

Proposed resolution

Add a check for the element before accessing its text content.

User interface changes

None.

API changes

None.

Original report by @jessebeach

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jessebeach’s picture

Issue tags: +Spark, +sprint
Sam152’s picture

I had a look at this issue. The biggest issue was figuring out what to say when a tray had no heading. I considered falling back on the anchor text, however that doesn't seem very consistent, so I settled on "Tray opened." and "Tray closed.".

I have attached a patch to get the ball rolling, but if anyone has any feedback on what the fallback dictation should be, I can look at the patch again.

Sam152’s picture

Status: Active » Needs review

Status: Needs review » Needs work

The last submitted patch, 2: 2141417-trays-without-headings-javascript-error-2.patch, failed testing.

Sam152’s picture

Status: Needs work » Needs review
nod_’s picture

Issue tags: +JavaScript, +ie8
babruix’s picture

Not sure how to test it..

Sam152’s picture

You can test it by adding a log to "Drupal.announce" and then opening and closing the toolbar. Everything that the aural view announces will be outputted to the console.

Status: Needs review » Needs work

The last submitted patch, 7: 2141417-trays-without-headings-javascript-error-7.patch, failed testing.

Sam152’s picture

Sam152’s picture

Status: Needs work » Needs review
Wim Leers’s picture

Status: Needs review » Needs work
  1. +++ b/core/modules/toolbar/js/views/ToolbarAuralView.js
    @@ -44,13 +44,14 @@
    +      var action = (tray === null ? 'closed' : 'opened');
    

    Strange use of parentheses here.

  2. +++ b/core/modules/toolbar/js/views/ToolbarAuralView.js
    @@ -44,13 +44,14 @@
    +        text = Drupal.t('Tray "@tray" '  + action + '.', {'@tray': trayNameElement.textContent});
    ...
    +        text = Drupal.t('Tray ' + action + '.');
    

    Never use string concatenation for translation. That breaks translations. See https://api.drupal.org/api/drupal/core%21includes%21bootstrap.inc/functi....

jessebeach’s picture

So in the string case, we'd want to see something like this:

text = Drupal.t('Tray @action', {'@action': action});

Sam152’s picture

I have attached two patches which look at the given feedback. In patch b, I have translated the 'closed' or 'opened' string before passing it in as an argument to the later translate function. Not sure if this is the right approach, however I feel that those two string would need translating at some point?

droplet’s picture

  1. +++ b/core/modules/toolbar/js/views/ToolbarAuralView.js
    @@ -44,13 +44,13 @@
    +      var action = Drupal.t(tray === null ? 'closed' : 'opened');
    

    Don't use expression inside Drupal.t.

  2. +++ b/core/modules/toolbar/js/views/ToolbarAuralView.js
    @@ -44,13 +44,13 @@
    +        var text = Drupal.t('Tray "@tray" @action.', {'@tray': trayName, '@action' : action});
    ...
    +        var text = Drupal.t('Tray @action.', {'@action' : action});
    

    Please move "var text" to top :)

babruix’s picture

Moved "var text" to top.

babruix’s picture

Status: Needs work » Needs review
nod_’s picture

Else on a new line please :)

droplet’s picture

+++ b/core/modules/toolbar/js/views/ToolbarAuralView.js
@@ -43,14 +43,15 @@
+        action = tray === null ? 'closed' : 'opened',

null ? Drupal.t('closed') : Drupal.t('opened')

:)

droplet’s picture

Status: Needs review » Needs work
babruix’s picture

Status: Needs work » Needs review
FileSize
1.3 KB

Change from comment #19.

nod_’s picture

Status: Needs review » Needs work

Still need the else on a new line, and while we're at it keep the one var per variable please.

Have a look at the rest of the core JS files please.

babruix’s picture

Status: Needs work » Needs review
FileSize
1.33 KB
1.13 KB
Wim Leers’s picture

Status: Needs review » Reviewed & tested by the community

So sorry that this had to sit here for well over six months without review :(

Still applies cleanly, and still works great. Thanks!

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

This issue is a normal bug fix, and doesn't include any disruptive changes, so it is allowed per https://www.drupal.org/core/beta-changes. Committed e25acf2 and pushed to 8.0.x. Thanks!

  • alexpott committed e25acf2 on 8.0.x
    Issue #2141417 by babruix, Sam152, jessebeach: Trays without headings...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.