Bug 1424156 part 1: Don't treat Web Console input from the user as live content for accessibility. r?nchevobbe draft
authorJames Teh <jteh@mozilla.com>
Wed, 03 Jan 2018 09:52:17 +1000
changeset 715180 64e9caf73bd8914f80042142c4961937becc8f21
parent 715128 3d0acce0b1de3581e0c584dd37be696f4bf1bb52
child 715181 d9e7e9d68f67c2f78fd7fcf16cf49bcc6b06b738
push id94082
push userbmo:jteh@mozilla.com
push dateWed, 03 Jan 2018 00:01:26 +0000
reviewersnchevobbe
bugs1424156
milestone59.0a1
Bug 1424156 part 1: Don't treat Web Console input from the user as live content for accessibility. r?nchevobbe Commands entered by the user now get the aria-live="off" attribute. This stops screen readers from echoing commands the user typed, which is redundant and inefficient. MozReview-Commit-ID: GJXiBPMe0W5
devtools/client/webconsole/new-console-output/components/Message.js
--- a/devtools/client/webconsole/new-console-output/components/Message.js
+++ b/devtools/client/webconsole/new-console-output/components/Message.js
@@ -9,17 +9,17 @@
 // React & Redux
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { l10n } =
   require("devtools/client/webconsole/new-console-output/utils/messages");
 const actions =
   require("devtools/client/webconsole/new-console-output/actions/index");
-const { MESSAGE_SOURCE } =
+const { MESSAGE_SOURCE, MESSAGE_TYPE } =
   require("devtools/client/webconsole/new-console-output/constants");
 const CollapseButton =
   require("devtools/client/webconsole/new-console-output/components/CollapseButton");
 const { MessageIndent } =
   require("devtools/client/webconsole/new-console-output/components/MessageIndent");
 const MessageIcon =
   require("devtools/client/webconsole/new-console-output/components/MessageIcon");
 const MessageRepeat =
@@ -240,17 +240,18 @@ class Message extends Component {
 
     const bodyElements = Array.isArray(messageBody) ? messageBody : [messageBody];
 
     return dom.div({
       className: topLevelClasses.join(" "),
       onContextMenu: this.onContextMenu,
       ref: node => {
         this.messageNode = node;
-      }
+      },
+      "aria-live": type === MESSAGE_TYPE.COMMAND ? "off" : "polite"
     },
       timestampEl,
       MessageIndent({indent}),
       icon,
       collapse,
       dom.span({ className: "message-body-wrapper" },
         dom.span({ className: "message-flex-body" },
           // Add whitespaces for formatting when copying to the clipboard.