improve a11y

This commit is contained in:
Nolan Lawson 2018-01-21 01:19:28 -08:00
parent 1f32b6a0ce
commit 18ad6ab1ab
6 changed files with 48 additions and 18 deletions

View file

@ -1,4 +1,4 @@
<div class="toast-modal {{shown ? 'shown' : ''}}">
<div class="toast-modal {{shown ? 'shown' : ''}}" role="alert" aria-hidden="{{shown}}">
<div class="toast-container">
{{text}}
</div>

View file

@ -1,6 +1,12 @@
{{#if label}}
<ul class="settings-list" aria-label="{{label}}">
<slot></slot>
</ul>
{{else}}
<ul class="settings-list">
<slot></slot>
</ul>
{{/if}}
<style>
ul.settings-list {
list-style: none;

View file

@ -5,9 +5,15 @@
<use xlink:href="{{icon}}" />
</svg>
{{/if}}
{{#if ariaLabel}}
<span aria-label="{{ariaLabel}}" class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
{{label}}
</span>
{{else}}
<span class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
{{label}}
</span>
{{/if}}
</a>
</li>
<style>

View file

@ -17,7 +17,7 @@
return page === name ? "selected" : ""
},
getAriaLabel(page, name, label) {
return page === name ? "Current page" : label
return page === name ? `${label} (current page)` : label
}
}
}

View file

@ -15,9 +15,19 @@
{{/if}}
<form class="add-new-instance" on:submit='onSubmit(event)' aria-labelledby="add-an-instance-h1">
<label for="instanceInput">Instance:</label>
<input class="new-instance-input" type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
<input class="new-instance-input" type="text" id="instanceInput"
bind:value='$instanceNameInSearch' placeholder='' required
>
<button class="primary" type="submit" id="submitButton" disabled="{{!$instanceNameInSearch}}">Add instance</button>
{{#if error}}
<div class="form-error" role="alert">
Error: {{error}}
</div>
{{/if}}
</form>
{{#if !$isUserLoggedIn}}
@ -26,6 +36,14 @@
</SettingsLayout>
</Layout>
<style>
.form-error {
border: 2px solid red;
border-radius: 2px;
padding: 10px;
font-size: 1.3em;
margin: 5px;
background-color: var(--main-bg);
}
input.new-instance-input {
min-width: 50%;
max-width: 100%;
@ -58,22 +76,20 @@
import { store } from '../../_utils/store'
import { goto } from 'sapper/runtime.js'
import { switchToTheme } from '../../_utils/themeEngine'
import { toast } from '../../_utils/toast'
import LoadingMask from '../../_components/LoadingMask'
const REDIRECT_URI = (typeof location !== 'undefined' ?
location.origin : 'https://pinafore.social') + '/settings/instances/add'
export default {
oncreate: function () {
if (process.browser) {
(async () => {
async oncreate () {
let params = new URLSearchParams(location.search)
if (params.has('code')) {
this.onReceivedOauthCode(params.get('code'))
}
})()
}
this.store.observe('instanceNameInSearch', () => {
this.set({error: false})
})
},
components: {
Layout,
@ -91,10 +107,11 @@
if (process.env.NODE_ENV !== 'production') {
console.error(err)
}
toast.say(`Error: ${err.message || err.name}. ` +
let error = `${err.message || err.name}. ` +
(navigator.onLine ?
`Is this a valid Mastodon instance?` :
`Are you offline?`))
`Are you offline?`)
this.set({error: error})
} finally {
this.set({loading: false})
}
@ -104,7 +121,7 @@
let loggedInInstances = this.store.get('loggedInInstances')
instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
if (Object.keys(loggedInInstances).includes(instanceName)) {
toast.say(`You've already logged in to ${instanceName}`)
this.set({error: `You've already logged in to ${instanceName}`})
return
}
let instanceData = await registerApplication(instanceName, REDIRECT_URI)
@ -125,7 +142,7 @@
this.set({loading: true})
await this.registerNewInstance(code)
} catch (err) {
toast.say(`Error: ${err.message || err.name}. Failed to connect to instance.`)
this.set({error: `${err.message || err.name}. Failed to connect to instance.`})
} finally {
this.set({loading: false})
}

View file

@ -8,12 +8,13 @@
{{#if $isUserLoggedIn}}
<p>Instances you've logged in to:</p>
<SettingsList>
<SettingsList label="Instances">
{{#each $loggedInInstancesAsList as instance}}
<SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
icon="{{instance.name === $currentInstance ? '#fa-star' : ''}}"
href="/settings/instances/{{instance.name}}"
label="{{instance.name}}" />
label="{{instance.name}}"
ariaLabel="{{instance.name}} {{instance.name === $currentInstance ? '(current instance)' : ''}}" />
{{/each}}
</SettingsList>
<p><a href="/settings/instances/add">Add another instance</a></p>