fix(List): add aria attributes

src/components/List/List.tsx

@@ -25,9 +25,16 @@ import {block} from '../utils/cn';
 import {getUniqId} from '../utils/common';
 
 import {ListLoadingIndicator} from './ListLoadingIndicator';
-import {ListItem, SimpleContainer, defaultRenderItem} from './components';
+import type {VariableSizeListElementTypeProps} from './components';
+import {
+    ListItem,
+    SimpleContainer,
+    createVariableSizeListElementType,
+    defaultRenderItem,
+} from './components';
 import {listNavigationIgnoredKeys} from './constants';
 import type {ListItemData, ListItemProps, ListProps} from './types';
+import {getElementId} from './utils';
 
 import './List.scss';
 
@@ -60,8 +67,20 @@ const reorder = <T extends unknown>(list: T[], startIndex: number, endIndex: num
     return result;
 };
 
-const ListContainer = React.forwardRef<VariableSizeList, VariableSizeListProps>((props, ref) => {
-    return <VariableSizeList ref={ref} {...props} direction={useDirection()} />;
+const ListContainer = React.forwardRef<
+    VariableSizeList,
+    VariableSizeListProps & VariableSizeListElementTypeProps
+>((props, ref) => {
+    const {role, listId, ...restProps} = props;
+
+    return (
+        <VariableSizeList
+            ref={ref}
+            direction={useDirection()}
+            innerElementType={createVariableSizeListElementType(role, listId)}
+            {...restProps}
+        />
+    );
 });
 ListContainer.displayName = 'ListContainer';
 
@@ -139,15 +158,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     }
 
     render() {
-        const {
-            id,
-            emptyPlaceholder,
-            virtualized,
-            className,
-            itemsClassName,
-            qa,
-            role = 'list',
-        } = this.props;
+        const {id, emptyPlaceholder, virtualized, className, itemsClassName, qa} = this.props;
 
         const {items} = this.state;
 
@@ -170,7 +181,6 @@ 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}
                         >
                             {this.renderItems()}
                             {items.length === 0 && Boolean(emptyPlaceholder) && (
@@ -362,13 +372,23 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                     hasClear={true}
                     onUpdate={this.onFilterUpdate}
                     autoFocus={autoFocus}
+                    controlProps={{
+                        role: 'combobox',
+                        'aria-activedescendant': getElementId(
+                            this.props.id ?? this.uniqId,
+                            this.state.activeItem,
+                        ),
+                        'aria-autocomplete': 'list',
+                        'aria-controls': this.props.id ?? this.uniqId,
+                        'aria-expanded': true,
+                    }}
                 />
             </div>
         );
     }
 
     private renderSimpleContainer() {
-        const {sortable} = this.props;
+        const {sortable, role = 'list'} = this.props;
         const items = this.getItemsWithLoading();
 
         if (sortable) {
@@ -394,6 +414,8 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                                 itemCount={items.length}
                                 provided={droppableProvided}
                                 onScrollToItem={this.props.onScrollToItem}
+                                role={role}
+                                id={this.props.id ?? this.uniqId}
                             >
                                 {items.map((_item, index) => {
                                     return (
@@ -428,6 +450,8 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                 itemCount={items.length}
                 ref={this.refContainer}
                 onScrollToItem={this.props.onScrollToItem}
+                role={role}
+                id={this.props.id ?? this.uniqId}
             >
                 {items.map((_item, index) =>
                     this.renderItem({index, height: this.getItemHeight(index)}),
@@ -437,6 +461,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
     }
 
     private renderVirtualizedContainer() {
+        const {role = 'list'} = this.props;
         // Otherwise, react-window will not update the list items
         const items = [...this.getItemsWithLoading()];
 
@@ -471,6 +496,8 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                                         itemCount={items.length}
                                         overscanCount={10}
                                         onItemsRendered={this.onItemsRendered}
+                                        role={role}
+                                        listId={this.props.id ?? this.uniqId}
                                         // this property used to rerender items in viewport
                                         // must be last, typescript skips checks for all props behind ts-ignore/ts-expect-error
                                         // @ts-expect-error
@@ -498,6 +525,8 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                         itemCount={items.length}
                         overscanCount={10}
                         onItemsRendered={this.onItemsRendered}
+                        role={role}
+                        listId={this.props.id ?? this.uniqId}
                         // this property used to rerender items in viewport
                         // must be last, typescript skips checks for all props behind ts-ignore/ts-expect-error
                         // @ts-expect-error

src/components/List/components/ListItem.tsx

@@ -10,9 +10,12 @@ import {block} from '../../utils/cn';
 import {eventBroker} from '../../utils/event-broker';
 import {ListQa} from '../constants';
 import type {ListItemProps} from '../types';
+import {getElementId} from '../utils';
 
 const b = block('list');
 
+const ROLES_WITH_ARIA_SELECTED = new Set(['option', 'gridcell', 'row', 'tab']);
+
 export const defaultRenderItem = <T extends unknown>(item: T) => String(item);
 
 function getStyle(provided?: DraggableProvided, style?: React.CSSProperties) {
@@ -59,7 +62,7 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div
                 role={role}
-                aria-selected={selected}
+                aria-selected={ROLES_WITH_ARIA_SELECTED.has(role) ? selected : undefined}
                 aria-disabled={item.disabled}
                 data-qa={active ? ListQa.ACTIVE_ITEM : undefined}
                 className={b(
@@ -81,7 +84,7 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
                 onClickCapture={item.disabled ? undefined : this.onClickCapture}
                 onMouseEnter={this.onMouseEnter}
                 ref={this.setRef}
-                id={`${this.props.listId}-item-${this.props.itemIndex}`}
+                id={getElementId(this.props.listId, this.props.itemIndex)}
             >
                 {this.renderSortIcon()}
                 {this.renderContent()}

src/components/List/components/SimpleContainer.tsx

@@ -10,6 +10,8 @@ export type SimpleContainerProps = React.PropsWithChildren<{
     itemCount: number;
     provided?: DroppableProvided;
     onScrollToItem?: (node: HTMLElement) => boolean;
+    role: React.AriaRole;
+    id: string;
 }>;
 
 type RefsList = Record<number, React.RefObject<ListItem>>;
@@ -54,7 +56,11 @@ export class SimpleContainer extends React.Component<SimpleContainerProps, Simpl
             React.cloneElement(child as React.ReactElement, {ref: this.state.refsList[index]}),
         );
 
-        return <div ref={this.setRef}>{children}</div>;
+        return (
+            <div ref={this.setRef} role={this.props.role} id={this.props.id}>
+                {children}
+            </div>
+        );
     }
 
     scrollToItem(index: number) {

src/components/List/components/VariableSizeListElementType.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+
+export interface VariableSizeListElementTypeProps {
+    role: string;
+    listId: string;
+}
+
+export const VariableSizeListElementType = React.forwardRef<
+    HTMLDivElement,
+    VariableSizeListElementTypeProps & React.HTMLAttributes<HTMLDivElement>
+>(({style, role, listId, ...rest}, ref) => (
+    <div ref={ref} style={style} role={role} id={listId} {...rest} />
+));
+
+VariableSizeListElementType.displayName = 'VariableSizeListElementType';
+
+export const createVariableSizeListElementType = (role: string, listId: string) => {
+    const Component = React.forwardRef<HTMLDivElement, VariableSizeListElementTypeProps>(
+        (props, ref) => (
+            <VariableSizeListElementType {...props} role={role} ref={ref} listId={listId} />
+        ),
+    );
+
+    Component.displayName = 'VariableSizeListElementType';
+
+    return Component;
+};

src/components/List/components/index.ts

@@ -1,2 +1,3 @@
 export * from './ListItem';
 export * from './SimpleContainer';
+export * from './VariableSizeListElementType';

src/components/List/utils.ts

@@ -0,0 +1,7 @@
+export function getElementId(id?: string, activeItem?: number) {
+    if (!id || !activeItem) {
+        return undefined;
+    }
+
+    return `${id}-item-${activeItem}`;
+}