[TASK] Improve accessbility

html/index.html

@@ -16,7 +16,7 @@
 <div class="loader">
   <p>
     Lade<br />
-    <img inline src="logo.svg" class="spinner" />
+    <img inline src="logo.svg" class="spinner" alt="Loading ..."/>
     <br />
     Karten &amp; Knoten...
   </p>

lib/filters/filtergui.js

@@ -22,6 +22,7 @@ define(function () {
 
         var button = document.createElement('button');
         button.classList.add('ion-close');
+        button.setAttribute('aria-label', _.t('remove'));
         button.onclick = function onclick() {
           distributor.removeFilter(d);
         };

lib/filters/hostname.js

@@ -26,6 +26,7 @@ define(function () {
     function render(el) {
       input.type = 'search';
       input.placeholder = _.t('sidebar.nodeFilter');
+      input.setAttribute('aria-label', _.t('sidebar.nodeFilter'));
       input.addEventListener('input', refresh);
       el.classList.add('filter-node');
       el.classList.add('ion-filter');

lib/gui.js

@@ -64,7 +64,7 @@ function (d3Interpolate, Map, Sidebar, Tabs, Container, Legend, Linklist,
 
     var buttonToggle = document.createElement('button');
     buttonToggle.classList.add('ion-eye');
-    buttonToggle.setAttribute('data-tooltip', _.t('button.switchView'));
+    buttonToggle.setAttribute('aria-label', _.t('button.switchView'));
     buttonToggle.onclick = function onclick() {
       var data;
       if (content.constructor === Map) {

lib/infobox/location.js

@@ -14,16 +14,19 @@ define(['helper'], function (helper) {
       });
 
     var editLat = document.createElement('input');
+    editLat.setAttribute('aria-label', _.t('location.latitude'));
     editLat.type = 'text';
     editLat.value = d.lat.toFixed(9);
     el.appendChild(createBox('lat', _.t('location.latitude'), editLat));
 
     var editLng = document.createElement('input');
+    editLng.setAttribute('aria-label', _.t('location.longitude'));
     editLng.type = 'text';
     editLng.value = d.lng.toFixed(9);
     el.appendChild(createBox('lng', _.t('location.longitude'), editLng));
 
     var editUci = document.createElement('textarea');
+    editUci.setAttribute('aria-label', 'Uci');
     editUci.value =
       "uci set gluon-node-info.@location[0]='location'; " +
       "uci set gluon-node-info.@location[0].share_location='1';" +
@@ -41,6 +44,7 @@ define(['helper'], function (helper) {
       var btn = document.createElement('button');
       btn.classList.add('ion-clipboard');
       btn.title = _.t('location.copy');
+      btn.setAttribute('aria-label', _.t('location.copy'));
       btn.onclick = function onclick() {
         copy2clip(inputElem.id);
       };

lib/infobox/main.js

@@ -30,6 +30,7 @@ define(['infobox/link', 'infobox/node', 'infobox/location'], function (Link, Nod
       var closeButton = document.createElement('button');
       closeButton.classList.add('close');
       closeButton.classList.add('ion-close');
+      closeButton.setAttribute('aria-label', _.t('close'));
       closeButton.onclick = function () {
         router.fullUrl();
       };

lib/legend.js

@@ -24,9 +24,9 @@ define(['helper'], function (helper) {
     };
 
     self.render = function render(el) {
-      var h2 = document.createElement('h2');
+      var h1 = document.createElement('h1');
-      h2.textContent = config.siteName;
+      h1.textContent = config.siteName;
-      el.appendChild(h2);
+      el.appendChild(h1);
 
       language.languageSelect(el);
 

lib/main.js

@@ -124,7 +124,7 @@ define(['moment', 'utils/router', 'leaflet', 'gui', 'helper', 'utils/language'],
         })
         .catch(function (e) {
           document.querySelector('.loader').innerHTML += e.message
-            + '<br /><br /><button onclick="location.reload(true)" class="btn text">Try to reload</button><br /> or report to your community';
+            + '<br /><br /><button onclick="location.reload(true)" class="btn text" aria-label="Try to reload">Try to reload</button><br /> or report to your community';
           console.warn(e);
         });
     };

lib/map.js

@@ -105,6 +105,13 @@ define(['map/clientlayer', 'map/labellayer', 'map/button', 'leaflet'],
         }
       });
 
+      map.on('load', function () {
+        document.querySelectorAll('.leaflet-control-layers-selector').forEach(function (input) {
+          input.setAttribute('role', 'radiogroup');
+          input.setAttribute('aria-label', input.nextSibling.innerHTML.trim());
+        });
+      });
+
       var nodeDict = {};
       var linkDict = {};
       var highlight;

lib/map/button.js

@@ -29,7 +29,7 @@ define(['map/clientlayer', 'map/labellayer', 'leaflet', 'map/locationmarker'],
     var LocateButton = ButtonBase.extend({
       onAdd: function () {
         var button = L.DomUtil.create('button', 'ion-locate');
-        button.setAttribute('data-tooltip', _.t('button.tracking'));
+        button.setAttribute('aria-label', _.t('button.tracking'));
         L.DomEvent.disableClickPropagation(button);
         L.DomEvent.addListener(button, 'click', this.onClick, this);
 
@@ -46,7 +46,7 @@ define(['map/clientlayer', 'map/labellayer', 'leaflet', 'map/locationmarker'],
     var CoordsPickerButton = ButtonBase.extend({
       onAdd: function () {
         var button = L.DomUtil.create('button', 'ion-pin');
-        button.setAttribute('data-tooltip', _.t('button.location'));
+        button.setAttribute('aria-label', _.t('button.location'));
 
         // Click propagation isn't disabled as this causes problems with the
         // location picking mode; instead propagation is stopped in onClick().

lib/sidebar.js

@@ -18,6 +18,7 @@ define(function () {
     sidebar.appendChild(button);
 
     button.classList.add('sidebarhandle');
+    button.setAttribute('aria-label', _.t('sidebar.toggle'));
     button.onclick = function onclick() {
       sidebar.classList.toggle('hidden');
     };

lib/utils/language.js

@@ -6,6 +6,7 @@ define(['polyglot', 'moment', 'helper'], function (Polyglot, moment, helper) {
     function languageSelect(el) {
       var select = document.createElement('select');
       select.className = 'language-switch';
+      select.setAttribute('aria-label', 'Language');
       select.addEventListener('change', setSelectLocale);
       el.appendChild(select);
 

locale/en.json

@@ -51,7 +51,8 @@
     "aboutInfo": "<h2>About Meshviewer</h2> <p>You can zoom in with double-click and zoom out with shift+double-click</p>",
     "actual": "Current",
     "stats": "Statistics",
-    "about": "About"
+    "about": "About",
+    "toggle" : "Toggle Sidebar"
   },
   "button": {
     "switchView": "Switch view",
@@ -87,5 +88,7 @@
   "no": "no",
   "unknown": "unknown",
   "others": "others",
-  "none": "none"
+  "none": "none",
+  "remove": "remove",
+  "close": "close"
 }

scss/modules/_base.scss

@@ -22,11 +22,7 @@ h6 {
   font-weight: bold;
 }
 
-h1 {
+h1,
-  font-size: 2em;
-  padding: .67em 0;
-}
-
 h2 {
   font-size: 1.5em;
   padding: .83em 0;
@@ -37,6 +33,7 @@ h3 {
   padding: 1em 0;
 }
 
+h1,
 h2,
 h3 {
   padding-left: $button-distance;
@@ -57,6 +54,10 @@ img {
 a {
   color: $color-online;
   text-decoration: none;
+
+  &:focus {
+    color: darken($color-online, 15%);
+  }
 }
 
 p {
@@ -70,3 +71,15 @@ strong {
 .hide {
   display: none !important; // sass-lint:disable-line no-important
 }
+
+.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

scss/modules/_button.scss

@@ -29,7 +29,8 @@ button {
     }
   }
 
-  &.active {
+  &.active,
+  &:focus {
     box-shadow: 0 0 0 2px $color-primary;
   }
 
@@ -73,3 +74,33 @@ button {
     width: auto;
   }
 }
+
+// Tooltip
+// sass-lint:disable-block nesting-depth
+.content,
+.sidebar > {
+  button {
+    &[aria-label] {
+      &::after {
+        background: $color-black;
+        border-radius: 3px;
+        color: $color-white;
+        content: attr(aria-label);
+        font-family: $font-family;
+        font-size: $font-size;
+        padding: 0 12px;
+        position: absolute;
+        transform: translate(45px, 52px);
+        visibility: hidden;
+        white-space: nowrap;
+      }
+
+      &:hover {
+        &::after {
+          transition: visibility 0s linear .3s;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}

scss/modules/_filter.scss

@@ -57,6 +57,10 @@
       outline: none;
       padding: 0 2px;
       width: 100%;
+
+      &:focus {
+        background: transparentize($color-primary, .95);
+      }
     }
 
     button {

scss/modules/_legend.scss

@@ -1,5 +1,5 @@
 header {
-  h2 {
+  h1 {
     display: inline-block;
   }
 }

scss/modules/_sidebar.scss

@@ -12,6 +12,13 @@
     .sidebarhandle {
       left: $button-distance;
       transform: scale(-1, 1);
+
+      // sass-lint:disable-block nesting-depth
+      &[aria-label] {
+        &::after {
+          transform: scale(-1, 1) translate(105px, 52px) !important; // sass-lint:disable-line no-important
+        }
+      }
     }
     @media screen and (max-width: map-get($grid-breakpoints, lg) - 1) {
       width: auto;
@@ -116,10 +123,16 @@
   transition: left .5s, color .5s, transform .5s;
   z-index: 1010;
 
-  &::after {
+  &::before {
     content: '\f124';
     padding-right: .125em;
   }
+
+  &[aria-label] {
+    &::after {
+      transform: translate(-45px, 52px) !important; // sass-lint:disable-line no-important
+    }
+  }
 }
 
 .online {