1439920 - [Accessibility] The button to add an attribute inside the tree node needs a spoken label

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Marco Zehe (:MarcoZ)]

STR:
1. With NVDA and Firefox on Windows running, open any web page.
2. Right-click any element and select Inspect Element.
3. Focus lands on the node in the tree of HTML elements. Press Enter to edit that element.
4. Tab through the attributes until you get to the Add attribute button.

Expected: NVDA should say Add Attribute" followed by the word "button".
Actual: NVDA only speaks "Button", but doesn't indicate what this button does.

Visually, there's probably a + sign here added through some CSS background image or other graphical magic. However this needs a spoken textual label alternative for screen readers.

The easiest way is to add a localizable string like "Add Attribute" and assign it to the button via aria-label. Note that the string should NOT include the word "Button" since that is already provided by the role, or otherwise the screen reader would speak "Add Attribute Button Button", which is silly. ;)

Comment 1

[Marco Zehe (:MarcoZ)]

Attachment: Bug 1439920 - Add a spoken label to the New Attribute button when editing a tag in the HTML inspector,

Review commit: https://reviewboard.mozilla.org/r/222964/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/222964/

Comment 2

[Code Review Bot [:reviewbot]]

Comment on attachment 8953752 [details]
Bug 1439920 - Add a spoken label to the New Attribute button when editing a tag in the HTML inspector,

https://reviewboard.mozilla.org/r/222964/#review228850


Code analysis found 1 defect in this patch:
 - 1 defect found by mozlint

You can run this analysis locally with:
 - `./mach lint path/to/file` (JS/Python)


If you see a problem in this automated review, please report it here: http://bit.ly/2y9N9Vx


::: devtools/client/inspector/markup/views/element-editor.js:153
(Diff revision 1)
>      open.appendChild(this.attrList);
>  
>      this.newAttr = this.doc.createElement("span");
>      this.newAttr.classList.add("newattr");
>      this.newAttr.setAttribute("tabindex", "-1");
> +    this.newAttr.setAttribute("aria-label", INSPECTOR_L10N.getStr("markupView.newAttribute.label"));

Error: Line 153 exceeds the maximum line length of 90. [eslint: max-len]

Comment 3

[Marco Zehe (:MarcoZ)]

Comment on attachment 8953752 [details]
Bug 1439920 - Add a spoken label to the New Attribute button when editing a tag in the HTML inspector,

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/222964/diff/1-2/

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8953752 [details]
Bug 1439920 - Add a spoken label to the New Attribute button when editing a tag in the HTML inspector,

https://reviewboard.mozilla.org/r/222964/#review228928

::: npm-shrinkwrap.json:1456
(Diff revision 2)
>      "sprintf-js": {
>        "version": "1.0.3",
>        "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
>        "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
>      },
> +    "string_decoder": {

I think we need to revert the changes done to npm-shrinkwrap.json since this bug and patch has nothing to do this file.

Comment 5

[Marco Zehe (:MarcoZ)]

Comment on attachment 8953752 [details]
Bug 1439920 - Add a spoken label to the New Attribute button when editing a tag in the HTML inspector,

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/222964/diff/2-3/

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5c6d1fa50f25
Add a spoken label to the New Attribute button when editing a tag in the HTML inspector, r=gl

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/5c6d1fa50f25