review fixes

src/components/Group/Group.tsx

@@ -77,10 +77,8 @@ const GroupComponent = ({
     );
   }
 
-  let tabIndex = restProps.tabIndex;
-  if (isTabPanel && tabIndex === undefined) {
-    tabIndex = 0;
-  }
+  const tabIndex =
+    isTabPanel && restProps.tabIndex === undefined ? 0 : restProps.tabIndex;
 
   let separatorElement = null;
 

src/components/Tabs/Readme.md

@@ -1,7 +1,10 @@
 ## Доступность
 
-Чтобы скринридеры понимали, каким элементом управляет `TabsItem`, ему нужно задать `id` и сослаться на него в управляемом элементе с помощью `aria-labelledby`.<br />
-Управляемый табом элемент должен содержать параметры `id` и `aria-controls`, ссылающийся на его таб, а также `tabIndex = 0`.
+Для корректной работы скринридеров необходимо вручную передавать некоторые параметры:
+<br />
+
+- В компонент вкладки (`TabsItem`) нужно передать `id` и `aria-controls`, указывающий на id области с его контентом. <br />
+- В область контента необходимо передать параметры `id`, `tabIndex = 0` и `aria-labelledby`, ссылающийся на компонент таба
 
 ```jsx
 const Example = ({ sizeX }) => {

src/components/Tabs/Tabs.test.tsx

@@ -82,10 +82,6 @@ function renderTestTabs(props: ComponentProps<typeof TestTabs> = {}) {
   render(<TestTabs {...props} />);
   screen.getByTestId("first").focus();
   screen.getByTestId("first").click();
-  expect(screen.getByTestId("first").getAttribute("aria-selected")).toEqual(
-    "true"
-  );
-  expect(isTabSelected(screen.getByTestId("first"))).toBeTruthy();
 }
 
 function pressKey(key: string) {
@@ -107,9 +103,6 @@ describe("Tabs", () => {
 
       fireEvent.click(screen.getByTestId("third"));
 
-      expect(screen.getByTestId("third").getAttribute("aria-selected")).toEqual(
-        "true"
-      );
       expect(isTabSelected(screen.getByTestId("third"))).toBeTruthy();
     });
     it("doesn't select disabled element on click", () => {

src/components/Tabs/Tabs.tsx

@@ -46,7 +46,7 @@ const TabsComponent = ({
   const platform = usePlatform();
   const { document } = useDOM();
 
-  const tabsRef = React.useRef<HTMLDivElement | null>();
+  const tabsRef = React.useRef<HTMLDivElement>(null);
 
   if (
     (mode === "buttons" || mode === "segmented") &&
@@ -84,12 +84,12 @@ const TabsComponent = ({
     );
   }
 
-  function onDocumentKeydown(e: KeyboardEvent) {
+  function handleDocumentKeydown(event: KeyboardEvent) {
     if (!document || !tabsRef.current) {
       return;
     }
 
-    const key = pressedKey(e);
+    const key = pressedKey(event);
 
     switch (key) {
       case "ArrowLeft":
@@ -117,7 +117,7 @@ const TabsComponent = ({
         const nextTabEl = tabEls[nextIndex];
 
         if (nextTabEl) {
-          e.preventDefault();
+          event.preventDefault();
           nextTabEl.focus();
         }
 
@@ -148,14 +148,12 @@ const TabsComponent = ({
         }
 
         // eslint-disable-next-line no-restricted-properties
-        const relatedContentEl = document.querySelector(
-          "#" + relatedContentElId
-        ) as HTMLElement;
+        const relatedContentEl = document.getElementById(relatedContentElId);
         if (!relatedContentEl) {
           return;
         }
 
-        e.preventDefault();
+        event.preventDefault();
         relatedContentEl.focus();
 
         break;
@@ -173,7 +171,7 @@ const TabsComponent = ({
     }
   }
 
-  useGlobalEventListener(document, "keydown", onDocumentKeydown, {
+  useGlobalEventListener(document, "keydown", handleDocumentKeydown, {
     capture: true,
   });
 
@@ -191,7 +189,7 @@ const TabsComponent = ({
       )}
       role="tablist"
     >
-      <div vkuiClass="Tabs__in" ref={(el) => (tabsRef.current = el)}>
+      <div vkuiClass="Tabs__in" ref={tabsRef}>
         <TabsModeContext.Provider value={{ mode, withGaps }}>
           {children}
         </TabsModeContext.Provider>