improve accessibility

4 files changed, 41 insertions, 20 deletions

diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index a9a2281..3c1fa56 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-	<router-link tag="div" :to="{ name: 'home' }" class="logo" title="Go to home page" aria-label="go back to the home page">
+	<router-link role="banner" :to="{ name: 'home' }" class="logo" title="Go to home page" aria-label="go back to the home page">
 		<span>The </span>Mana World
 		<!--<span>Feel the mana power growing inside you</span>-->
 		<span>A free open source 2D MMORPG in development</span>
diff --git a/src/components/News.vue b/src/components/News.vue
index 3243b3b..3515aa4 100644
--- a/src/components/News.vue
+++ b/src/components/News.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="news" v-if="count">
+	<div role="feed" aria-label="TMW news" :aria-busy="count > 1 && !fullyLoaded" class="news" v-if="count">
 		<span v-if="!entries.length">(no news entries)</span>
 
-		<article class="entry" v-for="entry in entries" :id="entry.id" v-bind:key="entry.id">
-			<a :href="'#' + entry.id">{{ entry.title }}</a>
-			<time :datetime="entry.date" class="date">{{ entry.date }}</time>
-			<section class="body" v-html="entry.html"></section>
-			<q>{{entry.author}}</q>
+		<article tabindex="0" class="entry" v-for="(entry, index) in entries" :aria-posinset="index + 1" :aria-setsize="entries.length" :id="entry.id" :aria-labelledby="entry.id + '-title'" :aria-describedby="`${entry.id}-body ${entry.id}-date ${entry.id}-author`" :key="entry.id">
+			<header><a tabindex="-1" :id="entry.id + '-title'" :href="'#' + entry.id">{{ entry.title }}</a></header>
+			<time :id="entry.id + '-date'" aria-label="publication date" :datetime="entry.date" class="date">{{ entry.date }}</time>
+			<section :id="entry.id + '-body'" class="body" v-html="entry.html"></section>
+			<q :id="entry.id + '-author'" aria-label="author">{{entry.author}}</q>
 		</article>
 		<article v-if="count > 1 && !fullyLoaded" class="entry loading">
 			<section class="body">
@@ -37,20 +37,33 @@
 	}
 
 	&:nth-of-type(1n + 2), &:not(:only-child) {
-		&:hover, &:target {
+		&:hover, &:target, &:focus-within {
 			border-color: #0000FF;
 			background-color: rgba(220,220,220,0.5);
 
-			& > .date, & > a {
+			& > .date, & header > a {
 				color: #0000FF;
 			}
 		}
 	}
 
-	& > a {
-		text-decoration: none;
-		color: inherit;
-		font-weight: bold;
+	& header {
+		display: inline-block;
+		position: relative;
+
+		&> a {
+			text-decoration: none;
+			color: inherit;
+			font-weight: bold;
+
+			&:hover::before {
+				content: "⚓";
+				filter: grayscale(1) brightness(0);
+				position: absolute;
+				top: 0;
+				left: -1.6em;
+			}
+		}
 	}
 
 	& > .date {
@@ -81,7 +94,7 @@
 	}
 
 	& q {
-		color: #009000;
+		color: #136E18;
 		margin-top: 2ex;
 		display: inline-block;
 
@@ -174,6 +187,14 @@ export default class News extends Vue {
 			this.fullyLoaded = true;
 			this.beautify();
 
+			if (document.location.hash) {
+				let el = null;
+
+				if ((el = document.getElementById(document.location.hash.slice(1))) !== null) {
+					el.scrollIntoView(true);
+				}
+			}
+
 			if (Reflect.has(self, "localStorage")) {
 				localStorage.setItem("newsCache", JSON.stringify(data));
 			}
diff --git a/src/views/AccountRecovery.vue b/src/views/AccountRecovery.vue
index 2ef988f..562222e 100644
--- a/src/views/AccountRecovery.vue
+++ b/src/views/AccountRecovery.vue
@@ -119,12 +119,12 @@
 				<div class="pass-box">
 					<label for="password">Choose a unique password:</label>
 					<input v-model="user.pwd" :type="visible ? 'text' : 'password'" id="password" ref="_password" placeholder="type your password here" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
-					<span @click="visible = !visible"></span>
+					<span role="button" :title="(visible ? 'hide' : 'show') + ' password'" aria-label="toggle password visibility" :aria-pressed="visible" @click="visible = !visible"></span>
 				</div>
 				<div class="pass-box">
 					<label for="password2">Confirm your password:</label>
 					<input v-model="user.pwd2" :type="visible ? 'text' : 'password'" id="password2" ref="_password2" placeholder="type your password again" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
-					<span @click="visible = !visible"></span>
+					<span role="button" :title="(visible ? 'hide' : 'show') + ' password'" aria-label="toggle password visibility" :aria-pressed="visible" @click="visible = !visible"></span>
 				</div>
 				<button type="submit" v-if="user.pwd && user.pwd === user.pwd2">Next step &rarr;</button>
 			</form>
@@ -138,7 +138,7 @@
 			<div class="pass-box">
 				<label for="c-pass">Password:</label>
 				<input id="c-pass" disabled readonly :type="visible ? 'text' : 'password'" :value="user.pwd">
-				<span @click="visible = !visible"></span>
+				<span role="button" :title="(visible ? 'hide' : 'show') + ' password'" aria-label="toggle password visibility" :aria-pressed="visible" @click="visible = !visible"></span>
 			</div>
 			<button @click="confirm2">Reset my password</button>
 		</div>
diff --git a/src/views/Registration.vue b/src/views/Registration.vue
index e220dc2..35c7d07 100644
--- a/src/views/Registration.vue
+++ b/src/views/Registration.vue
@@ -94,12 +94,12 @@
 				<div class="pass-box">
 					<label for="password">Choose a unique password:</label>
 					<input v-model="user.pwd" :type="visible ? 'text' : 'password'" id="password" ref="_password" placeholder="type your password here" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
-					<span @click="visible = !visible"></span>
+					<span role="button" :title="(visible ? 'hide' : 'show') + ' password'" aria-label="toggle password visibility" :aria-pressed="visible" @click="visible = !visible"></span>
 				</div>
 				<div class="pass-box">
 					<label for="password2">Confirm your password:</label>
 					<input v-model="user.pwd2" :type="visible ? 'text' : 'password'" id="password2" ref="_password2" placeholder="type your password again" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
-					<span @click="visible = !visible"></span>
+					<span role="button" :title="(visible ? 'hide' : 'show') + ' password'" aria-label="toggle password visibility" :aria-pressed="visible" @click="visible = !visible"></span>
 				</div>
 				<button type="submit" v-if="user.pwd && user.pwd === user.pwd2">Next step &rarr;</button>
 			</form>
@@ -116,7 +116,7 @@
 			<div class="pass-box">
 				<label for="c-pass">Password:</label>
 				<input id="c-pass" disabled readonly :type="visible ? 'text' : 'password'" :value="user.pwd">
-				<span @click="visible = !visible"></span>
+				<span role="button" :title="(visible ? 'hide' : 'show') + ' password'" aria-label="toggle password visibility" :aria-pressed="visible" @click="visible = !visible"></span>
 			</div>
 			<button @click="create">Create account</button>
 		</div>