commit 971323cb7b19493de3eea29ea3915a9547772342
parent 850182c21a97fb4e76c14b3b49687d8fdd777ea4
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Sun, 14 Mar 2021 11:18:20 -0700
Improve accessibility
Diffstat:
6 files changed, 58 insertions(+), 19 deletions(-)
diff --git a/css/global.css b/css/global.css
@@ -45,17 +45,19 @@ header {
header>* {
cursor: pointer;
}
-header>img {
+header button {
position: absolute;
- height: 30px;
- background-color: var(--theme-color);
}
-header>img:first-child {
+header button:first-child {
left: 10px;
}
-header>img:last-child {
+header button:last-child {
right: 10px;
}
+header button img {
+ height: 30px;
+ width: 30px;
+}
@@ -100,7 +102,7 @@ button.icon {
cursor: pointer;
vertical-align: middle;
}
-button.icon img {
+main button.icon img {
height: 24px;
width: 24px;
}
diff --git a/js/app.js b/js/app.js
@@ -6,37 +6,72 @@ let app;
// page-header component
const pageHeader = Vue.component("pageHeader", {
props: {
+ /**
+ * The 1st header icon
+ */
icon1: {
type: String
},
+
+ /**
+ * The 2nd header icon
+ */
icon2: {
type: String
},
+
+ /**
+ * The label for the 1st header icon
+ */
+ label1: {
+ type: String
+ },
+
+ /**
+ * The label for the 2nd header icon
+ */
+ label2: {
+ type: String
+ },
+
+ /**
+ * The header text
+ */
title: {
type: String,
default: "Spanish-Quizzer",
}
},
computed: {
- image1: function() {
+ /**
+ * The path to the 1st header icon
+ */
+ path1: function() {
if (this.icon1) return `images/${this.icon1}.svg`;
else return null;
},
- image2: function() {
+
+ /**
+ * The path to the 2nd header icon
+ */
+ path2: function() {
if (this.icon2) return `images/${this.icon2}.svg`;
else return null;
}
},
methods: {
+ /**
+ * Navigate to the home page
+ */
goHome: function() {
if (this.$route.name !== 'home') this.$router.push('home');
}
},
template: `
<header>
- <img v-if="image1" :src="image1" @click="$emit('click1')"/>
+ <button v-if="path1" :title="label1" class="icon"><img :src="path1" alt="" @click="$emit('click1')"/></button>
<span @click="goHome">{{ title }}</span>
- <img v-if="image2" :src="image2" @click="$emit('click2')"/>
+ <button v-if="path2" :title="label2" class="icon"><img :src="path2" alt="" @click="$emit('click2')"/></button>
</header>
`
});
@@ -83,7 +118,7 @@ const homePage = Vue.component("homePage", {
},
template: `
<div class="home">
- <page-header icon2="settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
+ <page-header icon2="settings" label2="Settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
<main>
<h1>What do you want to study?</h1>
<div>
diff --git a/js/filtersPage.js b/js/filtersPage.js
@@ -215,7 +215,7 @@ const filterInput = Vue.component("filterInput", {
<div class="verbSettings" v-show="category === 'verbs'">
<h1>
Verb Filters
- <button class="icon" @click="AddFilter();"><img src="./images/plus.svg"></button>
+ <button title="Add filter" class="icon" @click="AddFilter();"><img src="./images/plus.svg" alt=""></button>
</h1>
<div v-for="(filter, index) in verbFilters" class="filter">
@@ -241,7 +241,7 @@ const filterInput = Vue.component("filterInput", {
<option>Conj. → Eng.</option>
<option>Conj. → Esp.</option>
</select>
- <button class="icon" @click="RemoveFilter(index);"><img src="./images/trash.svg"></button>
+ <button title="Remove filter" class="icon" @click="RemoveFilter(index);"><img src="./images/trash.svg" alt=""></button>
</div>
</div>
@@ -249,7 +249,7 @@ const filterInput = Vue.component("filterInput", {
<div class="vocabSettings" v-show="category === 'vocab'">
<h1>
Vocabulary Filters
- <button class="icon" @click="AddFilter();"><img src="./images/plus.svg"></button>
+ <button title="Add filter" class="icon" @click="AddFilter();"><img src="./images/plus.svg" alt=""></button>
</h1>
<div v-for="(filter, index) in vocabFilters" class="filter">
@@ -290,7 +290,7 @@ const filterInput = Vue.component("filterInput", {
<option>Eng. → Esp.</option>
<option>Esp. → Eng.</option>
</select>
- <button class="icon" @click="RemoveFilter(index);"><img src="./images/trash.svg"></button>
+ <button title="Remove filter" class="icon" @click="RemoveFilter(index);"><img src="./images/trash.svg" alt=""></button>
</div>
</div>
</div>
@@ -378,7 +378,8 @@ const filtersPage = Vue.component("filtersPage", {
template: `
<div class="filtersPage">
- <page-header icon1="arrow-left" @click1="$emit('back');" icon2="settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
+ <page-header icon1="arrow-left" label1="Back" @click1="$emit('back');"
+ icon2="settings" label2="Settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
<main>
<filter-input ref="filters" :category="category" v-model="filters"></filter-input>
<h1>Quizzer Settings</h1>
diff --git a/js/quizzer.js b/js/quizzer.js
@@ -378,7 +378,7 @@ const quizzerPage = Vue.component("quizzerPage", {
template: `
<div class="quizzer-page">
- <page-header @click1="$emit('back', referer);" icon1="x"></page-header>
+ <page-header @click1="$emit('back', referer);" icon1="x" label1="Back"></page-header>
<main>
<quizzer :starting-prompts="prompts" :starting-index="index" :settings="settings"
@new-prompt="updateProgress" @finished-prompts="$emit('back', referer);">
diff --git a/js/reference.js b/js/reference.js
@@ -109,7 +109,8 @@ const referenceTables = Vue.component("referenceTables", {
const referencePage = Vue.component("referencePage", {
template: `
<div class="referencePage">
- <page-header icon1="arrow-left" @click1="$emit('back');" icon2="settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
+ <page-header icon1="arrow-left" label1="Back" @click1="$emit('back');"
+ icon2="settings" label2="Settings" @click2="$router.push({name:'settings', params:{referer:$route.name}})"></page-header>
<main>
<reference-tables :data="this.$root.$data.data"></reference-tables>
</main>
diff --git a/js/settingsPage.js b/js/settingsPage.js
@@ -110,7 +110,7 @@ const settingsPage = Vue.component("settingsPage", {
template: `
<div class="settingsPage">
- <page-header @click1="$emit('back', referer);" icon1="x"></page-header>
+ <page-header @click1="$emit('back', referer);" icon1="x" label1="Back"></page-header>
<main>
<h1>Settings</h1>
<settings-input></settings-input>
