feat(HorizontalScroll): add focusable state to scrollable container (#8785)

* feat(HorizontalScroll): add focusable state to scrollable container

* test: update tabs screens

* test: fix test

* Revert "test: update tabs screens"

This reverts commit aa6af1b.

* fix(HorizontalScroll): revert overflow: hidden delete

Author: EldarMuhamethanov

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e-playground.tsx

@@ -113,3 +113,9 @@ export const HorizontalScrollWithoutHasMousePlayground = ({
     </ConfigProvider>
   );
 };
+
+export const HorizontalScrollWithFocusVisible = (props: ComponentPlaygroundProps) => (
+  <ComponentPlayground {...props}>
+    {(props: HorizontalScrollProps) => <HorizontalScroll {...props}>{items}</HorizontalScroll>}
+  </ComponentPlayground>
+);

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e.tsx

@@ -3,6 +3,7 @@ import { ViewWidth } from '../../lib/adaptivity';
 import {
   HorizontalScrollMobilePlayground,
   HorizontalScrollSmallTabletPlayground,
+  HorizontalScrollWithFocusVisible,
   HorizontalScrollWithHasMousePlayground,
   HorizontalScrollWithoutHasMousePlayground,
 } from './HorizontalScroll.e2e-playground';
@@ -87,3 +88,25 @@ test.describe('HorizontalScroll', () => {
     });
   });
 });
+
+test.describe('HorizontalScroll', () => {
+  test.use({
+    adaptivityProviderProps: {
+      viewWidth: ViewWidth.SMALL_TABLET,
+      hasPointer: true,
+    },
+    onlyForPlatforms: ['android'],
+  });
+
+  test('State: Focus Visible', async ({
+    mount,
+    page,
+    expectScreenshotClippedToContent,
+    componentPlaygroundProps,
+  }) => {
+    await mount(<HorizontalScrollWithFocusVisible {...componentPlaygroundProps} />);
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    await page.keyboard.press('Tab');
+    await expectScreenshotClippedToContent();
+  });
+});

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx

@@ -71,9 +71,18 @@ describe('HorizontalScroll', () => {
   it('disables navigation to arrows by keyboard', async () => {
     jest.useFakeTimers();
 
+    let scrollContainer: HTMLDivElement | null = null;
+
     const result = render(
       <AdaptivityProvider hasPointer>
-        <HorizontalScroll getRef={mockRef} data-testid="horizontal-scroll" showArrows="always">
+        <HorizontalScroll
+          getRef={(e) => {
+            scrollContainer = e;
+            mockRef(e);
+          }}
+          data-testid="horizontal-scroll"
+          showArrows="always"
+        >
           <button
             type="button"
             data-testid="focusable-element"
@@ -88,6 +97,9 @@ describe('HorizontalScroll', () => {
 
     expect(document.activeElement).toBe(document.body);
 
+    await userEvent.tab();
+    expect(document.activeElement).toBe(scrollContainer);
+
     await userEvent.tab();
     expect(document.activeElement).toBe(result.getByTestId('focusable-element'));
 
@@ -236,7 +248,7 @@ describe('HorizontalScroll', () => {
   });
 });
 
-function mockRef(element: HTMLDivElement) {
+function mockRef(element: HTMLDivElement | null) {
   if (!element) {
     return;
   }

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -5,6 +5,8 @@ import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
 import { easeInOutSine } from '../../lib/fx';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
@@ -216,6 +218,11 @@ export const HorizontalScroll = ({
 }: HorizontalScrollProps): React.ReactNode => {
   const [canScrollStart, setCanScrollStart] = React.useState(false);
   const [canScrollEnd, setCanScrollEnd] = React.useState(false);
+  const { focusVisible, ...focusEvents } = useFocusVisible();
+  const focusVisibleClassNames = useFocusVisibleClassName({
+    focusVisible,
+  });
+
   const direction = useConfigDirection();
   const isRtl = direction === 'rtl';
 
@@ -346,7 +353,12 @@ export const HorizontalScroll = ({
           onClick={scrollToEnd}
         />
       )}
-      <div className={styles.in} ref={scrollerRef}>
+      <div
+        className={classNames(styles.in, focusVisibleClassNames)}
+        ref={scrollerRef}
+        tabIndex={0}
+        {...focusEvents}
+      >
         <ContentWrapperComponent
           className={classNames(styles.inWrapper, contentWrapperClassName)}
           ref={contentWrapperRef}