fix: report remaining chars to screenreaders (#2300)
Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>
This commit is contained in:
parent
d31c800806
commit
4a6907bbdc
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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: 'Предупреждение о содержимом',
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue