fix(select): connect combobox to listbox

gravity-ui · Jun 18, 2024 · 8cf1106 · 8cf1106
1 parent 38fe431
commit 8cf1106
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -133,6 +133,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
 
     render() {
         const {
+            id,
             emptyPlaceholder,
             virtualized,
             className,
@@ -158,6 +159,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                     >
                         {this.renderFilter()}
                         <div
+                            id={id}
                             className={b('items', {virtualized}, itemsClassName)}
                             style={this.getItemsStyle()}
                             onMouseLeave={this.onMouseLeave}

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -315,7 +315,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                     getOptionGroupHeight={getOptionGroupHeight}
                     loading={props.loading}
                     onLoadMore={props.onLoadMore}
-                    selectId={selectId}
+                    id={popupId}
                     onChangeActive={setActiveIndex}
                 />
             );
@@ -368,7 +368,6 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                 disablePortal={disablePortal}
                 virtualized={virtualized}
                 mobile={mobile}
-                id={popupId}
                 placement={popupPlacement}
             >
                 {renderPopup({renderFilter: _renderFilter, renderList: _renderList})}

diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -181,9 +181,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                     aria-haspopup="listbox"
                     aria-expanded={open}
                     aria-activedescendant={
-                        activeIndex === undefined
-                            ? undefined
-                            : `${selectId}-list-item-${activeIndex}`
+                        activeIndex === undefined ? undefined : `${popupId}-item-${activeIndex}`
                     }
                     disabled={disabled}
                     onClick={handleControlClick}

diff --git a/src/components/Select/components/SelectList/SelectList.tsx b/src/components/Select/components/SelectList/SelectList.tsx
@@ -28,7 +28,7 @@ type SelectListProps = {
     virtualized?: boolean;
     loading?: boolean;
     onLoadMore?: () => void;
-    selectId: string;
+    id: string;
     onChangeActive: (index?: number) => void;
 };
 
@@ -49,7 +49,7 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
         mobile,
         loading,
         onLoadMore,
-        selectId,
+        id,
         onChangeActive,
     } = props;
     const items = React.useMemo(
@@ -145,7 +145,7 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
             renderItem={renderItem}
             onItemClick={onOptionClick}
             selectedItemIndex={selectedIndexes}
-            id={`${selectId}-list`}
+            id={id}
             role="listbox"
             onChangeActive={onChangeActive}
         />