fix: fixed hideLabel to properly implement visually-hidden (#19399)

Author: maradwan26

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

@@ -19,6 +19,7 @@
 @use '../../utilities/placeholder-colors' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/layout';
+@use '../../utilities/visually-hidden' as *;
 
 /// Text area styles
 /// @access public

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

@@ -25,6 +25,7 @@
 @use '../../utilities/layout';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/button-reset';
+@use '../../utilities/visually-hidden' as *;
 
 /// Text input styles
 /// @access public

packages/web-components/src/components/text-input/text-input.ts

@@ -441,13 +441,8 @@ class CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {
           </label>`
         : null;
 
-    const labelText =
-      label && !hideLabel
-        ? html`<label class="${labelClasses}"> ${label} </label>`
-        : null;
-
     const labelWrapper = html`<div class="${prefix}--text-input__label-wrapper">
-      ${labelText} ${counter}
+      <label class="${labelClasses}"> ${label} </label> ${counter}
     </div>`;
 
     const helper = helperText

packages/web-components/src/components/textarea/textarea.ts

@@ -101,6 +101,12 @@ class CDSTextarea extends CDSTextInput {
     });
 
     const labelClasses = classMap({
+      [`${prefix}--label`]: true,
+      [`${prefix}--visually-hidden`]: this.hideLabel,
+      [`${prefix}--label--disabled`]: this.disabled,
+    });
+
+    const counterClasses = classMap({
       [`${prefix}--label`]: true,
       [`${prefix}--label--disabled`]: this.disabled,
     });
@@ -112,7 +118,7 @@ class CDSTextarea extends CDSTextInput {
 
     const counter =
       enableCounter && maxCount
-        ? html` <label class="${labelClasses}">
+        ? html` <label class="${counterClasses}">
             <slot name="label-text">${textCount}/${maxCount}</slot>
           </label>`
         : null;
@@ -128,13 +134,9 @@ class CDSTextarea extends CDSTextInput {
 
     return html`
       <div class="${prefix}--text-area__label-wrapper">
-        ${this.hideLabel
-          ? html``
-          : html`
-              <label class="${labelClasses}" for="input">
-                <slot name="label-text"> ${this.label} </slot>
-              </label>
-            `}
+        <label class="${labelClasses}" for="input">
+          <slot name="label-text"> ${this.label} </slot>
+        </label>
         ${counter}
       </div>
       <div class="${textareaWrapperClasses}" ?data-invalid="${this.invalid}">