Closed Bug 1439920 Opened 4 years ago Closed 4 years ago

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

Categories

(DevTools :: Inspector, defect)

defect
Not set
normal

Tracking

(firefox60 fixed)

RESOLVED FIXED
Firefox 60
Tracking Status
firefox60 --- fixed

People

(Reporter: MarcoZ, Assigned: MarcoZ)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

(Keywords: access)

Attachments

(1 file)

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. ;)
Summary: [Accessibility] The button to add an attribute inside the tree node needs an spoken label → [Accessibility] The button to add an attribute inside the tree node needs a spoken label
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 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.
Attachment #8953752 - Flags: review?(gl) → review+
Pushed by mzehe@mozilla.com:
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
https://hg.mozilla.org/mozilla-central/rev/5c6d1fa50f25
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 60
Depends on: 1441778
Product: Firefox → DevTools
Assignee: nobody → mzehe
You need to log in before you can comment on or make changes to this bug.