Fixed some 'axe' accessibility checker issues.

2024-12-26 19:00:39 +01:00 · 2020-06-10 16:22:13 +01:00 · 2020-06-10 16:22:13 +01:00 · 34299c94ee
commit 34299c94ee
parent 5804b3c72a
13 changed files with 42 additions and 40 deletions
--- a/src/components/AppToolbar.jsx
+++ b/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>
  }
 }
--- a/src/components/InputCheckbox.jsx
+++ b/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>
  }
 }

--- a/src/components/InputNumber.jsx
+++ b/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;
--- a/src/components/LayerEditor.jsx
+++ b/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>
  }
 }
--- a/src/components/LayerList.jsx
+++ b/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>
  }
 }

--- a/src/components/LayerListItem.jsx
+++ b/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}
--- a/src/components/ModalDebug.jsx
+++ b/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">
-        <h4>Options</h4>
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
+        <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>
-      <div className="maputnik-modal-section">
-        <h4>Links</h4>
+      </section>
+      <section className="maputnik-modal-section">
+        <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>
  }
 }
--- a/src/components/ModalExport.jsx
+++ b/src/components/ModalExport.jsx
@ -67,8 +67,8 @@ export default class ModalExport extends React.Component {
      className="maputnik-export-modal"
    >

-      <div className="maputnik-modal-section">
-        <h4>Download Style</h4>
+      <section className="maputnik-modal-section">
+        <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>
  }
--- a/src/components/ModalOpen.jsx
+++ b/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">
-          <h4>{this.props.title}</h4>
+        <div className="maputnik-public-style-header">
+          <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">
-            <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}>
+              <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>
              <InputUrl
+                aria-label="Style URL"
                data-wd-key="modal:open.url.input"
                type="text"
                className="maputnik-input"
--- a/src/components/ModalShortcuts.jsx
+++ b/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>
  }
 }
--- a/src/components/ModalSources.jsx
+++ b/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">
-        <h4>Active Sources</h4>
+      <section className="maputnik-modal-section">
+        <h1>Active Sources</h1>
        {activeSources}
-      </div>
+      </section>

-      <div className="maputnik-modal-section">
-        <h4>Choose Public Source</h4>
+      <section className="maputnik-modal-section">
+        <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">
-				<h4>Add New Source</h4>
+      <section className="maputnik-modal-section">
+				<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>
  }
 }
--- a/src/styles/_components.scss
+++ b/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%;
  }
 }
--- a/src/template.html
+++ b/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>