From 37915e7d4e4388853bc85ee3d9c740c8f3d3189b Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Tue, 21 Sep 2021 08:58:38 +0300
Subject: [PATCH] a11y tweaks

* use a darker light gray color
* add aria-label in Open SVG input
* switch to buttons when possible
---
 src/css/components/_changelog.scss       |  2 +-
 src/css/components/_settings.scss        |  2 +-
 src/index.html                           | 10 +++++-----
 src/js/page/ui/floating-action-button.js |  4 ++--
 src/js/page/ui/svg-output.js             |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/css/components/_changelog.scss b/src/css/components/_changelog.scss
index 53871b77c..b4675bcaf 100644
--- 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
index 8d0d4ddbd..ab94ea23e 100644
--- 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
index 67b903fef..30928ee75 100644
--- 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
index 3002a4440..fe9f4031f 100644
--- 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
index 5f03d36cc..cddfdccc1 100644
--- 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 :(