mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(tabs): address a11y issues

Browse source
This commit is contained in:
b-r-i-a-n-w-e-s-t 2025-09-05 09:54:21 -07:00
commit b75e102ffc
2 changed files with 18 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/Tabs/Tab.svelte
View file

@ -32,7 +32,9 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li <li
tabindex="-1" tabindex="-1"
role="presentation" role="tab"
aria-selected={selected}
aria-disabled={disabled}
class:bx--tabs__nav-item={true} class:bx--tabs__nav-item={true}
class:bx--tabs__nav-item--disabled={disabled} class:bx--tabs__nav-item--disabled={disabled}
class:bx--tabs__nav-item--selected={selected} class:bx--tabs__nav-item--selected={selected}
@ -60,10 +62,7 @@
> >
<a <a
bind:this={ref} bind:this={ref}
role="tab"
tabindex={disabled ? "-1" : tabindex} tabindex={disabled ? "-1" : tabindex}
aria-selected={selected}
aria-disabled={disabled}
{id} {id}
{href} {href}
class:bx--tabs__nav-link={true} class:bx--tabs__nav-link={true}

22
tests/Tabs/Tabs.test.ts
View file

@ -136,9 +136,12 @@ describe("Tab", () => {
const tab = screen.getByRole("tab", { name: "Test Tab" }); const tab = screen.getByRole("tab", { name: "Test Tab" });
expect(tab).toBeInTheDocument(); expect(tab).toBeInTheDocument();
expect(tab).toHaveAttribute("href", "#test"); expect(tab).toHaveAttribute("aria-selected", "true");
expect(tab).toHaveAttribute("tabindex", "0");
expect(tab).toHaveAttribute("id", "test-tab"); const link = tab.querySelector("a");
expect(link).toHaveAttribute("href", "#test");
expect(link).toHaveAttribute("tabindex", "0");
expect(link).toHaveAttribute("id", "test-tab");
}); });
it("should render with custom label", () => { it("should render with custom label", () => {
@ -153,7 +156,8 @@ describe("Tab", () => {
render(Tab, { props: { href: "/custom" } }); render(Tab, { props: { href: "/custom" } });
const tab = screen.getByRole("tab"); const tab = screen.getByRole("tab");
expect(tab).toHaveAttribute("href", "/custom"); const link = tab.querySelector("a");
expect(link).toHaveAttribute("href", "/custom");
}); });
it("should handle disabled state", () => { it("should handle disabled state", () => {
@ -161,21 +165,25 @@ describe("Tab", () => {
const tab = screen.getByRole("tab"); const tab = screen.getByRole("tab");
expect(tab).toHaveAttribute("aria-disabled", "true"); expect(tab).toHaveAttribute("aria-disabled", "true");
expect(tab).toHaveAttribute("tabindex", "-1");
const link = tab.querySelector("a");
expect(link).toHaveAttribute("tabindex", "-1");
}); });
it("should handle custom tabindex", () => { it("should handle custom tabindex", () => {
render(Tab, { props: { tabindex: "1" } }); render(Tab, { props: { tabindex: "1" } });
const tab = screen.getByRole("tab"); const tab = screen.getByRole("tab");
expect(tab).toHaveAttribute("tabindex", "1"); const link = tab.querySelector("a");
expect(link).toHaveAttribute("tabindex", "1");
}); });
it("should handle custom id", () => { it("should handle custom id", () => {
render(Tab, { props: { id: "custom-id" } }); render(Tab, { props: { id: "custom-id" } });
const tab = screen.getByRole("tab"); const tab = screen.getByRole("tab");
expect(tab).toHaveAttribute("id", "custom-id"); const link = tab.querySelector("a");
expect(link).toHaveAttribute("id", "custom-id");
}); });
it("should be clickable when enabled", async () => { it("should be clickable when enabled", async () => {