fix: report remaining chars to screenreaders (#2300)

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>
This commit is contained in:
Noelia Ruiz Martínez 2022-12-10 19:40:37 +01:00 committed by GitHub
parent d31c800806
commit 4a6907bbdc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 16 deletions

View file

@ -188,8 +188,6 @@ export default {
}`, }`,
pinPage: 'Hefte {label} an', pinPage: 'Hefte {label} an',
// Status composition // Status composition
overLimit: '{count} {count, plural, =1 {Zeichen} other {Zeichen}} über der Beschränkung',
underLimit: '{count} {count, plural, =1 {Zeichen} other {Zeichen}} übrig',
composeStatus: 'Tröt erstellen', composeStatus: 'Tröt erstellen',
postStatus: 'Tröt!', postStatus: 'Tröt!',
contentWarning: 'Inhaltswarnung', contentWarning: 'Inhaltswarnung',

View file

@ -194,8 +194,6 @@ export default {
}`, }`,
pinPage: 'Pin {label}', pinPage: 'Pin {label}',
// Status composition // Status composition
overLimit: '{count} {count, plural, =1 {character} other {characters}} over limit',
underLimit: '{count} {count, plural, =1 {character} other {characters}} remaining',
composeStatus: 'Compose toot', composeStatus: 'Compose toot',
postStatus: 'Toot!', postStatus: 'Toot!',
contentWarning: 'Content warning', contentWarning: 'Content warning',

View file

@ -189,8 +189,6 @@ export default {
}`, }`,
pinPage: 'Epingler {label}', pinPage: 'Epingler {label}',
// Status composition // Status composition
overLimit: '{count} {count, plural, =1 {caractère} other {caractères}} en dessus de la limite',
underLimit: '{count} {count, plural, =1 {caractère} other {caractères}} qui reste',
composeStatus: 'Ecrire un pouet', composeStatus: 'Ecrire un pouet',
postStatus: 'Pouet!', postStatus: 'Pouet!',
contentWarning: 'Avertissement', contentWarning: 'Avertissement',

View file

@ -192,8 +192,6 @@ export default {
}`, }`,
pinPage: 'Закрепить {label}', pinPage: 'Закрепить {label}',
// Status composition // Status composition
overLimit: '{count} {count, plural, =1 {символ} other {символов}} сверх лимита',
underLimit: '{count} {count, plural, =1 {символ} other {символов}} осталось',
composeStatus: 'Создать запись', composeStatus: 'Создать запись',
postStatus: 'Опубликовать!', postStatus: 'Опубликовать!',
contentWarning: 'Предупреждение о содержимом', contentWarning: 'Предупреждение о содержимом',

View file

@ -1,5 +1,6 @@
<span class="length-indicator {overLimit ? 'over-char-limit' : ''}" <span class="length-indicator {overLimit ? 'over-char-limit' : ''}"
aria-label={lengthLabel} aria-live={lengthVerbosity}
aria-atomic='true'
{style} {style}
>{lengthToDisplayDeferred}</span> >{lengthToDisplayDeferred}</span>
<style> <style>
@ -17,10 +18,11 @@
import { store } from '../_store/store.js' import { store } from '../_store/store.js'
import { observe } from 'svelte-extras' import { observe } from 'svelte-extras'
import { throttleTimer } from '../_utils/throttleTimer.js' import { throttleTimer } from '../_utils/throttleTimer.js'
import { formatIntl } from '../_utils/formatIntl.js'
const updateDisplayedLength = process.browser && throttleTimer(requestAnimationFrame) const updateDisplayedLength = process.browser && throttleTimer(requestAnimationFrame)
// How many chars within the limit to start warning at
const WARN_THRESHOLD = 10
export default { export default {
oncreate () { oncreate () {
const { lengthToDisplay } = this.get() const { lengthToDisplay } = this.get()
@ -42,11 +44,12 @@
store: () => store, store: () => store,
computed: { computed: {
lengthToDisplay: ({ length, max }) => max - length, lengthToDisplay: ({ length, max }) => max - length,
lengthLabel: ({ overLimit, lengthToDisplayDeferred }) => { lengthVerbosity: ({ lengthToDisplayDeferred }) => {
if (overLimit) { // When approaching the limit, notify screen reader users
return formatIntl('intl.overLimit', { count: -lengthToDisplayDeferred }) if (lengthToDisplayDeferred > WARN_THRESHOLD) {
return 'off'
} else { } else {
return formatIntl('intl.underLimit', { count: lengthToDisplayDeferred }) return 'polite'
} }
} }
}, },