fix: jaws to announce the status of max char/words usage

carbon-design-system · Jun 28, 2024 · 7b238c2 · 7b238c2
1 parent 0574970
commit 7b238c2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
@@ -459,7 +459,12 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
         )}
         {input}
         {normalizedSlug}
-        <span className={`${prefix}--text-area__counter-alert`} role="alert">
+        <span
+          className={`${prefix}--text-area__counter-alert`}
+          role="alert"
+          aria-atomic="true"
+          // aria-live="polite"
+        >
           {ariaAnnouncement}
         </span>
         {isFluid && <hr className={`${prefix}--text-area__divider`} />}

diff --git a/packages/react/src/internal/useAnnouncer.js b/packages/react/src/internal/useAnnouncer.js
@@ -7,6 +7,9 @@
 
 export function useAnnouncer(textCount, maxCount, entityName = 'characters') {
   const lastTen = maxCount - 10;
+  if (textCount == maxCount) {
+    return `Maximum ${entityName} reached.`;
+  }
   if (textCount >= lastTen) {
     return `${maxCount - textCount} ${entityName} left.`;
   }