From 43511e09ecf312c1b8e9339856b9d7d0785036de Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 22 Mar 2025 13:03:52 -0700
Subject: [PATCH] fix(text-area): allow visually hidden label (#2137)

This fixes an accessibility issue with `TextArea`.

Currently, if `hideLabel` is `true`, the label is not rendered at all.
The expected behavior is that it should be visually hidden while
still being available to screen readers.
---
 src/TextArea/TextArea.svelte    | 2 +-
 tests/TextArea/TextArea.test.ts | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 5c54aeb5..77f39419 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -71,7 +71,7 @@
   on:mouseleave
   class:bx--form-item={true}
 >
-  {#if (labelText || $$slots.labelText) && !hideLabel}
+  {#if labelText || $$slots.labelText}
     <div class:bx--text-area__label-wrapper={true}>
       <label
         for={id}
diff --git a/tests/TextArea/TextArea.test.ts b/tests/TextArea/TextArea.test.ts
index 6c277595..6bf51ebc 100644
--- a/tests/TextArea/TextArea.test.ts
+++ b/tests/TextArea/TextArea.test.ts
@@ -79,8 +79,7 @@ describe("TextArea", () => {
     );
   });
 
-  // TODO(bug): hidden label should still be rendered.
-  it.skip("should handle hidden label", () => {
+  it("should handle hidden label", () => {
     render(TextArea, { props: { hideLabel: true } });
 
     expect(screen.getByLabelText("App description")).toBeInTheDocument();