fix: select filter a11y (#201)

* fix: select filter a11y * fix: updated filter list a11y * fix: remove peer dependency update
gravity-ui · Aug 8, 2024 · 22aa781 · 22aa781
1 parent ed08069
commit 22aa781
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.9.0",
+    "@gravity-ui/uikit": "^6.22.0",
     "@jest/environment": "^29.7.0",
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addon-mdx-gfm": "^8.0.5",

diff --git a/src/components/FeedHeader/components/Controls/customRenders.tsx b/src/components/FeedHeader/components/Controls/customRenders.tsx
@@ -27,7 +27,7 @@ type RenderSwitcherType = ({
 export const renderSwitcher: RenderSwitcherType =
     ({initial, list, defaultLabel}) =>
     // eslint-disable-next-line react/display-name
-    ({onClick, ref, onKeyDown, open, renderClear}) => (
+    ({onClick, ref, onKeyDown, open, renderClear, popupId, activeIndex}) => (
         <CustomSwitcher
             initial={initial}
             defaultLabel={defaultLabel}
@@ -37,6 +37,8 @@ export const renderSwitcher: RenderSwitcherType =
             onKeyDown={onKeyDown}
             renderClear={renderClear}
             open={open}
+            popupId={popupId}
+            activeIndex={activeIndex}
         />
     );
 

diff --git a/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx b/src/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.tsx
@@ -1,6 +1,6 @@
 import React, {LegacyRef, useMemo} from 'react';
 
-import {Icon, SelectProps} from '@gravity-ui/uikit';
+import {Icon, SelectProps, useUniqId} from '@gravity-ui/uikit';
 
 import {DropdownArrow} from '../../../../icons/DropdownArrow';
 import {Close} from '../../../../icons/Close';
@@ -32,6 +32,8 @@ export const CustomSwitcher = ({
     onKeyDown,
     open,
     renderClear,
+    popupId,
+    activeIndex,
 }: CustomSwitcherProps) => {
     const itemsNames = useMemo(() => {
         const items = list
@@ -42,15 +44,26 @@ export const CustomSwitcher = ({
     }, [defaultLabel, initial, list]);
     const hasCounter = itemsNames.length > 1;
 
+    const contentElementId = useUniqId();
+
     return (
         <div className={b('custom-switcher')} ref={controlRef as LegacyRef<HTMLDivElement>}>
+            {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
             <button
                 onClick={onClick}
                 className={b('custom-switcher-element', {overlay: true})}
                 onKeyDown={onKeyDown}
                 aria-expanded={open}
+                aria-labelledby={contentElementId}
+                aria-activedescendant={
+                    activeIndex === undefined ? undefined : `${popupId}-item-${activeIndex}`
+                }
             />
-            <div className={b('custom-switcher-element', {content: true})}>
+            <div
+                id={contentElementId}
+                className={b('custom-switcher-element', {content: true})}
+                aria-hidden
+            >
                 {itemsNames?.join(', ')}
             </div>
             {renderClear &&