disable tabflow if tab has different role

VKCOM · Oct 6, 2022 · 5678888 · 5678888
1 parent 7f20265
commit 5678888
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git 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<HTMLDivElement>(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}
     >
       <div vkuiClass="Tabs__in" ref={tabsRef}>
         <TabsModeContext.Provider value={{ mode, withGaps }}>

diff --git 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<HTMLElement>["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 && <div vkuiClass="TabsItem__before">{before}</div>}
       <Headline