feat(List): improve a11y

src/components/List/List.scss

@@ -21,6 +21,15 @@ $block: '.#{variables.$ns}list';
         &_virtualized {
             height: var(--yc-list-height);
         }
+
+        &:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px var(--g-color-line-misc);
+        }
+
+        &:focus:not(:focus-visible) {
+            box-shadow: none;
+        }
     }
 
     &__item,
@@ -53,6 +62,10 @@ $block: '.#{variables.$ns}list';
 
         &_selected {
             background: var(--g-color-base-selection);
+
+            &:hover {
+                background: var(--g-color-base-selection-hover);
+            }
         }
 
         &_sort-handle-align_right {
@@ -63,6 +76,15 @@ $block: '.#{variables.$ns}list';
                 margin-right: 0;
             }
         }
+
+        &:focus {
+            outline: none;
+            box-shadow: inset 0 0 0 2px var(--g-color-line-misc);
+        }
+
+        &:focus:not(:focus-visible) {
+            box-shadow: none;
+        }
     }
 
     &__empty-placeholder {

src/components/List/List.tsx

@@ -76,7 +76,6 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
         filter: '',
     };
 
-    refFilter = React.createRef<HTMLInputElement>();
     refContainer = React.createRef<any>();
     blurTimer: ReturnType<typeof setTimeout> | null = null;
     loadingItem = {value: '__LIST_ITEM_LOADING__', disabled: true} as unknown as ListItemData<
@@ -105,13 +104,21 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     }
 
     render() {
-        const {emptyPlaceholder, virtualized, className, itemsClassName, qa} = this.props;
+        const {
+            emptyPlaceholder,
+            virtualized,
+            className,
+            itemsClassName,
+            qa,
+            role = 'list',
+        } = this.props;
 
         const {items} = this.state;
 
         return (
             <MobileContext.Consumer>
                 {({mobile}) => (
+                    // The event handler should only be used to capture bubbled events
                     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                     <div
                         className={b({mobile}, className)}
@@ -126,6 +133,8 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                             className={b('items', {virtualized}, itemsClassName)}
                             style={this.getItemsStyle()}
                             onMouseLeave={this.onMouseLeave}
+                            role={role}
+                            tabIndex={role === 'listbox' ? 0 : undefined}
                         >
                             {this.renderItems()}
                             {items.length === 0 && Boolean(emptyPlaceholder) && (
@@ -201,11 +210,6 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                 }
                 break;
             }
-            default: {
-                if (this.refFilter.current) {
-                    this.refFilter.current.focus();
-                }
-            }
         }
     };
 
@@ -224,12 +228,15 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     };
 
     private renderItem = ({index, style}: {index: number; style?: React.CSSProperties}) => {
-        const {sortHandleAlign} = this.props;
+        const {sortHandleAlign, role} = this.props;
         const {items, activeItem} = this.state;
         const item = this.getItemsWithLoading()[index];
         const sortable = this.props.sortable && items.length > 1 && !this.getFilter();
         const active = index === activeItem || index === this.props.activeItemIndex;
         const Item = sortable ? SortableListItem : ListItem;
+        const selected = Array.isArray(this.props.selectedItemIndex)
+            ? this.props.selectedItemIndex.includes(index)
+            : index === this.props.selectedItemIndex;
 
         return (
             <Item
@@ -243,9 +250,10 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                 renderItem={this.renderItemContent}
                 itemClassName={this.props.itemClassName}
                 active={active}
-                selected={index === this.props.selectedItemIndex}
+                selected={selected}
                 onActivate={this.onItemActivate}
                 onClick={this.props.onItemClick}
+                role={role === 'listbox' ? 'option' : 'listitem'}
             />
         );
     };
@@ -267,7 +275,6 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
         return (
             <div className={b('filter', filterClassName)}>
                 <TextInput
-                    controlRef={this.refFilter}
                     size={size}
                     placeholder={filterPlaceholder}
                     value={filter}

src/components/List/README.md

@@ -251,6 +251,7 @@ Likewise, you can forward `onFocus` and `onBlur` if you need to repeat the behav
 | onItemClick       | Item click handler. `(item: any, index: number, fromKeyboard?: bool) => void`                                                                                                                          | `Function`        |         |
 | deactivateOnLeave | If the flag is set, an item's selection is deactivated once the cursor leaves the item or the list loses its focus. If not set, the last selected item will always be selected.                        | `Boolean`         | true    |
 | activeItemIndex   | If a value is set, an item with this index is rendered as active ~~until the curse is lifted~~.                                                                                                        | `Number`          |         |
-| selectedItemIndex | If a value is set, an item with this index is rendered as selected (the background color is from `--g-color-base-selection`).                                                                          | `Number`          |         |
+| selectedItemIndex | If a value is set, an item with this index is rendered as selected (the background color is from `--g-color-base-selection`).                                                                          | `Number/Array`    |         |
 | itemClassName     | Custom class name to be added to an item container                                                                                                                                                     | `String`          |         |
 | itemsClassName    | Custom class name to be added to an item list                                                                                                                                                          | `String`          |         |
+| role              | HTML `role` attribute                                                                                                                                                                                  | `String`          | list    |

src/components/List/components/ListItem.tsx

@@ -17,13 +17,24 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
     ref = React.createRef<HTMLDivElement>();
 
     render() {
-        const {item, style, sortable, sortHandleAlign, itemClassName, selected, active} =
-            this.props;
+        const {
+            item,
+            style,
+            sortable,
+            sortHandleAlign,
+            itemClassName,
+            selected,
+            active,
+            role = 'listitem',
+        } = this.props;
 
         return (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div
-                role="listitem"
+                role={role}
+                tabIndex={
+                    (this.props.onClick || role === 'option') && !item.disabled ? 0 : undefined
+                }
+                aria-selected={selected}
                 data-qa={active ? ListQa.ACTIVE_ITEM : undefined}
                 className={b(
                     'item',
@@ -39,8 +50,11 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
                 style={style}
                 onClick={item.disabled ? undefined : this.onClick}
                 onClickCapture={item.disabled ? undefined : this.onClickCapture}
+                onKeyDown={item.disabled ? undefined : this.onKeyDown}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}
+                onFocus={this.onMouseEnter}
+                onBlur={this.onMouseLeave}
                 ref={this.ref}
             >
                 {this.renderSortIcon()}
@@ -74,6 +88,12 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
         });
     };
 
+    private onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (this.props.onClick && [' ', 'Spacebar'].includes(event.key)) {
+            this.onClick();
+        }
+    };
+
     private onMouseEnter = () =>
         !this.props.item.disabled && this.props.onActivate(this.props.itemIndex);
 

src/components/List/components/SimpleContainer.tsx

@@ -51,6 +51,7 @@ export class SimpleContainer extends React.Component<SimpleContainerProps, Simpl
                 ref.current.scrollIntoView?.({
                     block: 'nearest',
                 });
+                ref.current.focus();
             }
         }
     }

src/components/List/types.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {TextInputSize} from '../controls';
 import type {QAProps} from '../types';
 
@@ -17,7 +19,7 @@ export type ListProps<T = unknown> = QAProps & {
     filterPlaceholder?: string;
     filter?: string;
     activeItemIndex?: number;
-    selectedItemIndex?: number;
+    selectedItemIndex?: number | number[];
     itemHeight?: number | ((item: ListItemData<T>, itemIndex: number) => number);
     itemsHeight?: number | ((items: T[]) => number);
     virtualized?: boolean;
@@ -37,6 +39,7 @@ export type ListProps<T = unknown> = QAProps & {
     onFilterEnd?: ({items}: {items: ListItemData<T>[]}) => void;
     onSortEnd?: (params: ListSortParams) => void;
     autoFocus?: boolean;
+    role?: React.AriaRole;
     loading?: boolean;
     onLoadMore?: () => void;
 };
@@ -53,4 +56,5 @@ export type ListItemProps<T> = {
     onActivate: (index?: number) => void;
     renderItem?: ListProps<T>['renderItem'];
     onClick?: ListProps<T>['onItemClick'];
+    role?: React.AriaRole;
 };

src/components/Select/__tests__/Select.filter.test.tsx

@@ -50,13 +50,13 @@ describe('Select filter', () => {
         expect(getByPlaceholderText(FILTER_PLACEHOLDER)).toHaveFocus();
         await user.keyboard('1');
         // 1, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 21, 31
-        expect(getAllByRole('listitem').length).toBe(13);
+        expect(getAllByRole('option').length).toBe(13);
         await user.keyboard('1');
         // 11
-        expect(getAllByRole('listitem').length).toBe(1);
+        expect(getAllByRole('option').length).toBe(1);
         await user.keyboard('1');
         // empty
-        expect(queryAllByRole('listitem').length).toBe(0);
+        expect(queryAllByRole('option').length).toBe(0);
         expect(onFilterChange).toBeCalledTimes(3);
     });
 
@@ -70,7 +70,7 @@ describe('Select filter', () => {
         const selectControl = getByTestId(TEST_QA);
         await user.click(selectControl);
         await user.keyboard('z');
-        expect(queryAllByRole('listitem').length).toBe(0);
+        expect(queryAllByRole('option').length).toBe(0);
         getByTestId(EMPTY_OPTIONS_QA);
     });
 
@@ -85,7 +85,7 @@ describe('Select filter', () => {
         await user.click(selectControl);
         await user.keyboard('[a][b][c][1][2]');
         // filter shouldn`t work due to initialized filterOption
-        expect(queryAllByRole('listitem').length).toBe(40);
+        expect(queryAllByRole('option').length).toBe(40);
     });
 
     test('should filter options even if filter text is empty', async () => {
@@ -100,6 +100,6 @@ describe('Select filter', () => {
         await user.click(selectControl);
         expect(filterOption).toHaveBeenCalled();
         // 10, 20, 30, 40
-        expect(queryAllByRole('listitem').length).toBe(4);
+        expect(queryAllByRole('option').length).toBe(4);
     });
 });

src/components/Select/components/SelectList/SelectList.tsx

@@ -51,6 +51,17 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
         [flattenOptions, loading],
     );
 
+    const selectedIndexes = React.useMemo(
+        () =>
+            flattenOptions.reduce<number[]>((acc, option, index) => {
+                if ('value' in option && value.includes(option.value)) {
+                    acc.push(index);
+                }
+                return acc;
+            }, []),
+        [flattenOptions, value],
+    );
+
     const optionsHeight = getOptionsHeight({
         options: items,
         getOptionHeight,
@@ -127,6 +138,8 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
             virtualized={virtualized}
             renderItem={renderItem}
             onItemClick={onOptionClick}
+            selectedItemIndex={selectedIndexes}
+            role="listbox"
         />
     );
 });

src/components/Select/components/SelectPopup/SelectPopup.tsx

@@ -46,6 +46,7 @@ export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
                 open={open}
                 onClose={handleClose}
                 disablePortal={disablePortal}
+                focusTrap
                 restoreFocus
                 restoreFocusRef={controlRef}
                 modifiers={getModifiers({width, disablePortal, virtualized})}