a11y tweaks

* use a darker light gray color * add aria-label in Open SVG input * switch to buttons when possible
jakearchibald · Sep 24, 2021 · 37915e7 · 37915e7
1 parent 92cfaed
commit 37915e7
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/src/css/components/_changelog.scss b/src/css/components/_changelog.scss
@@ -1,6 +1,6 @@
 .changelog {
   font-size: .9rem;
-  color: #898989;
+  color: #767676;
   padding: 12px 16px;
   opacity: 0;
 

diff --git a/src/css/components/_settings.scss b/src/css/components/_settings.scss
@@ -59,7 +59,7 @@
   padding: 12px 16px 16px;
   font-weight: 400;
   font-size: .9rem;
-  color: #898989;
+  color: #767676;
 }
 
 .setting-reset-row {

diff --git a/src/index.html b/src/index.html
@@ -50,11 +50,11 @@ <h1>SVGOMG</h1>
           </div>
           <ul>
             <li>
-              <div tabindex="0" role="button" class="load-file unbutton menu-item needsclick">
+              <button class="load-file unbutton menu-item needsclick" type="button">
                 {% include "partials/icons/open.svg" %}
                 <span class="menu-item-text">Open SVG</span>
-              </div>
-              <input type="file" class="load-file-input" accept=".svg">
+              </button>
+              <input type="file" class="load-file-input" accept=".svg" aria-label="Open SVG">
             </li>
             <li>
               <label class="menu-input menu-item">
@@ -66,10 +66,10 @@ <h1>SVGOMG</h1>
               </label>
             </li>
             <li>
-              <div tabindex="0" role="button" class="load-demo unbutton menu-item">
+              <button class="load-demo unbutton menu-item" type="button">
                 {% include "partials/icons/demo.svg" %}
                 <span class="menu-item-text">Demo</span>
-              </div>
+              </button>
             </li>
             <li>
               <a href="https://github.com/jakearchibald/svgomg" class="menu-item">

diff --git a/src/js/page/ui/floating-action-button.js b/src/js/page/ui/floating-action-button.js
@@ -5,9 +5,9 @@ import Spinner from './spinner.js';
 export default class FloatingActionButton {
   constructor({ title, href, iconSvg, classList, minor = true }) {
     this.container = strToEl(
-      (href ? '<a>' : '<div role="button" tabindex="0">') +
+      (href ? '<a>' : '<button class="unbutton" type="button">') +
         iconSvg +
-      (href ? '</a>' : '</div>')
+      (href ? '</a>' : '</button>')
     );
 
     if (href) this.container.href = href;

diff --git a/src/js/page/ui/svg-output.js b/src/js/page/ui/svg-output.js
@@ -6,7 +6,7 @@ export default class SvgOutput {
     this.container = strToEl(
       '<div class="svg-output">' +
         '<div class="svg-container">' +
-          '<iframe class="svg-frame" sandbox="allow-scripts"></iframe>' +
+          '<iframe class="svg-frame" sandbox="allow-scripts" title="Loaded SVG file"></iframe>' +
         '</div>' +
         // Stop touches going into the iframe.
         // pointer-events + touch + iframe doesn't work in Chrome :(