feat: blog filters a11y (#224)

Author: PahaN47

package-lock.json

@@ -79,7 +79,7 @@
   "peerDependencies": {
     "@diplodoc/transform": "^4.10.7",
     "@gravity-ui/page-constructor": "^5.0.0",
-    "@gravity-ui/uikit": "^6.1.1",
+    "@gravity-ui/uikit": "^6.26.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -93,7 +93,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.22.0",
+    "@gravity-ui/uikit": "^6.26.0",
     "@jest/environment": "^29.7.0",
     "@playwright/experimental-ct-react": "^1.45.3",
     "@playwright/test": "^1.45.3",

package.json

@@ -24,33 +24,41 @@ type RenderSwitcherType = ({
     defaultLabel: string;
 }) => SelectProps['renderControl'];
 
+type RenderFilterType = SelectProps['renderFilter'];
+
 export const renderSwitcher: RenderSwitcherType =
     ({initial, list, defaultLabel}) =>
     // eslint-disable-next-line react/display-name
-    ({onClick, ref, onKeyDown, open, renderClear, popupId, activeIndex}) => (
+    ({ref, renderClear, triggerProps: {id, disabled, type, onClick, onKeyDown, ...a11yProps}}) => (
         <CustomSwitcher
+            id={id}
+            disabled={disabled}
+            type={type}
             initial={initial}
             defaultLabel={defaultLabel}
             list={list}
             controlRef={ref}
             onClick={onClick}
             onKeyDown={onKeyDown}
             renderClear={renderClear}
-            open={open}
-            popupId={popupId}
-            activeIndex={activeIndex}
+            a11yProps={a11yProps}
         />
     );
 
-export const renderFilter: SelectProps['renderFilter'] = ({value, onChange, onKeyDown}) => (
+export const renderFilter: RenderFilterType = ({
+    ref,
+    onChange,
+    inputProps: {value, onKeyDown, onChange: _, size: __, placeholder: ___, ...a11yProps},
+}) => (
     <TextInput
-        controlProps={{size: 1}}
         value={value}
         view="clear"
         placeholder={i18n(Keyset.Search)}
         onUpdate={onChange}
         onKeyDown={onKeyDown}
         className={b('popup-filter')}
+        controlRef={ref}
+        controlProps={{size: 1, ...a11yProps}}
     />
 );
 

src/components/FeedHeader/components/Controls/customRenders.tsx

@@ -12,28 +12,38 @@ import './CustomSwitcher.scss';
 const b = block('feed-custom-switcher');
 
 type RenderControlParameters = Partial<Parameters<Required<SelectProps>['renderControl']>[0]>;
+type TriggerProps = Required<RenderControlParameters>['triggerProps'];
+
+type A11yKeys = {
+    [K in keyof TriggerProps]-?: K extends `aria-${string}` | 'role' ? K : never;
+}[keyof TriggerProps];
+
+type RenderControlA11yProps = Pick<TriggerProps, A11yKeys>;
 
 export type CustomSwitcherProps = {
     initial: (string | number | null)[];
     defaultLabel: string;
     list: SelectItem[];
     controlRef: RenderControlParameters['ref'];
-} & Omit<RenderControlParameters, 'ref'>;
+    a11yProps: RenderControlA11yProps;
+} & Omit<RenderControlParameters, 'ref'> &
+    Pick<TriggerProps, 'id' | 'disabled' | 'type'>;
 
 const ICON_SIZE = 12;
 const CLEAR_ICON_SIZE = 11;
 
 export const CustomSwitcher = ({
+    id,
+    disabled,
+    type,
     initial,
     defaultLabel,
     list,
     onClick,
     controlRef,
     onKeyDown,
-    open,
     renderClear,
-    popupId,
-    activeIndex,
+    a11yProps,
 }: CustomSwitcherProps) => {
     const itemsNames = useMemo(() => {
         const items = list
@@ -50,14 +60,14 @@ export const CustomSwitcher = ({
         <div className={b('custom-switcher')} ref={controlRef as LegacyRef<HTMLDivElement>}>
             {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
             <button
+                id={id}
+                disabled={disabled}
+                type={type}
                 onClick={onClick}
                 className={b('custom-switcher-element', {overlay: true})}
                 onKeyDown={onKeyDown}
-                aria-expanded={open}
+                {...a11yProps}
                 aria-labelledby={contentElementId}
-                aria-activedescendant={
-                    activeIndex === undefined ? undefined : `${popupId}-item-${activeIndex}`
-                }
             />
             <div
                 id={contentElementId}