Bug 1551573 - add beta bubble text to accessibility checks toolbar in Firefox 68. r=mtigley
authorYura Zenevich <yura.zenevich@gmail.com>
Thu, 16 May 2019 17:15:40 +0000
changeset 474205 8c0b5bf5f7b31fdf53961aa0f5837bdf4c22b7e3
parent 474204 f460289202a100a2efec62ee77a370594111706c
child 474206 f8dfee6dc6e57a2a27978313a0409db058a08255
push id113144
push usershindli@mozilla.com
push dateFri, 17 May 2019 16:44:55 +0000
treeherdermozilla-inbound@f4c4b796f845 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1551573
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1551573 - add beta bubble text to accessibility checks toolbar in Firefox 68. r=mtigley Differential Revision: https://phabricator.services.mozilla.com/D31163
devtools/client/accessibility/accessibility.css
devtools/client/accessibility/components/AccessibilityTreeFilter.js
devtools/client/accessibility/components/Toolbar.js
devtools/client/accessibility/test/jest/components/__snapshots__/accessibility-tree-filter.test.js.snap
devtools/client/locales/en-US/accessibility.properties
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -171,16 +171,24 @@ body {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
   align-items: center;
   white-space: nowrap;
   margin-inline-end: 5px;
 }
 
+/* @remove after release 68 (See Bug 1551574) */
+.devtools-toolbar .beta {
+  color: var(--theme-highlight-blue);
+  font-size: 80%;
+  font-weight: 500;
+  margin-inline-end: 3px;
+}
+
 #audit-progress-container {
   position: fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: 100%;
   z-index: 9999;
--- a/devtools/client/accessibility/components/AccessibilityTreeFilter.js
+++ b/devtools/client/accessibility/components/AccessibilityTreeFilter.js
@@ -2,17 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 /* global gTelemetry */
 
 // React
 const { createFactory, Component } = require("devtools/client/shared/vendor/react");
-const { div } = require("devtools/client/shared/vendor/react-dom-factories");
+const { div, span } = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { L10N } = require("../utils/l10n");
 const ToggleButton = createFactory(require("./Button").ToggleButton);
 
 const actions = require("../actions/audit");
 
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { FILTERS } = require("../constants");
@@ -24,16 +24,17 @@ const FILTER_LABELS = {
 
 class AccessibilityTreeFilter extends Component {
   static get propTypes() {
     return {
       auditing: PropTypes.string.isRequired,
       filters: PropTypes.object.isRequired,
       dispatch: PropTypes.func.isRequired,
       walker: PropTypes.object.isRequired,
+      describedby: PropTypes.string,
     };
   }
 
   async toggleFilter(filterKey) {
     const { dispatch, filters, walker } = this.props;
 
     if (!filters[filterKey]) {
       if (gTelemetry) {
@@ -67,33 +68,37 @@ class AccessibilityTreeFilter extends Co
     if (![" ", "Enter"].includes(e.key)) {
       return;
     }
 
     this.toggleFilter(filterKey);
   }
 
   render() {
-    const { auditing, filters } = this.props;
+    const { auditing, filters, describedby } = this.props;
+    const toolbarLabelID = "accessibility-tree-filters-label";
     const filterButtons = Object.entries(filters).map(([filterKey, active]) =>
       ToggleButton({
         className: "badge",
         key: filterKey,
         active,
         label: L10N.getStr(FILTER_LABELS[filterKey]),
         onClick: this.onClick.bind(this, filterKey),
         onKeyDown: this.onKeyDown.bind(this, filterKey),
         busy: auditing === filterKey,
       }));
 
     return div({
       role: "toolbar",
       className: "accessibility-tree-filters",
+      "aria-labelledby": toolbarLabelID,
+      "aria-describedby": describedby,
     },
-      L10N.getStr("accessibility.tree.filters"),
+      span({ id: toolbarLabelID, role: "presentation" },
+        L10N.getStr("accessibility.tree.filters")),
       ...filterButtons);
   }
 }
 
 const mapStateToProps = ({ audit: { filters, auditing } }) => {
   return { filters, auditing };
 };
 
--- a/devtools/client/accessibility/components/Toolbar.js
+++ b/devtools/client/accessibility/components/Toolbar.js
@@ -1,16 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 // React
 const { createFactory, Component } = require("devtools/client/shared/vendor/react");
-const { div } = require("devtools/client/shared/vendor/react-dom-factories");
+const { div, span } = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { L10N } = require("../utils/l10n");
 const Button = createFactory(require("./Button").Button);
 const AccessibilityTreeFilter = createFactory(require("./AccessibilityTreeFilter"));
 
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { disable, updateCanBeDisabled } = require("../actions/ui");
 
@@ -66,16 +66,17 @@ class Toolbar extends Component {
       "?utm_source=devtools&utm_medium=a11y-panel-toolbar");
   }
 
   render() {
     const { canBeDisabled, walker } = this.props;
     const { disabling } = this.state;
     const disableButtonStr = disabling ?
       "accessibility.disabling" : "accessibility.disable";
+    const betaID = "beta";
     let title;
     let isDisabled = false;
 
     if (canBeDisabled) {
       title = L10N.getStr("accessibility.disable.enabledTitle");
     } else {
       isDisabled = true;
       title = L10N.getStr("accessibility.disable.disabledTitle");
@@ -92,17 +93,24 @@ class Toolbar extends Component {
         disabled: disabling || isDisabled,
         busy: disabling,
         title,
       }, L10N.getStr(disableButtonStr)),
         div({
           role: "separator",
           className: "devtools-separator",
         }),
-        AccessibilityTreeFilter({ walker }),
+        // @remove after release 68 (See Bug 1551574)
+        span({
+          className: "beta",
+          role: "presentation",
+          id: betaID,
+        },
+          L10N.getStr("accessibility.beta")),
+        AccessibilityTreeFilter({ walker, describedby: betaID }),
         Button({
           className: "help",
           title: L10N.getStr("accessibility.learnMore"),
           onClick: this.onLearnMoreClick,
         }))
     );
   }
 }
--- a/devtools/client/accessibility/test/jest/components/__snapshots__/accessibility-tree-filter.test.js.snap
+++ b/devtools/client/accessibility/test/jest/components/__snapshots__/accessibility-tree-filter.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AccessibilityTreeFilter component: audit filter filtered 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\">accessibility.tree.filters<button aria-pressed=\\"true\\" aria-busy=\\"false\\" class=\\"badge toggle-button checked\\">accessibility.badge.contrast</button></div>"`;
+exports[`AccessibilityTreeFilter component: audit filter filtered 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button aria-pressed=\\"true\\" aria-busy=\\"false\\" class=\\"badge toggle-button checked\\">accessibility.badge.contrast</button></div>"`;
 
-exports[`AccessibilityTreeFilter component: audit filter filtered auditing 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\">accessibility.tree.filters<button aria-pressed=\\"true\\" aria-busy=\\"true\\" class=\\"badge toggle-button checked devtools-throbber\\">accessibility.badge.contrast</button></div>"`;
+exports[`AccessibilityTreeFilter component: audit filter filtered auditing 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button aria-pressed=\\"true\\" aria-busy=\\"true\\" class=\\"badge toggle-button checked devtools-throbber\\">accessibility.badge.contrast</button></div>"`;
 
-exports[`AccessibilityTreeFilter component: audit filter not filtered 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\">accessibility.tree.filters<button aria-pressed=\\"false\\" aria-busy=\\"false\\" class=\\"badge toggle-button\\">accessibility.badge.contrast</button></div>"`;
+exports[`AccessibilityTreeFilter component: audit filter not filtered 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button aria-pressed=\\"false\\" aria-busy=\\"false\\" class=\\"badge toggle-button\\">accessibility.badge.contrast</button></div>"`;
 
-exports[`AccessibilityTreeFilter component: audit filter not filtered auditing 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\">accessibility.tree.filters<button aria-pressed=\\"false\\" aria-busy=\\"true\\" class=\\"badge toggle-button devtools-throbber\\">accessibility.badge.contrast</button></div>"`;
+exports[`AccessibilityTreeFilter component: audit filter not filtered auditing 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button aria-pressed=\\"false\\" aria-busy=\\"true\\" class=\\"badge toggle-button devtools-throbber\\">accessibility.badge.contrast</button></div>"`;
 
-exports[`AccessibilityTreeFilter component: toggle filter 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\">accessibility.tree.filters<button aria-pressed=\\"false\\" aria-busy=\\"false\\" class=\\"badge toggle-button\\">accessibility.badge.contrast</button></div>"`;
+exports[`AccessibilityTreeFilter component: toggle filter 1`] = `"<div role=\\"toolbar\\" class=\\"accessibility-tree-filters\\" aria-labelledby=\\"accessibility-tree-filters-label\\"><span id=\\"accessibility-tree-filters-label\\" role=\\"presentation\\">accessibility.tree.filters</span><button aria-pressed=\\"false\\" aria-busy=\\"false\\" class=\\"badge toggle-button\\">accessibility.badge.contrast</button></div>"`;
--- a/devtools/client/locales/en-US/accessibility.properties
+++ b/devtools/client/locales/en-US/accessibility.properties
@@ -188,8 +188,12 @@ accessibility.progress.initializing=Initializing…
 # accessibility panel overlay shown when accessibility audit is running showing
 # the number of nodes being audited. Semi-colon list of plural forms. See:
 # http://developer.mozilla.org/en/docs/Localization_and_Plurals
 accessibility.progress.progressbar=Checking #1 node;Checking #1 nodes
 
 # LOCALIZATION NOTE (accessibility.progress.finishing): A title text for the
 # accessibility panel overlay shown when accessibility audit is finishing up.
 accessibility.progress.finishing=Finishing up…
+
+# LOCALIZATION NOTE (accessibility.beta): A title text for the features in the
+# accessibility panel that are currently in beta.
+accessibility.beta=beta