diff --git a/html/index.html b/html/index.html
index c731ef5..6413fd4 100644
--- a/html/index.html
+++ b/html/index.html
@@ -16,7 +16,7 @@
Lade
-
+
Karten & Knoten...
diff --git a/lib/filters/filtergui.js b/lib/filters/filtergui.js
index 5dc033e..767d5f9 100644
--- a/lib/filters/filtergui.js
+++ b/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);
};
diff --git a/lib/filters/hostname.js b/lib/filters/hostname.js
index 5da75f3..c269d54 100644
--- a/lib/filters/hostname.js
+++ b/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');
diff --git a/lib/gui.js b/lib/gui.js
index 8def2fd..01736b9 100644
--- a/lib/gui.js
+++ b/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) {
diff --git a/lib/infobox/location.js b/lib/infobox/location.js
index ba09a7e..e313f83 100644
--- a/lib/infobox/location.js
+++ b/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);
};
diff --git a/lib/infobox/main.js b/lib/infobox/main.js
index bf81540..3e51e61 100644
--- a/lib/infobox/main.js
+++ b/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();
};
diff --git a/lib/legend.js b/lib/legend.js
index 530accf..8450270 100644
--- a/lib/legend.js
+++ b/lib/legend.js
@@ -24,9 +24,9 @@ define(['helper'], function (helper) {
};
self.render = function render(el) {
- var h2 = document.createElement('h2');
- h2.textContent = config.siteName;
- el.appendChild(h2);
+ var h1 = document.createElement('h1');
+ h1.textContent = config.siteName;
+ el.appendChild(h1);
language.languageSelect(el);
diff --git a/lib/main.js b/lib/main.js
index 5c8b569..9d8c017 100644
--- a/lib/main.js
+++ b/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
- + '
or report to your community';
+ + '
or report to your community';
console.warn(e);
});
};
diff --git a/lib/map.js b/lib/map.js
index 9974c1f..4f3ac1f 100644
--- a/lib/map.js
+++ b/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;
diff --git a/lib/map/button.js b/lib/map/button.js
index aee508c..b7020eb 100644
--- a/lib/map/button.js
+++ b/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().
diff --git a/lib/sidebar.js b/lib/sidebar.js
index b252126..9e52726 100644
--- a/lib/sidebar.js
+++ b/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');
};
diff --git a/lib/utils/language.js b/lib/utils/language.js
index 572c2be..66f1685 100644
--- a/lib/utils/language.js
+++ b/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);
diff --git a/locale/en.json b/locale/en.json
index 02444e6..ee59a8a 100644
--- a/locale/en.json
+++ b/locale/en.json
@@ -51,7 +51,8 @@
"aboutInfo": "
About Meshviewer
You can zoom in with double-click and zoom out with shift+double-click
",
"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"
}
diff --git a/scss/modules/_base.scss b/scss/modules/_base.scss
index 933e3c7..35b8ffa 100644
--- a/scss/modules/_base.scss
+++ b/scss/modules/_base.scss
@@ -22,11 +22,7 @@ h6 {
font-weight: bold;
}
-h1 {
- font-size: 2em;
- padding: .67em 0;
-}
-
+h1,
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;
+}
diff --git a/scss/modules/_button.scss b/scss/modules/_button.scss
index 4df73b5..4987235 100644
--- a/scss/modules/_button.scss
+++ b/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;
+ }
+ }
+ }
+ }
+}
diff --git a/scss/modules/_filter.scss b/scss/modules/_filter.scss
index 8e209b0..c484f59 100644
--- a/scss/modules/_filter.scss
+++ b/scss/modules/_filter.scss
@@ -57,6 +57,10 @@
outline: none;
padding: 0 2px;
width: 100%;
+
+ &:focus {
+ background: transparentize($color-primary, .95);
+ }
}
button {
diff --git a/scss/modules/_legend.scss b/scss/modules/_legend.scss
index 50e96c1..01f730f 100644
--- a/scss/modules/_legend.scss
+++ b/scss/modules/_legend.scss
@@ -1,5 +1,5 @@
header {
- h2 {
+ h1 {
display: inline-block;
}
}
diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss
index cbb13f1..58cf3ca 100644
--- a/scss/modules/_sidebar.scss
+++ b/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 {