Bug 1550542 - ensure expanded/collapsed state is set the focusable header element in accordion rather than the list item. r=mtigley
authorYura Zenevich <yura.zenevich@gmail.com>
Tue, 14 May 2019 12:27:44 +0000
changeset 532603 99abc0a1fcf5384f663c0ab5606da09ae6b75b68
parent 532602 fe4e40766efbace8751f3da5d9d3ba0588958202
child 532604 c649c0710c41ae4a7fc308625dfc28a704104a33
push id11270
push userrgurzau@mozilla.com
push dateWed, 15 May 2019 15:07:19 +0000
treeherdermozilla-beta@571bc76da583 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1550542
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 1550542 - ensure expanded/collapsed state is set the focusable header element in accordion rather than the list item. r=mtigley Differential Revision: https://phabricator.services.mozilla.com/D30595
devtools/client/shared/components/Accordion.js
devtools/client/shared/components/test/mochitest/accordion.snapshots.js
--- a/devtools/client/shared/components/Accordion.js
+++ b/devtools/client/shared/components/Accordion.js
@@ -69,25 +69,25 @@ class Accordion extends Component {
   renderContainer(item, i) {
     const { buttons, className, component, componentProps, labelledby, header } = item;
     const opened = this.state.opened[i];
 
     return (
       li(
         {
           className,
-          "aria-expanded": opened,
           "aria-labelledby": labelledby,
           key: labelledby,
         },
         h2(
           {
             className: "accordion-header",
             id: labelledby,
             tabIndex: 0,
+            "aria-expanded": opened,
             onKeyDown: e => this.onHandleHeaderKeyDown(e, i),
             onClick: () => this.handleHeaderClick(i),
           },
           div(
             {
               className: `arrow theme-twisty${opened ? " open" : ""}`,
               role: "presentation",
             }
--- a/devtools/client/shared/components/test/mochitest/accordion.snapshots.js
+++ b/devtools/client/shared/components/test/mochitest/accordion.snapshots.js
@@ -10,26 +10,26 @@ window._snapshots = {
       "className": "accordion",
       "tabIndex": -1,
     },
     "children": [
       {
         "type": "li",
         "props": {
           "className": "accordion-item-1",
-          "aria-expanded": false,
           "aria-labelledby": "label-id-1",
         },
         "children": [
           {
             "type": "h2",
             "props": {
               "className": "accordion-header",
               "id": "label-id-1",
               "tabIndex": 0,
+              "aria-expanded": false,
               "onKeyDown": "e => this.onHandleHeaderKeyDown(e, i)",
               "onClick": "() => this.handleHeaderClick(i)",
             },
             "children": [
               {
                 "type": "div",
                 "props": {
                   "className": "arrow theme-twisty",
@@ -41,26 +41,26 @@ window._snapshots = {
             ],
           },
         ],
       },
       {
         "type": "li",
         "props": {
           "className": "accordion-item-2",
-          "aria-expanded": false,
           "aria-labelledby": "label-id-2",
         },
         "children": [
           {
             "type": "h2",
             "props": {
               "className": "accordion-header",
               "id": "label-id-2",
               "tabIndex": 0,
+              "aria-expanded": false,
               "onKeyDown": "e => this.onHandleHeaderKeyDown(e, i)",
               "onClick": "() => this.handleHeaderClick(i)",
             },
             "children": [
               {
                 "type": "div",
                 "props": {
                   "className": "arrow theme-twisty",
@@ -86,26 +86,26 @@ window._snapshots = {
             ],
           },
         ],
       },
       {
         "type": "li",
         "props": {
           "className": "accordion-item-3",
-          "aria-expanded": true,
           "aria-labelledby": "label-id-3",
         },
         "children": [
           {
             "type": "h2",
             "props": {
               "className": "accordion-header",
               "id": "label-id-3",
               "tabIndex": 0,
+              "aria-expanded": true,
               "onKeyDown": "e => this.onHandleHeaderKeyDown(e, i)",
               "onClick": "() => this.handleHeaderClick(i)",
             },
             "children": [
               {
                 "type": "div",
                 "props": {
                   "className": "arrow theme-twisty open",