refactor(TextArea and TextInput): adds remaining character count alert (

#12729)

Co-authored-by: Alison Joseph <[email protected]>

.all-contributorsrc

@@ -959,6 +959,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Shankar-CodeJunkie",
+      "name": "ShankarV-CodeJunkie",
+      "avatar_url": "https://avatars.githubusercontent.com/u/56068832?v=4",
+      "profile": "https://github.com/Shankar-CodeJunkie",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -209,6 +209,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/mgueyraud"><img src="https://avatars.githubusercontent.com/u/9916318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mario Gueyraud</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mgueyraud" title="Code">💻</a></td>
     <td align="center"><a href="https://velog.io/@djunnni"><img src="https://avatars.githubusercontent.com/u/49237205?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dongjoon Lee</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Djunnni" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Shankar-CodeJunkie"><img src="https://avatars.githubusercontent.com/u/56068832?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ShankarV-CodeJunkie</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Shankar-CodeJunkie" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

packages/react/src/components/TextArea/TextArea.js

@@ -6,13 +6,14 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext } from 'react';
 import classNames from 'classnames';
 import deprecate from '../../prop-types/deprecate';
 import { WarningFilled } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
+import { useAnnouncer } from '../../internal/useAnnouncer';
 
 const TextArea = React.forwardRef(function TextArea(
   {
@@ -40,7 +41,6 @@ const TextArea = React.forwardRef(function TextArea(
   const [textCount, setTextCount] = useState(
     defaultValue?.length || value?.length || 0
   );
-  const [ariaAnnouncement, setAriaAnnouncement] = useState('');
 
   const textareaProps = {
     id,
@@ -61,15 +61,7 @@ const TextArea = React.forwardRef(function TextArea(
   if (enableCounter) {
     textareaProps.maxLength = maxCount;
   }
-
-  useEffect(() => {
-    const lastTen = maxCount - 10;
-    if (textCount >= lastTen) {
-      setAriaAnnouncement(`${maxCount - textCount} characters left.`);
-    } else {
-      setAriaAnnouncement('');
-    }
-  }, [textCount, maxCount]);
+  let ariaAnnouncement = useAnnouncer(textCount, maxCount);
 
   const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,

packages/react/src/components/TextInput/TextInput.js

@@ -17,6 +17,7 @@ import { FormContext } from '../FluidForm';
 import { useFeatureFlag } from '../FeatureFlags';
 import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix';
+import { useAnnouncer } from '../../internal/useAnnouncer';
 
 const TextInput = React.forwardRef(function TextInput(
   {
@@ -186,6 +187,7 @@ const TextInput = React.forwardRef(function TextInput(
   );
 
   const { isFluid } = useContext(FormContext);
+  let ariaAnnouncement = useAnnouncer(textCount, maxCount);
 
   return (
     <div className={inputWrapperClasses}>
@@ -205,6 +207,9 @@ const TextInput = React.forwardRef(function TextInput(
             <normalizedProps.icon className={iconClasses} />
           )}
           {input}
+          <span className={`${prefix}--text-input__counter-alert`} role="alert">
+            {ariaAnnouncement}
+          </span>
           {isFluid && <hr className={`${prefix}--text-input__divider`} />}
           {isFluid && !inline && normalizedProps.validation}
         </div>

packages/react/src/internal/useAnnouncer.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export function useAnnouncer(textCount, maxCount) {
+  const lastTen = maxCount - 10;
+  if (textCount >= lastTen) {
+    return `${maxCount - textCount} characters left.`;
+  }
+}

packages/styles/scss/components/text-input/_text-input.scss

@@ -203,6 +203,17 @@
     }
   }
 
+  .#{$prefix}--text-input__counter-alert {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+  }
+
   //-----------------------------
   // Disabled
   //-----------------------------