Bug 1844055 - [devtools] Make property-toggle checkbox keyboard accessible. r=devtools-reviewers,accessibility-frontend-reviewers,ochameau,morgan.

Differential Revision: https://phabricator.services.mozilla.com/D192059

devtools/client/inspector/changes/test/browser.toml

@@ -22,7 +22,6 @@ support-files = [
 ["browser_changes_declaration_add_special_character.js"]
 
 ["browser_changes_declaration_disable.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_changes_declaration_duplicate.js"]
 
@@ -36,7 +35,6 @@ skip-if = ["a11y_checks"] # Bugs 1858041 and 1849028 to investigate intermittent
 ["browser_changes_declaration_remove_ahead.js"]
 
 ["browser_changes_declaration_remove_disabled.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_changes_declaration_rename.js"]
 

devtools/client/inspector/compatibility/test/browser/browser.toml

@@ -19,15 +19,12 @@ support-files = [
 ["browser_compatibility_dynamic_markup-dom-change.js"]
 
 ["browser_compatibility_dynamic_ruleview-attribute-change.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_compatibility_event_document-reload.js"]
 
 ["browser_compatibility_event_panel-select.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_compatibility_event_rule-change.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_compatibility_event_selected-node-change.js"]
 

devtools/client/inspector/rules/test/browser_part1.toml

@@ -182,7 +182,6 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and
 ["browser_rules_content_02.js"]
 
 ["browser_rules_copy_styles.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_rules_cssom.js"]
 
@@ -215,7 +214,6 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and
 ["browser_rules_edit-property-nested-rules.js"]
 
 ["browser_rules_edit-property-order.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_rules_edit-property-remove_01.js"]
 skip-if = ["verify && debug && os == 'win'"]
@@ -237,10 +235,8 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and
 ["browser_rules_edit-property_04.js"]
 
 ["browser_rules_edit-property_05.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_rules_edit-property_06.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_rules_edit-property_07.js"]
 
@@ -304,7 +300,6 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and
 ["browser_rules_edit-variable.js"]
 
 ["browser_rules_editable-field-focus_01.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_rules_editable-field-focus_02.js"]
 

devtools/client/inspector/rules/test/browser_part2.toml

@@ -148,13 +148,10 @@ skip-if = [
 ]
 
 ["browser_rules_inactive_css_display-justify.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_rules_inactive_css_flexbox.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_rules_inactive_css_grid.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_rules_inactive_css_inline.js"]
 

devtools/client/inspector/rules/test/browser_rules_keybindings.js

@@ -81,6 +81,50 @@ add_task(async function () {
     colorSwatchEl,
     "Focused was moved to color swatch"
   );
+
+  info("Press Shift Tab");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  is(
+    view.styleDocument.activeElement.textContent,
+    "gold",
+    "Focus is moved back to property value"
+  );
+
+  info("Press Shift Tab again");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  is(
+    view.styleDocument.activeElement.textContent,
+    "background-color",
+    "Focus is moved back to property name"
+  );
+
+  info("Press Shift Tab once more");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  ok(
+    view.styleDocument.activeElement.matches(
+      "input[type=checkbox].ruleview-enableproperty"
+    ),
+    "Focus is moved to the prop toggle checkbox"
+  );
+  const toggleEl = view.styleDocument.activeElement;
+  ok(toggleEl.checked, "Checkbox is checked by default");
+  is(
+    toggleEl.getAttribute("title"),
+    "Enable background-color property",
+    "checkbox has expected label"
+  );
+
+  info("Press Space to uncheck checkbox");
+  let onRuleViewRefreshed = view.once("ruleview-changed");
+  EventUtils.sendKey("Space");
+  await onRuleViewRefreshed;
+  ok(!toggleEl.checked, "Checkbox is now unchecked");
+
+  info("Press Space to check checkbox back");
+  onRuleViewRefreshed = view.once("ruleview-changed");
+  EventUtils.sendKey("Space");
+  await onRuleViewRefreshed;
+  ok(toggleEl.checked, "Checkbox is checked again");
 });
 
 // The `element` have specific behavior, so we want to test that keyboard navigation

devtools/client/inspector/rules/views/text-property-editor.js

@@ -4,7 +4,10 @@
 
 "use strict";
 
-const { l10n } = require("resource://devtools/shared/inspector/css-logic.js");
+const {
+  l10n,
+  l10nFormatStr,
+} = require("resource://devtools/shared/inspector/css-logic.js");
 const {
   InplaceEditor,
   editableField,
@@ -206,8 +209,7 @@ TextPropertyEditor.prototype = {
     this.enable = createChild(this.container, "input", {
       type: "checkbox",
       class: "ruleview-enableproperty",
-      "aria-labelledby": this.prop.id,
-      tabindex: "-1",
+      title: l10nFormatStr("rule.propertyToggle.label", this.prop.name),
     });
 
     this.nameContainer = createChild(this.container, "span", {
@@ -531,6 +533,10 @@ TextPropertyEditor.prototype = {
 
     const name = this.prop.name;
     this.nameSpan.textContent = name;
+    this.enable.setAttribute(
+      "title",
+      l10nFormatStr("rule.propertyToggle.label", name)
+    );
 
     // Combine the property's value and priority into one string for
     // the value.

devtools/client/styleeditor/test/browser.toml

@@ -213,7 +213,6 @@ skip-if = ["a11y_checks && debug"] # Bugs 1849028 and 1858041 for causing interm
 ["browser_styleeditor_syncAddRule.js"]
 
 ["browser_styleeditor_syncAlreadyOpen.js"]
-fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled
 
 ["browser_styleeditor_syncEditSelector.js"]
 

devtools/client/themes/rules.css

@@ -421,7 +421,6 @@
     display: inline-block;
     border: 0;
     padding: 0;
-    outline: none;
     background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box;
     /* Using fill to paint the border, and stroke for the tick */
     -moz-context-properties: fill, stroke;
@@ -484,7 +483,7 @@
   stroke: var(--theme-icon-color);
 }
 
-.ruleview-rule:not(:hover) .ruleview-enableproperty:not(:focus) {
+.ruleview-rule:not(:hover, :focus-within) .ruleview-enableproperty {
   /* Use opacity to hide the checkbox instead of visibility:hidden,
      so that it's possible to focus it with the keyboard. */
   opacity: 0;

devtools/shared/inspector/css-logic.js

@@ -101,6 +101,8 @@ exports.getCSSAtRuleTypeName = function (cssRule) {
  * @returns {String} A localized version of the given key.
  */
 exports.l10n = name => styleInspectorL10N.getStr(name);
+exports.l10nFormatStr = (name, ...args) =>
+  styleInspectorL10N.getFormatStr(name, ...args);
 
 /**
  * Is the given property sheet an author stylesheet?

devtools/shared/locales/en-US/styleinspector.properties

@@ -160,6 +160,12 @@ rule.twistyExpand.label=Expand
 # tooltip when the mouse is over the icon to select a container in a container query in the rule view.
 rule.containerQuery.selectContainerButton.tooltip=Click to select the container node
 
+# LOCALIZATION NOTE (rule.propertyToggle.label):
+# This is the label for the checkbox input in the rule view that allow to disable/re-enable
+# a specific property in a rule.
+# The argument is the property name.
+rule.propertyToggle.label=Enable %S property
+
 # LOCALIZATION NOTE (styleinspector.contextmenu.copyColor): Text displayed in the rule
 # and computed view context menu when a color value was clicked.
 styleinspector.contextmenu.copyColor=Copy Color