Bug 1644343 Part 1 - Make layout properties accessible to screen readers, r=yzen

1. Fix the twisty so it has a role and name that reflects the action the button will take when clicked (show or hide).
2. Give the section itself a heading so it can easily be found. Make it a level 3 so it is clear that this is a sub section of the box model view.
3. Order the properties themselves in a table with rows for each property, and cells for the name and value.
4. Make the property names and values, which are not editable, not clickable.

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

devtools/client/inspector/boxmodel/components/BoxModelProperties.js

@@ -119,11 +119,19 @@ class BoxModelProperties extends PureComponent {
       dom.div(
         {
           className: "layout-properties-header",
+          role: "heading",
+          "aria-level": "3",
           onDoubleClick: this.onToggleExpander,
         },
         dom.span({
           className: "layout-properties-expander theme-twisty",
           open: this.state.isOpen,
+          role: "button",
+          "aria-label": BOXMODEL_L10N.getStr(
+            this.state.isOpen
+              ? "boxmodel.propertiesHideLabel"
+              : "boxmodel.propertiesShowLabel"
+          ),
           onClick: this.onToggleExpander,
         }),
         BOXMODEL_L10N.getStr("boxmodel.propertiesLabel")
@@ -132,7 +140,7 @@ class BoxModelProperties extends PureComponent {
         {
           className: "layout-properties-wrapper devtools-monospace",
           hidden: !this.state.isOpen,
-          tabIndex: 0,
+          role: "table",
         },
         properties
       )

devtools/client/inspector/boxmodel/components/ComputedProperty.js

@@ -34,16 +34,11 @@ class ComputedProperty extends PureComponent {
   constructor(props) {
     super(props);
 
-    this.onFocus = this.onFocus.bind(this);
     this.renderReferenceElementPreview = this.renderReferenceElementPreview.bind(
       this
     );
   }
 
-  onFocus() {
-    this.container.focus();
-  }
-
   renderReferenceElementPreview() {
     const {
       onShowBoxModelHighlighterForNode,
@@ -62,6 +57,7 @@ class ComputedProperty extends PureComponent {
       dom.span(
         {
           className: "reference-element-type",
+          role: "button",
           title: BOXMODEL_L10N.getStr("boxmodel.offsetParent.title"),
         },
         referenceElementType
@@ -82,32 +78,36 @@ class ComputedProperty extends PureComponent {
     return dom.div(
       {
         className: "computed-property-view",
+        role: "row",
         "data-property-name": name,
-        tabIndex: "0",
         ref: container => {
           this.container = container;
         },
       },
       dom.div(
-        { className: "computed-property-name-container" },
+        {
+          className: "computed-property-name-container",
+          role: "presentation",
+        },
         dom.div(
           {
             className: "computed-property-name theme-fg-color3",
-            tabIndex: "",
+            role: "cell",
             title: name,
-            onClick: this.onFocus,
           },
           name
         )
       ),
       dom.div(
-        { className: "computed-property-value-container" },
+        {
+          className: "computed-property-value-container",
+          role: "presentation",
+        },
         dom.div(
           {
             className: "computed-property-value theme-fg-color1",
             dir: "ltr",
-            tabIndex: "",
-            onClick: this.onFocus,
+            role: "cell",
           },
           value
         ),

devtools/client/locales/en-US/boxmodel.properties

@@ -24,6 +24,16 @@ boxmodel.geometryButton.tooltip=Edit position
 # for showing and collapsing the properties underneath the box model in the layout view
 boxmodel.propertiesLabel=Box Model Properties
 
+# LOCALIZATION NOTE (boxmodel.propertiesHideLabel):
+# This is the spoken label for the twisty.
+# If the properties are currently showing, it will say "Hide".
+boxmodel.propertiesHideLabel=Hide
+
+# LOCALIZATION NOTE (boxmodel.propertiesShowLabel):
+# This is the spoken label for the twisty.
+# If the properties are currently hidden, it will say "Show".
+boxmodel.propertiesShowLabel=Show
+
 # LOCALIZATION NOTE: (boxmodel.offsetParent) This label is displayed inside the list of
 # properties, below the box model, in the layout view. It is displayed next to the
 # position property, when position is absolute, relative, sticky. This label tells users