[select] fix: ARIA listbox popup type and combobox list role

packages/popover2/src/index.ts

@@ -36,5 +36,6 @@ export {
     StrictModifierNames,
 } from "./popover2SharedProps";
 export { IPopover2Props, Popover2Props, Popover2, Popover2InteractionKind } from "./popover2";
+export { PopupKind } from "./popupKind";
 export { ResizeSensor2, ResizeSensor2Props } from "./resizeSensor2";
 export { ITooltip2Props, Tooltip2Props, Tooltip2 } from "./tooltip2";

packages/select/src/components/multi-select/multiSelect2.tsx

@@ -28,20 +28,29 @@ import {
     TagInputAddMethod,
     TagInputProps,
 } from "@blueprintjs/core";
-import { Popover2 } from "@blueprintjs/popover2";
+import { Popover2, PopupKind } from "@blueprintjs/popover2";
 
 import { Classes, IListItemsProps, SelectPopoverProps } from "../../common";
-import { IQueryListRendererProps, QueryList } from "../query-list/queryList";
+import { IQueryListRendererProps, QueryList, QueryListProps } from "../query-list/queryList";
 
 // N.B. selectedItems should really be a required prop, but is left optional for backwards compatibility
 
-export interface MultiSelect2Props<T> extends IListItemsProps<T>, SelectPopoverProps {
+export interface MultiSelect2Props<T>
+    extends IListItemsProps<T>,
+        Pick<QueryListProps<T>, "menuProps">,
+        SelectPopoverProps {
     /**
      * Whether the component should take up the full width of its container.
      * This overrides `popoverProps.fill` and `tagInputProps.fill`.
      */
     fill?: boolean;
 
+    /**
+     * Adds `id={listboxId}` to the list Menu and `aria-controls={listboxId}` to the
+     * combobox element that opens it
+     */
+    listboxId?: string;
+
     /**
      * Callback invoked when an item is removed from the selection by
      * removing its tag in the TagInput. This is generally more useful than
@@ -73,6 +82,11 @@ export interface MultiSelect2Props<T> extends IListItemsProps<T>, SelectPopoverP
      */
     placeholder?: string;
 
+    /**
+     * Props to add to the `div` that wraps the TagInput
+     */
+    popoverTargetProps?: React.HTMLAttributes<HTMLDivElement>;
+
     /** Controlled selected values. */
     selectedItems?: T[];
 
@@ -130,11 +144,17 @@ export class MultiSelect2<T> extends AbstractPureComponent2<MultiSelect2Props<T>
 
     public render() {
         // omit props specific to this component, spread the rest.
-        const { openOnKeyDown, popoverProps, tagInputProps, ...restProps } = this.props;
+        const { listboxId, openOnKeyDown, popoverProps, tagInputProps, ...restProps } = this.props;
+
+        const queryListMenuProps = {
+            id: listboxId,
+            ...(restProps.menuProps ?? {}),
+        };
 
         return (
             <this.TypedQueryList
                 {...restProps}
+                menuProps={queryListMenuProps}
                 onItemSelect={this.handleItemSelect}
                 onQueryChange={this.handleQueryChange}
                 ref={this.refHandlers.queryList}
@@ -146,12 +166,14 @@ export class MultiSelect2<T> extends AbstractPureComponent2<MultiSelect2Props<T>
     private renderQueryList = (listProps: IQueryListRendererProps<T>) => {
         const {
             fill,
+            listboxId,
             tagInputProps = {},
             popoverContentProps = {},
             popoverProps = {},
             popoverRef,
             selectedItems = [],
             placeholder,
+            popoverTargetProps = {},
         } = this.props;
         const { handlePaste, handleKeyDown, handleKeyUp } = listProps;
 
@@ -190,15 +212,20 @@ export class MultiSelect2<T> extends AbstractPureComponent2<MultiSelect2Props<T>
                 onInteraction={this.handlePopoverInteraction}
                 onOpened={this.handlePopoverOpened}
                 popoverClassName={classNames(Classes.MULTISELECT_POPOVER, popoverProps.popoverClassName)}
+                popupKind={PopupKind.LISTBOX}
                 ref={
                     popoverRef === undefined
                         ? this.refHandlers.popover
                         : mergeRefs(this.refHandlers.popover, popoverRef)
                 }
             >
                 <div
+                    aria-controls={listboxId}
+                    {...popoverTargetProps}
+                    aria-expanded={this.state.isOpen}
                     onKeyDown={this.getTagInputKeyDownHandler(handleKeyDown)}
                     onKeyUp={this.getTagInputKeyUpHandler(handleKeyUp)}
+                    role="combobox"
                 >
                     <TagInput
                         placeholder={placeholder}

packages/select/src/components/query-list/queryList.tsx

@@ -40,6 +40,11 @@ export interface IQueryListProps<T> extends IListItemsProps<T> {
      */
     initialActiveItem?: T;
 
+    /**
+     * Additional props to apply to the `Menu` that is created within the `QueryList`
+     */
+    menuProps?: React.HTMLAttributes<HTMLUListElement>;
+
     /**
      * Callback invoked when user presses a key, after processing `QueryList`'s own key events
      * (up/down to navigate active item). This callback is passed to `renderer` and (along with
@@ -343,7 +348,7 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
 
     /** default `itemListRenderer` implementation */
     private renderItemList = (listProps: IItemListRendererProps<T>) => {
-        const { initialContent, noResults } = this.props;
+        const { initialContent, noResults, menuProps } = this.props;
 
         // omit noResults if createNewItemFromQuery and createNewItemRenderer are both supplied, and query is not empty
         const createItemView = listProps.renderCreateItem();
@@ -354,7 +359,7 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
         }
         const createFirst = this.isCreateItemFirst();
         return (
-            <Menu ulRef={listProps.itemsParentRef}>
+            <Menu role="listbox" {...menuProps} ulRef={listProps.itemsParentRef}>
                 {createFirst && createItemView}
                 {menuContent}
                 {!createFirst && createItemView}

packages/select/src/components/select/select2.tsx

@@ -31,12 +31,12 @@ import {
     refHandler,
     setRef,
 } from "@blueprintjs/core";
-import { Popover2 } from "@blueprintjs/popover2";
+import { Popover2, PopupKind } from "@blueprintjs/popover2";
 
 import { Classes, IListItemsProps, SelectPopoverProps } from "../../common";
-import { IQueryListRendererProps, QueryList } from "../query-list/queryList";
+import { IQueryListRendererProps, QueryList, QueryListProps } from "../query-list/queryList";
 
-export interface Select2Props<T> extends IListItemsProps<T>, SelectPopoverProps {
+export interface Select2Props<T> extends IListItemsProps<T>, Pick<QueryListProps<T>, "menuProps">, SelectPopoverProps {
     children?: React.ReactNode;
 
     /**
@@ -70,6 +70,17 @@ export interface Select2Props<T> extends IListItemsProps<T>, SelectPopoverProps
      */
     inputProps?: InputGroupProps2;
 
+    /**
+     * Adds `id={listboxId}` to the list Menu and `aria-controls={listboxId}` to the
+     * combobox element that opens it
+     */
+    listboxId?: string;
+
+    /**
+     * Props to add to the popover target wrapper element.
+     */
+    popoverTargetProps?: React.HTMLAttributes<HTMLDivElement>;
+
     /**
      * Whether the active item should be reset to the first matching item _when
      * the popover closes_. The query will also be reset to the empty string.
@@ -106,11 +117,17 @@ export class Select2<T> extends AbstractPureComponent2<Select2Props<T>, Select2S
 
     public render() {
         // omit props specific to this component, spread the rest.
-        const { filterable, inputProps, popoverProps, ...restProps } = this.props;
+        const { filterable, inputProps, listboxId, popoverProps, ...restProps } = this.props;
+
+        const queryListMenuProps = {
+            id: listboxId,
+            ...(restProps.menuProps ?? {}),
+        };
 
         return (
             <this.TypedQueryList
                 {...restProps}
+                menuProps={queryListMenuProps}
                 onItemSelect={this.handleItemSelect}
                 ref={this.handleQueryListRef}
                 renderer={this.renderQueryList}
@@ -137,8 +154,10 @@ export class Select2<T> extends AbstractPureComponent2<Select2Props<T>, Select2S
             filterable = true,
             disabled = false,
             inputProps = {},
+            listboxId,
             popoverContentProps = {},
             popoverProps = {},
+            popoverTargetProps = {},
             popoverRef,
         } = this.props;
 
@@ -179,11 +198,16 @@ export class Select2<T> extends AbstractPureComponent2<Select2Props<T>, Select2S
                 onOpened={this.handlePopoverOpened}
                 onOpening={this.handlePopoverOpening}
                 popoverClassName={classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName)}
+                popupKind={PopupKind.LISTBOX}
                 ref={popoverRef}
             >
                 <div
+                    aria-controls={listboxId}
+                    {...popoverTargetProps}
+                    aria-expanded={this.state.isOpen}
                     onKeyDown={this.state.isOpen ? handleKeyDown : this.handleTargetKeyDown}
                     onKeyUp={this.state.isOpen ? handleKeyUp : undefined}
+                    role="combobox"
                 >
                     {this.props.children}
                 </div>

packages/select/src/components/suggest/suggest2.tsx

@@ -30,12 +30,12 @@ import {
     refHandler,
     setRef,
 } from "@blueprintjs/core";
-import { Popover2 } from "@blueprintjs/popover2";
+import { Popover2, PopupKind } from "@blueprintjs/popover2";
 
 import { Classes, IListItemsProps, SelectPopoverProps } from "../../common";
-import { IQueryListRendererProps, QueryList } from "../query-list/queryList";
+import { IQueryListRendererProps, QueryList, QueryListProps } from "../query-list/queryList";
 
-export interface Suggest2Props<T> extends IListItemsProps<T>, SelectPopoverProps {
+export interface Suggest2Props<T> extends IListItemsProps<T>, Pick<QueryListProps<T>, "menuProps">, SelectPopoverProps {
     /**
      * Whether the popover should close after selecting an item.
      *
@@ -68,6 +68,12 @@ export interface Suggest2Props<T> extends IListItemsProps<T>, SelectPopoverProps
      */
     defaultSelectedItem?: T;
 
+    /**
+     * Adds `id={listboxId}` to the list Menu and `aria-controls={listboxId}` to the
+     * combobox element that opens it
+     */
+    listboxId?: string;
+
     /**
      * The currently selected item, or `null` to indicate that no item is selected.
      * If omitted or `undefined`, this prop will be uncontrolled (managed by the component's state).
@@ -131,10 +137,17 @@ export class Suggest2<T> extends AbstractPureComponent2<Suggest2Props<T>, Sugges
 
     public render() {
         // omit props specific to this component, spread the rest.
-        const { disabled, inputProps, popoverProps, ...restProps } = this.props;
+        const { disabled, inputProps, listboxId, popoverProps, ...restProps } = this.props;
+
+        const queryListMenuProps = {
+            id: listboxId,
+            ...(restProps.menuProps ?? {}),
+        };
+
         return (
             <this.TypedQueryList
                 {...restProps}
+                menuProps={queryListMenuProps}
                 initialActiveItem={this.props.selectedItem ?? undefined}
                 onItemSelect={this.handleItemSelect}
                 ref={this.handleQueryListRef}
@@ -169,7 +182,14 @@ export class Suggest2<T> extends AbstractPureComponent2<Suggest2Props<T>, Sugges
     }
 
     private renderQueryList = (listProps: IQueryListRendererProps<T>) => {
-        const { fill, inputProps = {}, popoverContentProps = {}, popoverProps = {}, popoverRef } = this.props;
+        const {
+            fill,
+            inputProps = {},
+            listboxId,
+            popoverContentProps = {},
+            popoverProps = {},
+            popoverRef,
+        } = this.props;
         const { isOpen, selectedItem } = this.state;
         const { handleKeyDown, handleKeyUp } = listProps;
         const { autoComplete = "off", placeholder = "Search..." } = inputProps;
@@ -206,18 +226,24 @@ export class Suggest2<T> extends AbstractPureComponent2<Suggest2Props<T>, Sugges
                 onOpened={this.handlePopoverOpened}
                 onOpening={this.handlePopoverOpening}
                 popoverClassName={classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName)}
+                popupKind={PopupKind.LISTBOX}
                 ref={popoverRef}
             >
                 <InputGroup
                     autoComplete={autoComplete}
                     disabled={this.props.disabled}
+                    aria-controls={listboxId}
                     {...inputProps}
+                    aria-autocomplete="list"
+                    aria-expanded={this.state.isOpen}
                     inputRef={this.handleInputRef}
                     onChange={listProps.handleQueryChange}
                     onFocus={this.handleInputFocus}
                     onKeyDown={this.getTargetKeyDownHandler(handleKeyDown)}
                     onKeyUp={this.getTargetKeyUpHandler(handleKeyUp)}
                     placeholder={inputPlaceholder}
+                    role="combobox"
+                    type="text"
                     value={inputValue}
                 />
             </Popover2>