Bug 1439920 - Add a spoken label to the New Attribute button when editing a tag in the HTML inspector, r?gl draft
authorMarco Zehe <mzehe@mozilla.com>
Sat, 24 Feb 2018 16:00:15 +0100
changeset 759624 ce9a2eabe7b153b3c377ba685a2f534df8fc5dd8
parent 759436 1f44de15ffdb1c0ac9c2719efa2bbe12ea75d06b
push id100410
push usermzehe@mozilla.com
push dateMon, 26 Feb 2018 05:21:54 +0000
reviewersgl
bugs1439920
milestone60.0a1
Bug 1439920 - Add a spoken label to the New Attribute button when editing a tag in the HTML inspector, r?gl MozReview-Commit-ID: 5jcxLuof7GL
devtools/client/inspector/markup/views/element-editor.js
devtools/client/locales/en-US/inspector.properties
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -145,16 +145,18 @@ ElementEditor.prototype = {
     open.appendChild(this.tag);
 
     this.attrList = this.doc.createElement("span");
     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"));
     open.appendChild(this.newAttr);
 
     let closingBracket = this.doc.createElement("span");
     closingBracket.classList.add("closing-bracket");
     closingBracket.textContent = ">";
     open.appendChild(closingBracket);
 
     let close = this.doc.createElement("span");
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -68,16 +68,21 @@ markupView.display.flowRoot.tooltiptext=
 # the markup view.
 markupView.display.contents.tooltiptext2=This element doesn’t produce a specific box by itself, but renders its contents.
 
 # LOCALIZATION NOTE (markupView.event.tooltiptext)
 # Used in a tooltip that appears when the user hovers over 'ev' button in
 # the markup view.
 markupView.event.tooltiptext=Event listener
 
+# LOCALIZATION NOTE (markupView.newAttribute.label)
+# This is used to speak the New Attribute button when editing a tag
+# and a screen reader user tabs to it. This string is not visible onscreen.
+markupView.newAttribute.label=New attribute
+
 #LOCALIZATION NOTE: Used in the image preview tooltip when the image could not be loaded
 previewTooltip.image.brokenImage=Could not load the image
 
 # LOCALIZATION NOTE: Used in color picker tooltip when the eyedropper is disabled for
 # non-HTML documents
 eyedropper.disabled.title=Unavailable in non-HTML documents
 
 #LOCALIZATION NOTE: Used in the event tooltip to allow the debugger to be opened