Enhance accessibility of dropdown (#30928)

* fix: enhance accessibility of dropdown component by adding tabIndex and improving keyboard navigation

* test: update snapshot

* feat: use tabindex -1

* test: add tests

src/components/views/elements/Dropdown.tsx

@@ -65,6 +65,7 @@ class MenuOption extends React.Component<IMenuOptionProps> {
                 role="option"
                 aria-selected={this.props.highlighted}
                 ref={this.props.inputRef}
+                tabIndex={-1}
             >
                 {this.props.children}
             </li>
@@ -232,18 +233,27 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
                 break;
             case KeyBindingAction.ArrowDown:
                 if (this.state.expanded) {
+                    const nextKey = this.nextOption(this.state.highlightedOption);
                     this.setState({
-                        highlightedOption: this.nextOption(this.state.highlightedOption),
+                        highlightedOption: nextKey,
                     });
+
+                    (
+                        this.dropdownRootElement?.querySelector(`#${this.props.id}__${nextKey}`) as HTMLLIElement
+                    )?.focus();
                 } else {
                     this.setState({ expanded: true });
                 }
                 break;
             case KeyBindingAction.ArrowUp:
                 if (this.state.expanded) {
+                    const prevKey = this.prevOption(this.state.highlightedOption);
                     this.setState({
-                        highlightedOption: this.prevOption(this.state.highlightedOption),
+                        highlightedOption: prevKey,
                     });
+                    (
+                        this.dropdownRootElement?.querySelector(`#${this.props.id}__${prevKey}`) as HTMLLIElement
+                    )?.focus();
                 } else {
                     this.setState({ expanded: true });
                 }

test/unit-tests/components/views/elements/Dropdown-test.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ReactElement } from "react";
+import { render, screen, fireEvent } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+
+import Dropdown from "../../../../../src/components/views/elements/Dropdown";
+import type { NonEmptyArray } from "../../../../../src/@types/common";
+
+describe("<Dropdown />", () => {
+    const placeholder = "Select an option";
+    const onOptionChange = jest.fn();
+
+    function renderDropdown(props?: Partial<React.ComponentProps<typeof Dropdown>>) {
+        return render(
+            <Dropdown
+                id="id"
+                label="Test Dropdown"
+                placeholder={placeholder}
+                onOptionChange={onOptionChange}
+                {...props}
+            >
+                {
+                    [<div key="one">one</div>, <div key="two">two</div>, <div key="three">three</div>] as NonEmptyArray<
+                        ReactElement & { key: string }
+                    >
+                }
+            </Dropdown>,
+        );
+    }
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("renders with placeholder", () => {
+        const { asFragment } = renderDropdown();
+        expect(screen.getByText(placeholder)).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("expands and collapses on click", async () => {
+        const user = userEvent.setup();
+        renderDropdown();
+
+        const button = screen.getByRole("button");
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        await user.click(button);
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
+        // Collapse by clicking outside
+        await user.click(document.body);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+
+    it("calls onOptionChange when an option is selected", async () => {
+        renderDropdown();
+
+        await userEvent.click(screen.getByRole("button"));
+        const option = screen.getByRole("option", { name: "two" });
+        await userEvent.click(option);
+        expect(onOptionChange).toHaveBeenCalledWith("two");
+    });
+
+    it("handles keyboard navigation and selection", async () => {
+        renderDropdown();
+
+        const button = screen.getByRole("button");
+        await userEvent.click(button);
+        // Arrow down to "two"
+        fireEvent.keyDown(button, { key: "ArrowDown" });
+        expect(screen.getByRole("option", { name: "two" })).toHaveFocus();
+        // Arrow up to "one"
+        fireEvent.keyDown(button, { key: "ArrowUp" });
+        expect(screen.getByRole("option", { name: "one" })).toHaveFocus();
+        // Enter to select
+        fireEvent.keyDown(button, { key: "Enter" });
+        expect(onOptionChange).toHaveBeenCalledWith("one");
+    });
+
+    it("does not open when disabled", async () => {
+        renderDropdown({ disabled: true });
+
+        const button = screen.getByRole("button");
+        await userEvent.click(button);
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+});

test/unit-tests/components/views/elements/__snapshots__/Dropdown-test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Dropdown /> renders with placeholder 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_Dropdown"
+  >
+    <div
+      aria-describedby="id_value"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="Test Dropdown"
+      aria-owns="id_input"
+      class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Dropdown_option"
+        id="id_value"
+      >
+        Select an option
+      </div>
+      <span
+        class="mx_Dropdown_arrow"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap

@@ -11,6 +11,7 @@ exports[`<FilterDropdown /> renders dropdown options in menu 1`] = `
     class="mx_Dropdown_option mx_Dropdown_option_highlight"
     id="test__one"
     role="option"
+    tabindex="-1"
   >
     <div
       class="mx_FilterDropdown_option"
@@ -40,6 +41,7 @@ exports[`<FilterDropdown /> renders dropdown options in menu 1`] = `
     class="mx_Dropdown_option"
     id="test__two"
     role="option"
+    tabindex="-1"
   >
     <div
       class="mx_FilterDropdown_option"