From 1f07ae926620c09fce0ae367a57bc3de6bdb99cc Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Sat, 14 Dec 2019 16:32:10 +0000
Subject: [PATCH] Improve accessibility

* More title attributes
* Usage of aria-hidden and role attributes
* Focus style improvements
* Text contrast improvements
---
 src/components/AppHeader.vue            | 16 ++++++++++------
 src/components/LDeviceLocationPopup.vue | 22 +++++++++++-----------
 src/components/modals/Download.vue      | 12 ++++++++++--
 src/components/modals/Information.vue   | 10 +++++-----
 src/locales/de.json                     |  7 ++++++-
 src/locales/en.json                     |  7 ++++++-
 src/styles/_base.scss                   | 17 ++++++++++++-----
 src/styles/_datepicker.scss             |  1 +
 src/styles/_map.scss                    |  8 ++++++++
 9 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index c2219c9..e546c13 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -13,7 +13,7 @@
         </button>
       </div>
       <div class="nav-item">
-        <LayersIcon size="1x" />
+        <LayersIcon size="1x" aria-hidden="true" role="img" />
         <Dropdown :label="$t('Layer settings')" :title="$t('Show/hide layers')">
           <label v-for="option in layerSettingsOptions" :key="option.layer">
             <input
@@ -31,7 +31,7 @@
         </Dropdown>
       </div>
       <div class="nav-item">
-        <CalendarIcon size="1x" />
+        <CalendarIcon size="1x" aria-hidden="true" role="img" />
         <VueCtkDateTimePicker
           v-model="startDateTime"
           :format="DATE_TIME_FORMAT"
@@ -63,7 +63,7 @@
         </VueCtkDateTimePicker>
       </div>
       <div class="nav-item">
-        <UserIcon size="1x" />
+        <UserIcon size="1x" aria-hidden="true" role="img" />
         <select
           v-model="selectedUser"
           class="dropdown-button button"
@@ -78,7 +78,7 @@
         </select>
       </div>
       <div v-if="selectedUser" class="nav-item">
-        <SmartphoneIcon size="1x" />
+        <SmartphoneIcon size="1x" aria-hidden="true" role="img" />
         <select
           v-model="selectedDevice"
           class="dropdown-button button"
@@ -104,7 +104,11 @@
           :title="$t('Download raw data')"
           @click="$modal.show('download')"
         >
-          <DownloadIcon size="1x" />
+          <DownloadIcon
+            size="1x"
+            :aria-label="$t('Download raw data')"
+            role="img"
+          />
         </button>
       </div>
       <div class="nav-item">
@@ -113,7 +117,7 @@
           :title="$t('Information')"
           @click="$modal.show('information')"
         >
-          <InfoIcon size="1x" />
+          <InfoIcon size="1x" :aria-label="$t('Information')" role="img" />
         </button>
       </div>
     </nav>
diff --git a/src/components/LDeviceLocationPopup.vue b/src/components/LDeviceLocationPopup.vue
index 8b17e97..d2d7c6a 100644
--- a/src/components/LDeviceLocationPopup.vue
+++ b/src/components/LDeviceLocationPopup.vue
@@ -3,30 +3,30 @@
     <div v-if="name" class="device">{{ name }}</div>
     <div v-else class="device">{{ user }}/{{ device }}</div>
     <div class="wrapper">
-      <img v-if="face" :src="faceImageDataURI" />
+      <img v-if="face" :src="faceImageDataURI" alt="" />
       <ul class="info-list">
-        <li>
-          <ClockIcon size="1x" />
+        <li :title="$t('Timestamp')">
+          <ClockIcon size="1x" aria-hidden="true" role="img" />
           {{ new Date(timestamp * 1000).toLocaleString() }}
         </li>
-        <li>
-          <MapPinIcon size="1x" />
+        <li :title="$t('Location')">
+          <MapPinIcon size="1x" aria-hidden="true" role="img" />
           {{ lat }}
           <br />
           {{ lon }}
           <br />
           {{ alt }}m
         </li>
-        <li v-if="address">
-          <HomeIcon size="1x" />
+        <li v-if="address" :title="$t('Address')">
+          <HomeIcon size="1x" aria-hidden="true" role="img" />
           {{ address }}
         </li>
-        <li v-if="typeof battery === 'number'">
-          <BatteryIcon size="1x" />
+        <li v-if="typeof battery === 'number'" :title="$t('Battery')">
+          <BatteryIcon size="1x" aria-hidden="true" role="img" />
           {{ battery }} %
         </li>
-        <li v-if="typeof speed === 'number'">
-          <ZapIcon size="1x" />
+        <li v-if="typeof speed === 'number'" :title="$t('Speed')">
+          <ZapIcon size="1x" aria-hidden="true" role="img" />
           {{ speed }} km/h
         </li>
       </ul>
diff --git a/src/components/modals/Download.vue b/src/components/modals/Download.vue
index ac3a30b..f234816 100644
--- a/src/components/modals/Download.vue
+++ b/src/components/modals/Download.vue
@@ -12,10 +12,18 @@
       </label>
     </div>
     <div class="buttons">
-      <button class="button button-outline button-primary" @click="copy">
+      <button
+        class="button button-outline button-primary"
+        :title="$t('Copy to clipboard')"
+        @click="copy"
+      >
         {{ $t("Copy to clipboard") }}
       </button>
-      <button class="button button-primary" @click="download">
+      <button
+        class="button button-primary"
+        :title="$t('Download')"
+        @click="download"
+      >
         {{ $t("Download") }}
       </button>
     </div>
diff --git a/src/components/modals/Information.vue b/src/components/modals/Information.vue
index 9cd0750..2de0a3c 100644
--- a/src/components/modals/Information.vue
+++ b/src/components/modals/Information.vue
@@ -2,33 +2,33 @@
   <modal name="information" adaptive>
     <ul class="info-list">
       <li>
-        <GithubIcon size="1x" />
+        <GithubIcon size="1x" aria-hidden="true" role="img" />
         <a href="https://github.com/owntracks/frontend">
           owntracks/frontend
         </a>
         ({{ frontendVersion }})
       </li>
       <li>
-        <GithubIcon size="1x" />
+        <GithubIcon size="1x" aria-hidden="true" role="img" />
         <a href="https://github.com/owntracks/recorder">
           owntracks/recorder
         </a>
         ({{ recorderVersion || "Loading version..." }})
       </li>
       <li>
-        <GlobeIcon size="1x" />
+        <GlobeIcon size="1x" aria-hidden="true" role="img" />
         <a href="https://owntracks.org">
           {{ $t("OwnTracks website") }}
         </a>
       </li>
       <li>
-        <BookIcon size="1x" />
+        <BookIcon size="1x" aria-hidden="true" role="img" />
         <a href="https://owntracks.org/booklet/">
           {{ $t("OwnTracks documentation") }}
         </a>
       </li>
       <li>
-        <TwitterIcon size="1x" />
+        <TwitterIcon size="1x" aria-hidden="true" role="img" />
         <a href="https://twitter.com/OwnTracks">
           {{ $t("OwnTracks on Twitter") }}
         </a>
diff --git a/src/locales/de.json b/src/locales/de.json
index 675729f..746340c 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -22,5 +22,10 @@
   "OwnTracks website": "OwnTracks Webseite",
   "OwnTracks documentation": "OwnTracks Dokumentation",
   "OwnTracks on Twitter": "OwnTracks auf Twitter",
-  "Loading data, please wait...": "Daten werden geladen, bitte warten..."
+  "Loading data, please wait...": "Daten werden geladen, bitte warten...",
+  "Timestamp": "Zeitstempel",
+  "Location": "Standort",
+  "Address": "Adresse",
+  "Battery": "Akku",
+  "Speed": "Geschwindigkeit"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 2c7e6a6..7071ee3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -22,5 +22,10 @@
   "OwnTracks website": "OwnTracks website",
   "OwnTracks documentation": "OwnTracks documentation",
   "OwnTracks on Twitter": "OwnTracks on Twitter",
-  "Loading data, please wait...": "Loading data, please wait..."
+  "Loading data, please wait...": "Loading data, please wait...",
+  "Timestamp": "Timestamp",
+  "Location": "Location",
+  "Address": "Address",
+  "Battery": "Battery",
+  "Speed": "Speed"
 }
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index c846912..e1d4dd5 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -172,14 +172,20 @@ pre {
   padding: 8px 16px;
   text-overflow: ellipsis;
   white-space: nowrap;
+  transition: box-shadow 0.2s;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2);
+  }
+
+  &:focus::-moz-focus-inner {
+    border-color: transparent;
+  }
 
   &.button-primary {
     color: var(--color-primary-text);
     background: var(--color-primary);
-
-    &:focus::-moz-focus-inner {
-      border-color: var(--color-primary-text)e;
-    }
   }
 
   &.button-outline {
@@ -204,7 +210,8 @@ pre {
 
   &.button-outline,
   &.button-flat {
-    transition: background 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+
     &:hover,
     &:focus {
       background: rgba(0, 0, 0, 0.2);
diff --git a/src/styles/_datepicker.scss b/src/styles/_datepicker.scss
index f03547e..3071af9 100644
--- a/src/styles/_datepicker.scss
+++ b/src/styles/_datepicker.scss
@@ -5,5 +5,6 @@
   .datepicker {
     box-shadow: none !important;
     filter: var(--drop-shadow);
+    margin-top: 5px;
   }
 }
diff --git a/src/styles/_map.scss b/src/styles/_map.scss
index 196baba..ac92b35 100644
--- a/src/styles/_map.scss
+++ b/src/styles/_map.scss
@@ -35,4 +35,12 @@
   .leaflet-popup-tip {
     box-shadow: none;
   }
+
+  .leaflet-control-container .leaflet-control-attribution {
+    background: var(--color-background);
+
+    a {
+      color: var(--color-primary);
+    }
+  }
 }