commit 68434df4fa43313ed84f591e7b508c5afa3f7f54
parent e627065b86effa14786bb1b59f0f54314d8e0f4d
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date: Fri, 13 Aug 2021 11:29:12 -0700
Improve accessibility
Diffstat:
6 files changed, 25 insertions(+), 17 deletions(-)
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="">
+<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,9 @@
<template>
<div id="app">
<header>
- <router-link class="title" to="/home">running-calculator</router-link>
+ <h1>
+ running-calculator
+ </h1>
</header>
<div id="route-content">
<router-view/>
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -10,3 +10,11 @@ body {
input, select {
padding: 0.2em;
}
+
+
+/* default styles for mobile devices */
+@media only screen and (max-width: 800px) {
+ input, select {
+ font-size: 1em;
+ }
+}
diff --git a/src/components/TimeInput.vue b/src/components/TimeInput.vue
@@ -1,12 +1,12 @@
<template>
<div class="time-input">
- <int-input class="hours"
+ <int-input class="hours" aria-label="hours"
:min="0" :max="23" :padding="1" v-model="hours"/>
<span>:</span>
- <int-input class="minutes"
+ <int-input class="minutes" aria-label="minutes"
:min="0" :max="59" :padding="2" v-model="minutes"/>
<span>:</span>
- <decimal-input class="seconds"
+ <decimal-input class="seconds" aria-label="seconds"
:min="0" :max="59.99" :padding="2" :digits="2" v-model="seconds"/>
</div>
</template>
diff --git a/src/views/PaceCalculator.vue b/src/views/PaceCalculator.vue
@@ -2,8 +2,9 @@
<div class="pace-calculator">
<div class="input">
Running
- <decimal-input v-model="inputDistance" :min="0" :digits="2"/>
- <select v-model="inputUnit">
+ <decimal-input v-model="inputDistance" aria-label="distance value"
+ :min="0" :digits="2"/>
+ <select v-model="inputUnit" aria-label="distance unit">
<option v-for="(value, key) in distanceUnits" :key="key" :value="key">
{{ value }}
</option>
@@ -31,7 +32,7 @@
<td>in</td>
- <td class="output-value">
+ <td>
{{ formatDuration(item.time, 0, 2) }}
</td>
</tr>
@@ -193,15 +194,12 @@ table {
min-width: 300px;
}
tr {
- border: 1px solid #000000;
+ border: 0.1em solid #000000;
}
th, td {
padding: 0.2em;
text-align: left;
}
-.output-value {
- font-weight: bold;
-}
@media only screen and (max-width: 400px) {
table {
width: 100%;
diff --git a/src/views/UnitCalculator.vue b/src/views/UnitCalculator.vue
@@ -8,10 +8,10 @@
<time-input v-if="getUnitType(inputUnit) === 'time'" class="input-value"
v-model="inputValue"/>
- <decimal-input v-else class="input-value" v-model="inputValue" :min="0"
- :digits="2"/>
+ <decimal-input v-else class="input-value" aria-label="input value"
+ v-model="inputValue" :min="0" :digits="2"/>
- <select v-model="inputUnit" class="input-units">
+ <select v-model="inputUnit" class="input-units" aria-label="input units">
<option v-for="(value, key) in unitNames" :key="key" :value="key">
{{ value }}
</option>
@@ -26,7 +26,7 @@
{{ outputValue.toFixed(2) }}
</span>
- <select v-model="outputUnit" class="output-units">
+ <select v-model="outputUnit" class="output-units" aria-label="output units">
<option v-for="(value, key) in unitNames" :key="key" :value="key">
{{ value }}
</option>
@@ -184,7 +184,7 @@ export default {
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto auto;
width: 450px;
- grid-gap: 0.2em;
+ grid-gap: 0.4em;
}
.unit-calculator .category {
grid-row: 1;
