archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(tabs): improve tab accessibility (#1172)

Browse Source
This commit is contained in:
Ryo Matsukawa 2023-06-22 10:54:39 +09:00 committed by GitHub
parent 4c61bff868
commit 73ce35a1b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/components/tabs/__tests__/tabs.test.tsx
View File

@ -84,21 +84,21 @@ describe("Tabs", () => {
test("should select the correct tab with keyboard navigation", async () => { test("should select the correct tab with keyboard navigation", async () => {
const wrapper = render( const wrapper = render(
<Tabs aria-label="Tabs static test"> <Tabs aria-label="Tabs static test">
<Tab key="item1" data-testid="item1" title="Item 1"> <Tab key="item1" title="Item 1">
<div>Content 1</div> <div>Content 1</div>
</Tab> </Tab>
<Tab key="item2" data-testid="item2" title="Item 2"> <Tab key="item2" title="Item 2">
<div>Content 2</div> <div>Content 2</div>
</Tab> </Tab>
<Tab key="item3" data-testid="item3" title="Item 3"> <Tab key="item3" title="Item 3">
<div>Content 3</div> <div>Content 3</div>
</Tab> </Tab>
</Tabs>, </Tabs>,
); );
const tab1 = wrapper.getByTestId("item1"); const tab1 = wrapper.getByRole("tab", {name: "Item 1"});
const tab2 = wrapper.getByTestId("item2"); const tab2 = wrapper.getByRole("tab", {name: "Item 2"});
const tab3 = wrapper.getByTestId("item3"); const tab3 = wrapper.getByRole("tab", {name: "Item 3"});
expect(tab1).toHaveAttribute("aria-selected", "true"); expect(tab1).toHaveAttribute("aria-selected", "true");
expect(tab2).toHaveAttribute("aria-selected", "false"); expect(tab2).toHaveAttribute("aria-selected", "false");

6
packages/components/tabs/src/tab.tsx
View File

@ -13,7 +13,7 @@ import {useIsMounted} from "@nextui-org/use-is-mounted";
import {useTabsContext} from "./tabs-context"; import {useTabsContext} from "./tabs-context";
export interface TabItemProps<T = object> extends HTMLNextUIProps<"div"> { export interface TabItemProps<T = object> extends HTMLNextUIProps<"button"> {
/** /**
* The tab item. * The tab item.
*/ */
@ -23,14 +23,14 @@ export interface TabItemProps<T = object> extends HTMLNextUIProps<"div"> {
/** /**
* @internal * @internal
*/ */
const Tab = forwardRef<TabItemProps, "div">((props, ref) => { const Tab = forwardRef<TabItemProps, "button">((props, ref) => {
const {className, as, item, style, onClick, ...otherProps} = props; const {className, as, item, style, onClick, ...otherProps} = props;
const {key} = item; const {key} = item;
const domRef = useDOMRef(ref); const domRef = useDOMRef(ref);
const Component = as || "div"; const Component = as || "button";
const { const {
slots, slots,