fix(a11y): add aria-live for keyboard shortcuts

This commit is contained in:
Nolan Lawson 2022-11-12 08:53:44 -08:00
parent 8fb4c40275
commit 1b9b04be76
4 changed files with 22 additions and 4 deletions

View File

@ -104,6 +104,9 @@
<!-- LoadingMask.html gets rendered here -->
<div id="loading-mask" aria-hidden="true"></div>
<!-- announceAriaLivePolite.js gets rendered here -->
<div id="theAriaLive" class="sr-only" aria-live="polite"></div>
<!-- inline SVG -->
<!-- Sapper creates a <script> tag containing `templates/client.js`

View File

@ -513,6 +513,9 @@ export default {
pollYouCreatedEnded: 'A poll you created has ended',
pollYouVotedEnded: 'A poll you voted on has ended',
reblogged: 'boosted',
favorited: 'favorited',
unreblogged: 'unboosted',
unfavorited: 'unfavorited',
showSensitiveMedia: 'Show sensitive media',
hideSensitiveMedia: 'Hide sensitive media',
clickToShowSensitive: 'Sensitive content. Click to show.',

View File

@ -38,9 +38,9 @@
/>
</div>
{#if enableShortcuts}
<Shortcut scope={shortcutScope} key="f" on:pressed="toggleFavorite()"/>
<Shortcut scope={shortcutScope} key="f" on:pressed="toggleFavorite(true)"/>
<Shortcut scope={shortcutScope} key="r" on:pressed="reply()"/>
<Shortcut scope={shortcutScope} key="b" on:pressed="reblog()"/>
<Shortcut scope={shortcutScope} key="b" on:pressed="reblog(true)"/>
{/if}
<style>
.status-toolbar {
@ -77,6 +77,7 @@
import { updateProfileAndRelationship } from '../../_actions/accounts.js'
import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations.js'
import { on } from '../../_utils/eventBus.js'
import { announceAriaLivePolite } from '../../_utils/announceAriaLivePolite.js'
export default {
oncreate () {
@ -112,21 +113,27 @@
},
store: () => store,
methods: {
toggleFavorite () {
toggleFavorite (announce) {
const { originalStatusId, favorited } = this.get()
const newFavoritedValue = !favorited
/* no await */ setFavorited(originalStatusId, newFavoritedValue)
if (newFavoritedValue) {
this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
}
if (announce) {
announceAriaLivePolite(newFavoritedValue ? 'intl.favorited' : 'intl.unfavorited')
}
},
reblog () {
reblog (announce) {
const { originalStatusId, reblogged } = this.get()
const newRebloggedValue = !reblogged
/* no await */ setReblogged(originalStatusId, newRebloggedValue)
if (newRebloggedValue) {
this.refs.reblogIcon.animate(REBLOG_ANIMATION)
}
if (announce) {
announceAriaLivePolite(newRebloggedValue ? 'intl.reblogged' : 'intl.unreblogged')
}
},
reply () {
requestAnimationFrame(() => {

View File

@ -0,0 +1,5 @@
const ariaLiveElement = process.browser && document.getElementById('theAriaLive')
export function announceAriaLivePolite (text) {
ariaLiveElement.textContent = text
}