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.
This commit is contained in:
Eric Liu 2025-03-22 13:03:52 -07:00
commit 43511e09ec
2 changed files with 2 additions and 3 deletions

View file

@ -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}

View file

@ -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();