a11y tweaks

* add `type="button"` in buttons
* use a darker light gray color
* add aria-label in Open SVG input
* switch to buttons when possible

src/css/components/_changelog.scss

@@ -1,6 +1,6 @@
 .changelog {
   font-size: .9rem;
-  color: #898989;
+  color: #767676;
   padding: 12px 16px;
   opacity: 0;
 

src/css/components/_settings.scss

@@ -60,7 +60,7 @@
   padding: 12px 16px 16px;
   font-weight: 400;
   font-size: .9rem;
-  color: #898989;
+  color: #767676;
 }
 
 .setting-reset-row {

src/index.html

@@ -41,11 +41,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">
@@ -57,10 +57,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">
@@ -80,7 +80,7 @@ <h1>SVGOMG</h1>
       </div>
       <div class="toolbar">
         <div class="menu-toolbar-item">
-          <button class="unbutton menu-btn">
+          <button class="unbutton menu-btn" type="button">
             {% include "partials/icons/menu.svg" %}
           </button>
         </div>
@@ -159,7 +159,7 @@ <h1 class="settings-sub-heading">Features</h1>
               {% endfor %}
             </section>
             <div class="setting-reset-row">
-              <button class="unbutton setting-reset">Reset all</button>
+              <button class="unbutton setting-reset" type="button">Reset all</button>
             </div>
           </div>
         </div>

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) {

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 :(

src/js/page/ui/toasts.js

@@ -16,6 +16,7 @@ class Toast {
     for (const button of buttons) {
       const buttonEl = document.createElement('button');
       buttonEl.className = 'unbutton';
+      buttonEl.type = 'button';
       buttonEl.textContent = button;
       buttonEl.addEventListener('click', () => {
         this._answerResolve(button);