mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(text-area): allow visually hidden label (#2137)

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

2
src/TextArea/TextArea.svelte
View file

@ -71,7 +71,7 @@
on:mouseleave on:mouseleave
class:bx--form-item={true} class:bx--form-item={true}
> >
{#if (labelText || $$slots.labelText) && !hideLabel} {#if labelText || $$slots.labelText}
<div class:bx--text-area__label-wrapper={true}> <div class:bx--text-area__label-wrapper={true}>
<label <label
for={id} for={id}

3
tests/TextArea/TextArea.test.ts
View file

@ -79,8 +79,7 @@ describe("TextArea", () => {
); );
}); });
// TODO(bug): hidden label should still be rendered. it("should handle hidden label", () => {
it.skip("should handle hidden label", () => {
render(TextArea, { props: { hideLabel: true } }); render(TextArea, { props: { hideLabel: true } });
expect(screen.getByLabelText("App description")).toBeInTheDocument(); expect(screen.getByLabelText("App description")).toBeInTheDocument();