summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/Logo.vue2
-rw-r--r--src/components/News.vue47
-rw-r--r--src/views/AccountRecovery.vue6
-rw-r--r--src/views/Registration.vue6
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>