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

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

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>
-      {groups}
+      <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">
-          {this.props.children}
-        </div>
-      </Collapse>
-    </div>
+        <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}
+      </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 {