github/frontend
1
0
Fork 0
mirror of https://github.com/owntracks/frontend.git synced 2026-08-23 11:26:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve accessibility

Browse Source 
* More title attributes
* Usage of aria-hidden and role attributes
* Focus style improvements
* Text contrast improvements
This commit is contained in:
Linus Groh
2019-12-14 16:32:10 +00:00
parent 8399476195
commit 1f07ae9266
9 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppHeader.vue
+10 -6
View File
@@ -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>
src/components/LDeviceLocationPopup.vue
+11 -11
View File
@@ -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>
src/components/modals/Download.vue
+10 -2
View File
@@ -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>
src/components/modals/Information.vue
+5 -5
View File
@@ -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>
src/locales/de.json
+6 -1
View File
@@ -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"
}
src/locales/en.json
+6 -1
View File
@@ -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"
}
src/styles/_base.scss
+12 -5
View File
@@ -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);
src/styles/_datepicker.scss
+1
View File
@@ -5,5 +5,6 @@
.datepicker {
box-shadow: none !important;
filter: var(--drop-shadow);
margin-top: 5px;
}
}
src/styles/_map.scss
+8
View File
@@ -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);
}
}
}