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',
// 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',
postStatus: 'Tröt!',
contentWarning: 'Inhaltswarnung',

View file

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

View file

@ -189,8 +189,6 @@ export default {
}`,
pinPage: 'Epingler {label}',
// 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',
postStatus: 'Pouet!',
contentWarning: 'Avertissement',

View file

@ -17,7 +17,7 @@ export default {
logIn: 'Войти',
footer: `
<p>
Pinafore — это
Pinafore — это
<a rel="noopener" target="_blank" href="https://github.com/nolanlawson/pinafore">программное обеспечение с открытым исходным кодом</a>
созданное
<a rel="noopener" target="_blank" href="https://nolanlawson.com">Ноланом Лоусоном</a>
@ -192,8 +192,6 @@ export default {
}`,
pinPage: 'Закрепить {label}',
// Status composition
overLimit: '{count} {count, plural, =1 {символ} other {символов}} сверх лимита',
underLimit: '{count} {count, plural, =1 {символ} other {символов}} осталось',
composeStatus: 'Создать запись',
postStatus: 'Опубликовать!',
contentWarning: 'Предупреждение о содержимом',

View file

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