Fixed some 'axe' accessibility checker issues.

src/components/AppToolbar.jsx

@@ -184,7 +184,7 @@ export default class AppToolbar extends React.Component {
       return view.id === this.props.mapState;
     });
 
-    return <div className='maputnik-toolbar'>
+    return <nav className='maputnik-toolbar'>
       <div className="maputnik-toolbar__inner">
         <div
           className="maputnik-toolbar-logo-container"
@@ -278,6 +278,6 @@ export default class AppToolbar extends React.Component {
           </ToolbarLinkHighlighted>
         </div>
       </div>
-    </div>
+    </nav>
   }
 }

src/components/InputCheckbox.jsx

@@ -13,7 +13,7 @@ export default class InputCheckbox extends React.Component {
   }
 
   render() {
-    return <label className="maputnik-checkbox-wrapper">
+    return <div className="maputnik-checkbox-wrapper">
       <input
         className="maputnik-checkbox"
         type="checkbox"
@@ -28,7 +28,7 @@ export default class InputCheckbox extends React.Component {
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>
-    </label>
+    </div>
   }
 }
 

src/components/InputNumber.jsx

@@ -172,7 +172,6 @@ export default class InputNumber extends React.Component {
           step="any"
           spellCheck="false"
           value={value === undefined ? defaultValue : value}
-          aria-hidden="true"
           onChange={this.onChangeRange}
           onKeyDown={() => {
             this._keyboardEvent = true;

src/components/LayerEditor.jsx

@@ -290,7 +290,7 @@ export default class LayerEditor extends React.Component {
       items[id].handler();
     }
 
-    return <div className="maputnik-layer-editor"
+    return <section className="maputnik-layer-editor"
       role="main"
       aria-label="Layer editor"
     >
@@ -332,6 +332,6 @@ export default class LayerEditor extends React.Component {
       >
         {groups}
       </Accordion>
-    </div>
+    </section>
   }
 }

src/components/LayerList.jsx

@@ -248,6 +248,7 @@ class LayerListContainer extends React.Component {
           })}
           index={idx}
           key={layer.key}
+          id={layer.key}
           layerId={layer.id}
           layerIndex={idx}
           layerType={layer.type}
@@ -264,7 +265,7 @@ class LayerListContainer extends React.Component {
       })
     })
 
-    return <div
+    return <section
       className="maputnik-layer-list"
       role="complementary"
       aria-label="Layers list"
@@ -310,7 +311,7 @@ class LayerListContainer extends React.Component {
           {listItems}
         </ul>
       </div>
-    </div>
+    </section>
   }
 }
 

src/components/LayerListItem.jsx

@@ -100,6 +100,7 @@ class LayerListItem extends React.Component {
     const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
 
     return <li
+      id={this.props.id}
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
       data-wd-key={"layer-list-item:"+this.props.layerId}

src/components/ModalDebug.jsx

@@ -29,8 +29,8 @@ export default class ModalDebug extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Debug'}
     >
-      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
-        <h4>Options</h4>
+        <h1>Options</h1>
         {this.props.renderer === 'mbgljs' &&
           <ul>
             {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
@@ -53,9 +53,9 @@ export default class ModalDebug extends React.Component {
             })}
           </ul>
         }
-      </div>
+      </section>
-      <div className="maputnik-modal-section">
+      <section className="maputnik-modal-section">
-        <h4>Links</h4>
+        <h1>Links</h1>
         <p>
           <a
             target="_blank"
@@ -65,7 +65,7 @@ export default class ModalDebug extends React.Component {
             Open in OSM
           </a> &mdash; Opens the current view on openstreetmap.org
         </p>
-      </div>
+      </section>
     </Modal>
   }
 }

src/components/ModalExport.jsx

@@ -67,8 +67,8 @@ export default class ModalExport extends React.Component {
       className="maputnik-export-modal"
     >
 
-      <div className="maputnik-modal-section">
+      <section className="maputnik-modal-section">
-        <h4>Download Style</h4>
+        <h1>Download Style</h1>
         <p>
           Download a JSON style to your computer.
         </p>
@@ -101,7 +101,7 @@ export default class ModalExport extends React.Component {
           <MdFileDownload />
           Download
         </InputButton>
-      </div>
+      </section>
 
     </Modal>
   }

src/components/ModalOpen.jsx

@@ -27,11 +27,11 @@ class PublicStyle extends React.Component {
         aria-label={this.props.title}
         onClick={() => this.props.onSelect(this.props.url)}
       >
-        <header className="maputnik-public-style-header">
+        <div className="maputnik-public-style-header">
-          <h4>{this.props.title}</h4>
+          <div>{this.props.title}</div>
           <span className="maputnik-space" />
           <MdAddCircleOutline />
-        </header>
+        </div>
         <div
           className="maputnik-public-style-thumbnail"
           style={{
@@ -200,18 +200,19 @@ export default class ModalOpen extends React.Component {
           <section className="maputnik-modal-section">
             <h2>Upload Style</h2>
             <p>Upload a JSON style from your computer.</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1" aria-label="Style file">
               <InputButton className="maputnik-upload-button"><MdFileUpload /> Upload</InputButton>
             </FileReaderInput>
           </section>
 
           <section className="maputnik-modal-section">
+            <form onSubmit={this.onSubmitUrl}>
               <h2>Load from URL</h2>
               <p>
                 Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
               </p>
-            <form onSubmit={this.onSubmitUrl}>
               <InputUrl
+                aria-label="Style URL"
                 data-wd-key="modal:open.url.input"
                 type="text"
                 className="maputnik-input"

src/components/ModalShortcuts.jsx

@@ -105,7 +105,7 @@ export default class ModalShortcuts extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Shortcuts'}
     >
-      <div className="maputnik-modal-section maputnik-modal-shortcuts">
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <p>
           Press <code>ESC</code> to lose focus of any active elements, then press one of:
         </p>
@@ -125,7 +125,7 @@ export default class ModalShortcuts extends React.Component {
             </li>
           })}
         </ul>
-      </div>
+      </section>
     </Modal>
   }
 }

src/components/ModalSources.jsx

@@ -84,6 +84,7 @@ class ActiveModalSourcesTypeEditor extends React.Component {
         <span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
         <span className="maputnik-space" />
         <InputButton
+          aria-label={`Remove '${this.props.sourceId}' source`}
           className="maputnik-active-source-type-editor-header-delete"
           onClick={()=> this.props.onDelete(this.props.sourceId)}
           style={{backgroundColor: 'transparent'}}
@@ -291,28 +292,28 @@ export default class ModalSources extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Sources'}
     >
-      <div className="maputnik-modal-section">
+      <section className="maputnik-modal-section">
-        <h4>Active Sources</h4>
+        <h1>Active Sources</h1>
         {activeSources}
-      </div>
+      </section>
 
-      <div className="maputnik-modal-section">
+      <section className="maputnik-modal-section">
-        <h4>Choose Public Source</h4>
+        <h1>Choose Public Source</h1>
         <p>
           Add one of the publicly available sources to your style.
         </p>
         <div className="maputnik-public-sources" style={{maxwidth: 500}}>
         {tilesetOptions}
         </div>
-      </div>
+      </section>
 
-      <div className="maputnik-modal-section">
+      <section className="maputnik-modal-section">
-				<h4>Add New Source</h4>
+				<h1>Add New Source</h1>
 				<p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
 				<AddSource
 					onAdd={(sourceId, source) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
 				/>
-      </div>
+      </section>
     </Modal>
   }
 }

src/styles/_components.scss

@@ -163,10 +163,10 @@
 // INPUT BLOCK
 .maputnik-input-block {
   margin: $margin-3;
+  display: flex;
 
   &-label {
     color: $color-lowgray;
-    display: inline-block;
     user-select: none;
     width: 32%;
     vertical-align: top;
@@ -175,7 +175,6 @@
 
   &-action {
     color: $color-lowgray;
-    display: inline-block;
     user-select: none;
     width: 18%;
     vertical-align: top;
@@ -184,7 +183,6 @@
   }
 
   &-content {
-    display: inline-block;
     width: 50%;
   }
 }

src/template.html

@@ -41,6 +41,7 @@
   <!-- TODO: Import dynamically -->
   <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
   <svg
+    aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
     version="1.1">
     <defs>