Merge pull request #626 from orangemug/fix/issue-321-accessible-layer-groups

Moved to using react-accessible-accordion for <LayerEditorGroup/>

package-lock.json

@@ -1513,6 +1513,11 @@
       "integrity": "sha512-zYNV7g+nhURRTnZbFDEIm1XHWWbj6lyqFg9ZqQ72p918UuR6+L/0s1FeM57EhGmNQsCiN/Ika42H1owD91f3Iw==",
       "dev": true
     },
+    "@mdi/react": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.3.0.tgz",
+      "integrity": "sha512-RmdB3gsAW4iXOTTHaEaGQ//2w0sxGWiZEoIDteXcf1qTkDkaA+LBu6ub4nNi4VcmSKjcceGHnYHqHENh8fky7A=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -11091,6 +11096,11 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-accessible-accordion": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-accessible-accordion/-/react-accessible-accordion-3.0.1.tgz",
+      "integrity": "sha512-2OZY6PWVOTYjVRQ5vnzVfvSRvapH1fYHNE6rG0S64cCatf+IOovokZEa4Xzmdl69ebrYO2HU3h8yLlEk9LqwPA=="
+    },
     "react-aria-menubutton": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/react-aria-menubutton/-/react-aria-menubutton-6.3.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "@babel/runtime": "^7.8.4",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@mapbox/mapbox-gl-style-spec": "^13.12.0",
+    "@mdi/react": "^1.3.0",
     "classnames": "^2.2.6",
     "codemirror": "^5.52.0",
     "color": "^3.1.2",
@@ -46,6 +47,7 @@
     "ol-mapbox-style": "^6.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-accessible-accordion": "^3.0.1",
     "react-aria-menubutton": "^6.3.0",
     "react-aria-modal": "^4.0.0",
     "react-autobind": "^1.0.6",

src/components/layers/LayerEditor.jsx

@@ -13,6 +13,7 @@ import MaxZoomBlock from './MaxZoomBlock'
 import CommentBlock from './CommentBlock'
 import LayerSourceBlock from './LayerSourceBlock'
 import LayerSourceLayerBlock from './LayerSourceLayerBlock'
+import {Accordion} from 'react-accessible-accordion';
 
 import {MdMoreVert} from 'react-icons/md'
 
@@ -222,12 +223,16 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
+    const groupIds = [];
     const layerType = this.props.layer.type
     const groups = layoutGroups(layerType).filter(group => {
       return !(layerType === 'background' && group.type === 'source')
     }).map(group => {
+      const groupId = group.title.replace(/ /g, "_");
+      groupIds.push(groupId);
       return <LayerEditorGroup
         data-wd-key={group.title}
+        id={groupId}
         key={group.title}
         title={group.title}
         isActive={this.state.editorGroups[group.title]}
@@ -304,7 +309,13 @@ export default class LayerEditor extends React.Component {
         </div>
 
       </header>
+      <Accordion
+        allowMultipleExpanded={true}
+        allowZeroExpanded={true}
+        preExpanded={groupIds}
+      >
         {groups}
+      </Accordion>
     </div>
   }
 }

src/components/layers/LayerEditorGroup.jsx

@@ -1,11 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapser from './Collapser'
-import Collapse from './Collapse'
+import Icon from '@mdi/react'
+import {
+  mdiMenuDown,
+  mdiMenuUp
+} from '@mdi/js';
+import {
+    AccordionItem,
+    AccordionItemHeading,
+    AccordionItemButton,
+    AccordionItemPanel,
+} from 'react-accessible-accordion';
 
 
 export default class LayerEditorGroup extends React.Component {
   static propTypes = {
+    "id": PropTypes.string,
     "data-wd-key": PropTypes.string,
     title: PropTypes.string.isRequired,
     isActive: PropTypes.bool.isRequired,
@@ -14,20 +24,28 @@ export default class LayerEditorGroup extends React.Component {
   }
 
   render() {
-    return <div>
-      <div className="maputnik-layer-editor-group"
+    return <AccordionItem uuid={this.props.id}>
+      <AccordionItemHeading className="maputnik-layer-editor-group"
         data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
         onClick={e => this.props.onActiveToggle(!this.props.isActive)}
       >
-        <span>{this.props.title}</span>
-        <span style={{flexGrow: 1}} />
-        <Collapser isCollapsed={this.props.isActive} />
-      </div>
-      <Collapse isActive={this.props.isActive}>
-        <div className="react-collapse-container">
+        <AccordionItemButton className="maputnik-layer-editor-group__button">
+          <span style={{flexGrow: 1}}>{this.props.title}</span>
+          <Icon
+            path={mdiMenuUp}
+            size={1}
+            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"
+          />
+          <Icon
+            path={mdiMenuDown}
+            size={1}
+            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"
+          />
+        </AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
         {this.props.children}
-        </div>
-      </Collapse>
-    </div>
+      </AccordionItemPanel>
+    </AccordionItem>
   }
 }

src/styles/_layer.scss

@@ -163,10 +163,39 @@
   color: $color-white;
   cursor: pointer;
   user-select: none;
-  padding: $margin-2;
   line-height: 20px;
   border-top: solid 1px #36383e;
 
+  &__button {
+    flex: 1;
+    display: flex;
+    padding: $margin-2;
+
+    &__icon {
+      fill: white;
+    }
+
+    &__icon--up {
+      display: block;
+    }
+
+    &__icon--down {
+      display: none;
+    }
+
+  }
+
+  &__button[aria-expanded="true"] {
+    .maputnik-layer-editor-group__button__icon--up {
+      display: none;
+    }
+
+    .maputnik-layer-editor-group__button__icon--down {
+      display: block;
+    }
+  }
+
+
   @include flex-row;
 
   &:hover {