fix: report remaining chars to screenreaders (#2300)

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>

src/intl/de.js

@@ -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',

src/intl/en-US.js

@@ -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',

src/intl/fr.js

@@ -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',

src/intl/ru-RU.JS

@@ -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: 'Предупреждение о содержимом',

src/routes/_components/LengthIndicator.html

@@ -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 }) => {
+      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 {
-          return formatIntl('intl.underLimit', { count: lengthToDisplayDeferred })
+          return 'polite'
         }
       }
     },