From 4a6907bbdc72659a86065ebc62afcc45e8aa2de2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noelia=20Ruiz=20Mart=C3=ADnez?= <nrm1977@gmail.com>
Date: Sat, 10 Dec 2022 19:40:37 +0100
Subject: [PATCH] fix: report remaining chars to screenreaders (#2300)

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>
---
 src/intl/de.js                              |  2 --
 src/intl/en-US.js                           |  2 --
 src/intl/fr.js                              |  2 --
 src/intl/ru-RU.JS                           |  4 +---
 src/routes/_components/LengthIndicator.html | 17 ++++++++++-------
 5 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/intl/de.js b/src/intl/de.js
index 5dbd4f0c..593868ba 100644
--- a/src/intl/de.js
+++ b/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',
diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index f29b3b92..02825bd4 100644
--- a/src/intl/en-US.js
+++ b/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',
diff --git a/src/intl/fr.js b/src/intl/fr.js
index 32270228..79510465 100644
--- a/src/intl/fr.js
+++ b/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',
diff --git a/src/intl/ru-RU.JS b/src/intl/ru-RU.JS
index 5c31440e..e2e195b3 100644
--- a/src/intl/ru-RU.JS
+++ b/src/intl/ru-RU.JS
@@ -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: 'Предупреждение о содержимом',
diff --git a/src/routes/_components/LengthIndicator.html b/src/routes/_components/LengthIndicator.html
index b231c7ab..18f08450 100644
--- a/src/routes/_components/LengthIndicator.html
+++ b/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 }) => {
-        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'
         }
       }
     },