From c1af3c7a713b6877a3f0cf54cd21fac922ec5907 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Wed, 2 Aug 2023 10:20:50 -0500
Subject: [PATCH] feat(text-area): provide additional context for AT users when
 character limit exceeds (#7412)

**Related Issue:** #6630

## Summary
This PR will provide additional context for Assistive Technology users
when character limit exceeds. After this change, AT users will receive
error message as soon as the character limit is exceeded.
---
 .../src/components/text-area/resources.ts     |  1 +
 .../src/components/text-area/text-area.scss   |  4 ++
 .../src/components/text-area/text-area.tsx    | 63 +++++++++++--------
 3 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/packages/calcite-components/src/components/text-area/resources.ts b/packages/calcite-components/src/components/text-area/resources.ts
index 4b6735649d5..684c692496b 100644
--- a/packages/calcite-components/src/components/text-area/resources.ts
+++ b/packages/calcite-components/src/components/text-area/resources.ts
@@ -1,4 +1,5 @@
 export const CSS = {
+  assistiveText: "assistive-text",
   characterLimit: "character-limit",
   content: "content",
   container: "container",
diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index a7c12ad62c4..281c15cfe57 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -177,6 +177,10 @@ textarea.block-size--full {
   @apply justify-end;
 }
 
+.assistive-text {
+  @apply sr-only;
+}
+
 @include hidden-form-input();
 @include disabled();
 @include base-component();
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index 89ee231c1bd..e432d3db50b 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -46,6 +46,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { CharacterLengthObj } from "./interfaces";
+import { guid } from "../../utils/guid";
 
 /**
  * @slot - A slot for adding text.
@@ -260,12 +261,13 @@ export class TextArea
     return (
       <Host>
         <textarea
-          aria-invalid={toAriaBoolean(this.value?.length > this.maxLength)}
+          aria-describedby={this.guid}
+          aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}
           aria-label={getLabelText(this)}
           autofocus={this.autofocus}
           class={{
             [CSS.readOnly]: this.readOnly,
-            [CSS.textAreaInvalid]: this.value?.length > this.maxLength,
+            [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
             [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,
             [CSS.blockSizeFull]: !hasFooter,
             [CSS.borderColor]: !hasFooter,
@@ -317,6 +319,11 @@ export class TextArea
           {this.renderCharacterLimit()}
         </footer>
         <HiddenFormInputSlot component={this} />
+        {this.isCharacterLimitExceeded() && (
+          <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText} id={this.guid}>
+            {this.replacePlaceHoldersInMessages()}
+          </span>
+        )}
       </Host>
     );
   }
@@ -371,6 +378,8 @@ export class TextArea
     updateMessages(this, this.effectiveLocale);
   }
 
+  private guid = guid();
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -410,7 +419,7 @@ export class TextArea
       this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
       return (
         <span class={CSS.characterLimit}>
-          <span class={{ [CSS.characterOverLimit]: this.value?.length > this.maxLength }}>
+          <span class={{ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() }}>
             {this.localizedCharacterLengthObj.currentLength}
           </span>
           {"/"}
@@ -454,32 +463,11 @@ export class TextArea
 
   syncHiddenFormInput(input: HTMLInputElement): void {
     input.setCustomValidity("");
-    if (this.value?.length > this.maxLength) {
+    if (this.isCharacterLimitExceeded()) {
       input.setCustomValidity(this.replacePlaceHoldersInMessages());
     }
   }
 
-  private replacePlaceHoldersInMessages(): string {
-    return this.messages.tooLong
-      .replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
-      .replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
-  }
-
-  // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.
-  // throttle is used to avoid flashing of textarea when user resizes.
-  private setHeightAndWidthToAuto = throttle(
-    (): void => {
-      if (this.resize === "vertical" || this.resize === "both") {
-        this.el.style.height = "auto";
-      }
-      if (this.resize === "horizontal" || this.resize === "both") {
-        this.el.style.width = "auto";
-      }
-    },
-    RESIZE_TIMEOUT,
-    { leading: false }
-  );
-
   setTextAreaEl = (el: HTMLTextAreaElement): void => {
     this.textAreaEl = el;
     this.resizeObserver.observe(el);
@@ -514,4 +502,29 @@ export class TextArea
       footerWidth,
     };
   }
+
+  private replacePlaceHoldersInMessages(): string {
+    return this.messages.tooLong
+      .replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
+      .replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
+  }
+
+  // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.
+  // throttle is used to avoid flashing of textarea when user resizes.
+  private setHeightAndWidthToAuto = throttle(
+    (): void => {
+      if (this.resize === "vertical" || this.resize === "both") {
+        this.el.style.height = "auto";
+      }
+      if (this.resize === "horizontal" || this.resize === "both") {
+        this.el.style.width = "auto";
+      }
+    },
+    RESIZE_TIMEOUT,
+    { leading: false }
+  );
+
+  private isCharacterLimitExceeded(): boolean {
+    return this.value?.length > this.maxLength;
+  }
 }