diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 45aeac7f60..5852e10eb5 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -46,6 +46,9 @@ const TabsComponent = ({ const platform = usePlatform(); const { document } = useDOM(); + const role = restProps.role || "tablist"; + const isTabFlow = role === "tablist"; + const tabsRef = React.useRef(null); if ( @@ -85,7 +88,7 @@ const TabsComponent = ({ } function handleDocumentKeydown(event: KeyboardEvent) { - if (!document || !tabsRef.current) { + if (!document || !tabsRef.current || !isTabFlow) { return; } @@ -187,7 +190,7 @@ const TabsComponent = ({ // TODO v5.0.0 новая адаптивность `Tabs--sizeX-${sizeX}` )} - role="tablist" + role={role} >
diff --git a/src/components/TabsItem/TabsItem.tsx b/src/components/TabsItem/TabsItem.tsx index bf6d26e53c..4af010d551 100644 --- a/src/components/TabsItem/TabsItem.tsx +++ b/src/components/TabsItem/TabsItem.tsx @@ -55,6 +55,9 @@ export const TabsItem = ({ React.useContext(TabsModeContext); let statusComponent = null; + const role = restProps.role || "tab"; + const isTabFlow = role === "tab"; + if (status) { statusComponent = typeof status === "number" ? ( @@ -70,13 +73,20 @@ export const TabsItem = ({ ); } - if (process.env.NODE_ENV === "development" && !restProps["aria-controls"]) { - warn(`Передайте в "aria-controls" id контролируемого блока`, "warn"); - } else if (process.env.NODE_ENV === "development" && !restProps["id"]) { - warn( - `Передайте "id" компоненту для использования в "aria-labelledby" контролируемого блока`, - "warn" - ); + if (process.env.NODE_ENV === "development" && isTabFlow) { + if (!restProps["aria-controls"]) { + warn(`Передайте в "aria-controls" id контролируемого блока`, "warn"); + } else if (!restProps["id"]) { + warn( + `Передайте "id" компоненту для использования в "aria-labelledby" контролируемого блока`, + "warn" + ); + } + } + + let tabIndex: React.HTMLAttributes["tabIndex"] = undefined; + if (isTabFlow) { + tabIndex = selected ? 0 : -1; } return ( @@ -95,9 +105,9 @@ export const TabsItem = ({ activeMode="TabsItem--active" focusVisibleMode={mode === "segmented" ? "outside" : "inside"} hasActive={mode === "segmented"} - role="tab" + role={restProps.role || "tab"} aria-selected={selected} - tabIndex={selected ? 0 : -1} + tabIndex={tabIndex} > {before &&
{before}
}