@khanacademy/wonder-blocks-dropdown 2.7.0 → 2.7.3

package/src/components/__tests__/dropdown-core.test.js

@@ -31,6 +31,19 @@ const items = [
     },
 ];
 
+const searchFieldItem = {
+    component: (
+        <SearchTextInput
+            testId="search-text-input"
+            key="search-text-input"
+            onChange={jest.fn()}
+            searchText={""}
+        />
+    ),
+    focusable: true,
+    populatedProps: {},
+};
+
 describe("DropdownCore", () => {
     it("should throw for invalid role", () => {
         // Arrange
@@ -342,18 +355,7 @@ describe("DropdownCore", () => {
                 searchText=""
                 // mock the items
                 items={[
-                    {
-                        component: (
-                            <SearchTextInput
-                                testId="search"
-                                key="search-text-input"
-                                onChange={jest.fn()}
-                                searchText={""}
-                            />
-                        ),
-                        focusable: true,
-                        populatedProps: {},
-                    },
+                    searchFieldItem,
                     {
                         component: (
                             <OptionItem
@@ -754,21 +756,7 @@ describe("DropdownCore", () => {
                     onSearchTextChanged={jest.fn()}
                     searchText=""
                     // mock the items
-                    items={[
-                        {
-                            component: (
-                                <SearchTextInput
-                                    testId="search-text-input"
-                                    key="search-text-input"
-                                    onChange={jest.fn()}
-                                    searchText={""}
-                                />
-                            ),
-                            focusable: true,
-                            populatedProps: {},
-                        },
-                        ...optionItems,
-                    ]}
+                    items={[searchFieldItem, ...optionItems]}
                     role="listbox"
                     open={true}
                     // mock the opener elements
@@ -797,21 +785,7 @@ describe("DropdownCore", () => {
                     onSearchTextChanged={jest.fn()}
                     searchText=""
                     // mock the items
-                    items={[
-                        {
-                            component: (
-                                <SearchTextInput
-                                    testId="search-text-input"
-                                    key="search-text-input"
-                                    onChange={jest.fn()}
-                                    searchText={""}
-                                />
-                            ),
-                            focusable: true,
-                            populatedProps: {},
-                        },
-                        ...optionItems,
-                    ]}
+                    items={[searchFieldItem, ...optionItems]}
                     role="listbox"
                     open={true}
                     // mock the opener elements
@@ -833,4 +807,53 @@ describe("DropdownCore", () => {
             });
         });
     });
+
+    describe("a11y > Live region", () => {
+        it("should render a live region announcing the number of options", async () => {
+            // Arrange
+
+            // Act
+            const {container} = render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    // mock the items (3 options)
+                    items={items}
+                    role="listbox"
+                    open={true}
+                    // mock the opener elements
+                    opener={<button />}
+                    openerElement={null}
+                    onOpenChanged={jest.fn()}
+                />,
+            );
+
+            // Assert
+            expect(container).toHaveTextContent("3 items");
+        });
+
+        it("shouldn't include the search field as part of the options", async () => {
+            // Arrange
+
+            // Act
+            const {container} = render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    searchText=""
+                    // mock the items (3 options + search field)
+                    items={[searchFieldItem, ...items]}
+                    role="listbox"
+                    open={true}
+                    // mock the opener elements
+                    opener={<button />}
+                    openerElement={null}
+                    onOpenChanged={jest.fn()}
+                />,
+            );
+
+            // Assert
+            expect(container).toHaveTextContent("3 items");
+        });
+    });
 });

package/src/components/__tests__/multi-select.test.js

@@ -4,6 +4,8 @@ import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
+import {ngettext} from "@khanacademy/wonder-blocks-i18n";
+
 import OptionItem from "../option-item.js";
 import MultiSelect from "../multi-select.js";
 
@@ -1187,4 +1189,59 @@ describe("MultiSelect", () => {
             ).toBeInTheDocument();
         });
     });
+
+    describe("a11y > Live region", () => {
+        it("should announce the number of options when the listbox is open", async () => {
+            // Arrange
+            const labels: $Shape<Labels> = {
+                someSelected: (numOptions: number): string =>
+                    ngettext("%(num)s school", "%(num)s schools", numOptions),
+            };
+
+            // Act
+            const {container} = render(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    isFilterable={true}
+                    labels={labels}
+                    opened={true}
+                >
+                    <OptionItem label="school 1" value="1" />
+                    <OptionItem label="school 2" value="2" />
+                    <OptionItem label="school 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Assert
+            expect(container).toHaveTextContent("3 schools");
+        });
+
+        it("should change the number of options after using the search filter", async () => {
+            // Arrange
+            const labels: $Shape<Labels> = {
+                someSelected: (numOptions: number): string =>
+                    ngettext("%(num)s planet", "%(num)s planets", numOptions),
+            };
+
+            const {container} = render(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    isFilterable={true}
+                    shortcuts={true}
+                    labels={labels}
+                    opened={true}
+                >
+                    <OptionItem label="Earth" value="earth" />
+                    <OptionItem label="Venus" value="venus" />
+                    <OptionItem label="Mars" value="mars" />
+                </MultiSelect>,
+            );
+
+            // Act
+            userEvent.paste(screen.getByRole("textbox"), "Ear");
+
+            // Assert
+            expect(container).toHaveTextContent("1 planet");
+        });
+    });
 });

package/src/components/__tests__/single-select.test.js

@@ -692,4 +692,34 @@ describe("SingleSelect", () => {
             expect(dropdownMenu).toHaveStyle("max-height: 200px");
         });
     });
+
+    describe("a11y > Live region", () => {
+        it("should change the number of options after using the search filter", async () => {
+            // Arrange
+            render(
+                <SingleSelect
+                    onChange={onChange}
+                    placeholder="Choose"
+                    isFilterable={true}
+                    opened={true}
+                >
+                    <OptionItem label="item 0" value="0" />
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            userEvent.paste(screen.getByRole("textbox"), "item 0");
+
+            // Assert
+            const liveRegionText = screen.getByTestId(
+                "dropdown-live-region",
+            ).textContent;
+
+            // TODO(WB-1318): Change this assertion to `1 item` after adding the
+            // `labels` prop to the component.
+            expect(liveRegionText).toEqual("1 items");
+        });
+    });
 });

package/src/components/dropdown-core.js

@@ -10,7 +10,7 @@ import {VariableSizeList as List} from "react-window";
 import Color, {fade} from "@khanacademy/wonder-blocks-color";
 
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {View} from "@khanacademy/wonder-blocks-core";
+import {addStyle, View} from "@khanacademy/wonder-blocks-core";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
 
@@ -42,8 +42,17 @@ import {
  */
 const VIRTUALIZE_THRESHOLD = 125;
 
+const StyledSpan = addStyle("span");
+
 type Labels = {|
     noResults: string,
+    /**
+     * The number total of items available.
+     *
+     * NOTE: We are reusing the same label for both the total number of items
+     * and the number of selected items.
+     */
+    someSelected: (numOptions: number) => string,
 |};
 
 // we need to define a DefaultProps type to allow the HOC expose the default
@@ -212,6 +221,7 @@ class DropdownCore extends React.Component<Props, State> {
         alignment: "left",
         labels: {
             noResults: defaultLabels.noResults,
+            someSelected: defaultLabels.someSelected,
         },
         light: false,
     };
@@ -669,6 +679,12 @@ class DropdownCore extends React.Component<Props, State> {
                     },
                     // apply custom styles
                     style: searchInputStyle,
+                    // TODO(WB-1310): Remove the autofocus prop after making
+                    // the search field sticky.
+                    // Currently autofocusing on the search field to work
+                    // around it losing focus on mount when switching between
+                    // virtualized and non-virtualized dropdown filter results.
+                    autofocus: this.focusedIndex === 0,
                 });
             }
 
@@ -719,6 +735,12 @@ class DropdownCore extends React.Component<Props, State> {
                         itemRef: this.state.itemRefs[focusIndex]
                             ? this.state.itemRefs[focusIndex].ref
                             : null,
+                        // TODO(WB-1310): Remove the autofocus prop after making
+                        // the search field sticky.
+                        // Currently autofocusing on the search field to work
+                        // around it losing focus on mount when switching between
+                        // virtualized and non-virtualized dropdown filter results.
+                        autofocus: this.focusedIndex === 0,
                     },
                 };
             }
@@ -825,6 +847,26 @@ class DropdownCore extends React.Component<Props, State> {
         );
     }
 
+    renderLiveRegion(): React.Node {
+        const {items, open} = this.props;
+        const {labels} = this.state;
+        const totalItems = this.hasSearchBox()
+            ? items.length - 1
+            : items.length;
+
+        return (
+            <StyledSpan
+                aria-live="polite"
+                aria-atomic="true"
+                aria-relevant="additions text"
+                style={styles.srOnly}
+                data-test-id="dropdown-live-region"
+            >
+                {open && labels.someSelected(totalItems)}
+            </StyledSpan>
+        );
+    }
+
     render(): React.Node {
         const {open, opener, style, className} = this.props;
 
@@ -835,6 +877,7 @@ class DropdownCore extends React.Component<Props, State> {
                 style={[styles.menuWrapper, style]}
                 className={className}
             >
+                {this.renderLiveRegion()}
                 {opener}
                 {open && this.renderDropdown()}
             </View>
@@ -872,6 +915,17 @@ const styles = StyleSheet.create({
         alignSelf: "center",
         marginTop: Spacing.xxSmall_6,
     },
+
+    srOnly: {
+        border: 0,
+        clip: "rect(0,0,0,0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: 1,
+    },
 });
 
 type ExportProps = WithoutActionScheduler<

package/src/components/multi-select.js

@@ -556,7 +556,7 @@ export default class MultiSelect extends React.Component<Props, State> {
             isFilterable,
         } = this.props;
         const {open, searchText} = this.state;
-        const {noResults} = this.state.labels;
+        const {noResults, someSelected} = this.state.labels;
 
         const allChildren = React.Children.toArray(children).filter(Boolean);
         const numOptions = allChildren.length;
@@ -590,6 +590,7 @@ export default class MultiSelect extends React.Component<Props, State> {
                 searchText={isFilterable ? searchText : ""}
                 labels={{
                     noResults,
+                    someSelected,
                 }}
             />
         );

package/src/components/search-text-input.js

@@ -51,6 +51,13 @@ type Props = {|
      * Test ID used for e2e testing.
      */
     testId?: string,
+
+    /**
+     * Automatically focus on this search field on mount.
+     * TODO(WB-1310): Remove the autofocus prop after making
+     * the search field sticky in dropdowns.
+     */
+    autofocus?: boolean,
 |};
 
 type DefaultProps = {|
@@ -71,6 +78,21 @@ export default class SearchTextInput extends React.Component<Props> {
         },
     };
 
+    // TODO(WB-1310): Remove `componentDidMount` autofocus on the search field
+    // after making the search field sticky.
+    componentDidMount() {
+        // We need to re-focus on the text input after it mounts because of
+        // the case in which the dropdown switches between virtualized and
+        // non-virtualized. It can rerender the search field as the user is
+        // typing based on the number of search results, which results
+        // in losing focus on the field so the user can't type anymore.
+        // To work around this issue, this temporary fix auto-focuses on the
+        // search field on mount.
+        if (this.props.autofocus) {
+            this.props.itemRef?.current.focus();
+        }
+    }
+
     static __IS_SEARCH_TEXT_INPUT__: boolean = true;
 
     render(): React.Node {

package/src/components/single-select.stories.js

@@ -79,25 +79,28 @@ const optionItems = new Array(1000)
     ));
 
 type Props = {|
+    selectedValue?: ?string,
     opened: boolean,
 |};
 
 type State = {|
-    selectedValue: string,
+    selectedValue?: ?string,
     opened: boolean,
 |};
 
 type DefaultProps = {|
+    selectedValue: $PropertyType<Props, "selectedValue">,
     opened: $PropertyType<Props, "opened">,
 |};
 
 class SingleSelectWithFilter extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
+        selectedValue: "2",
         opened: false,
     };
 
     state: State = {
-        selectedValue: "2",
+        selectedValue: this.props.selectedValue,
         opened: this.props.opened,
     };
 
@@ -167,6 +170,10 @@ export const WithFilterOpened: StoryComponentType = () => (
     <SingleSelectWithFilter opened={true} />
 );
 
+export const WithFilterOpenedNoValueSelected: StoryComponentType = () => (
+    <SingleSelectWithFilter opened={true} selectedValue={null} />
+);
+
 export const DropdownInModal: StoryComponentType = () => {
     const [value, setValue] = React.useState(null);
     const [opened, setOpened] = React.useState(true);

package/src/util/constants.js

@@ -24,6 +24,9 @@ export const filterableDropdownStyle = {
 export const searchInputStyle = {
     margin: Spacing.xSmall_8,
     marginTop: Spacing.xxxSmall_4,
+    // Set `minHeight` to "auto" to stop the search field from having
+    // a height of 0 and being cut off.
+    minHeight: "auto",
 };
 
 // The default item height