Fix accessibility around the room list treeview and new search beta (#7856)

res/css/views/dialogs/_SpotlightDialog.scss

@@ -20,9 +20,9 @@ limitations under the License.
     position: relative;
     height: 60%;
     padding: 0;
-    contain: unset; // needed for .mx_SpotlightDialog_keyboardPrompt to not be culled
+    contain: unset; // needed for #mx_SpotlightDialog_keyboardPrompt to not be culled
 
-    .mx_SpotlightDialog_keyboardPrompt {
+    #mx_SpotlightDialog_keyboardPrompt {
         position: absolute;
         padding: 8px;
         border-radius: 8px;
@@ -146,8 +146,9 @@ limitations under the License.
                 text-overflow: ellipsis;
                 overflow: hidden;
 
-                .mx_SpotlightDialog_metaspaceResult,
+                > .mx_SpotlightDialog_metaspaceResult,
-                .mx_DecoratedRoomAvatar {
+                > .mx_DecoratedRoomAvatar,
+                > .mx_BaseAvatar {
                     margin-right: 8px;
                     width: 20px;
                     height: 20px;

src/accessibility/KeyboardShortcuts.ts

@@ -404,13 +404,13 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = {
         default: {
             key: Key.ARROW_DOWN,
         },
-        displayName: _td("Navigate up in the room list"),
+        displayName: _td("Navigate down in the room list"),
     },
     [KeyBindingAction.PrevRoom]: {
         default: {
             key: Key.ARROW_UP,
         },
-        displayName: _td("Navigate down in the room list"),
+        displayName: _td("Navigate up in the room list"),
     },
     [KeyBindingAction.ToggleUserMenu]: {
         default: {

src/components/structures/RoomSearch.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { createRef } from "react";
+import { createRef, RefObject } from "react";
 import classNames from "classnames";
 
 import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -54,7 +54,7 @@ interface IState {
 export default class RoomSearch extends React.PureComponent<IProps, IState> {
     private readonly dispatcherRef: string;
     private readonly betaRef: string;
-    private inputRef: React.RefObject<HTMLInputElement> = createRef();
+    private elementRef: React.RefObject<HTMLInputElement | HTMLDivElement> = createRef();
     private searchFilter: NameFilterCondition = new NameFilterCondition();
 
     constructor(props: IProps) {
@@ -113,13 +113,17 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         if (payload.action === Action.ViewRoom && payload.clear_search) {
             this.clearInput();
         } else if (payload.action === 'focus_room_filter') {
-            this.focus();
+            if (this.state.spotlightBetaEnabled) {
+                this.openSpotlight();
+            } else {
+                this.focus();
+            }
         }
     };
 
     private clearInput = () => {
-        if (!this.inputRef.current) return;
+        if (this.elementRef.current?.tagName !== "INPUT") return;
-        this.inputRef.current.value = "";
+        (this.elementRef.current as HTMLInputElement).value = "";
         this.onChange();
     };
 
@@ -133,8 +137,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     private onChange = () => {
-        if (!this.inputRef.current) return;
+        if (this.elementRef.current?.tagName !== "INPUT") return;
-        this.setState({ query: this.inputRef.current.value });
+        this.setState({ query: (this.elementRef.current as HTMLInputElement).value });
     };
 
     private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
@@ -167,11 +171,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     public focus = (): void => {
-        if (this.state.spotlightBetaEnabled) {
+        this.elementRef.current?.focus();
-            this.openSpotlight();
-        } else {
-            this.inputRef.current?.focus();
-        }
     };
 
     public render(): React.ReactNode {
@@ -195,7 +195,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         let input = (
             <input
                 type="text"
-                ref={this.inputRef}
+                ref={this.elementRef as RefObject<HTMLInputElement>}
                 className={inputClasses}
                 value={this.state.query}
                 onFocus={this.onFocus}
@@ -217,7 +217,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         }
 
         if (this.state.spotlightBetaEnabled) {
-            return <AccessibleButton onClick={this.openSpotlight} className={classes}>
+            return <AccessibleButton onClick={this.openSpotlight} className={classes} inputRef={this.elementRef}>
                 { icon }
                 { input && <div className="mx_RoomSearch_spotlightTriggerText">
                     { _t("Search") }
@@ -229,6 +229,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 onClick={this.openSearch}
                 className="mx_RoomSearch mx_RoomSearch_minimized"
                 title={_t("Filter rooms and people")}
+                inputRef={this.elementRef}
             >
                 { icon }
             </AccessibleButton>;

src/components/views/dialogs/BaseDialog.tsx

@@ -52,6 +52,8 @@ interface IProps extends IDialogProps {
 
     // Title for the dialog.
     title?: JSX.Element | string;
+    // Specific aria label to use, if not provided will set aria-labelledBy to mx_Dialog_title
+    "aria-label"?: string;
 
     // Path to an icon to put in the header
     headerImage?: string;
@@ -121,23 +123,30 @@ export default class BaseDialog extends React.Component<IProps> {
             headerImage = <img className="mx_Dialog_titleImage" src={this.props.headerImage} alt="" />;
         }
 
+        const lockProps = {
+            "onKeyDown": this.onKeyDown,
+            "role": "dialog",
+            // This should point to a node describing the dialog.
+            // If we were about to completely follow this recommendation we'd need to
+            // make all the components relying on BaseDialog to be aware of it.
+            // So instead we will use the whole content as the description.
+            // Description comes first and if the content contains more text,
+            // AT users can skip its presentation.
+            "aria-describedby": this.props.contentId,
+        };
+
+        if (this.props["aria-label"]) {
+            lockProps["aria-label"] = this.props["aria-label"];
+        } else {
+            lockProps["aria-labelledby"] = "mx_BaseDialog_title";
+        }
+
         return (
             <MatrixClientContext.Provider value={this.matrixClient}>
                 <PosthogScreenTracker screenName={this.props.screenName} />
                 <FocusLock
                     returnFocus={true}
-                    lockProps={{
+                    lockProps={lockProps}
-                        onKeyDown: this.onKeyDown,
-                        role: "dialog",
-                        ["aria-labelledby"]: "mx_BaseDialog_title",
-                        // This should point to a node describing the dialog.
-                        // If we were about to completely follow this recommendation we'd need to
-                        // make all the components relying on BaseDialog to be aware of it.
-                        // So instead we will use the whole content as the description.
-                        // Description comes first and if the content contains more text,
-                        // AT users can skip its presentation.
-                        ["aria-describedby"]: this.props.contentId,
-                    }}
                     className={classNames({
                         [this.props.className]: true,
                         'mx_Dialog_fixedWidth': this.props.fixedWidth,

src/components/views/dialogs/SpotlightDialog.tsx

@@ -79,7 +79,7 @@ import { getCachedRoomIDForAlias } from "../../../RoomAliasCache";
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
 
-const Option: React.FC<ComponentProps<typeof RovingAccessibleButton>> = ({ inputRef, ...props }) => {
+const Option: React.FC<ComponentProps<typeof RovingAccessibleButton>> = ({ inputRef, children, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
     return <AccessibleButton
         {...props}
@@ -88,7 +88,10 @@ const Option: React.FC<ComponentProps<typeof RovingAccessibleButton>> = ({ input
         tabIndex={-1}
         aria-selected={isActive}
         role="option"
-    />;
+    >
+        { children }
+        <div className="mx_SpotlightDialog_enterPrompt" aria-hidden>↵</div>
+    </AccessibleButton>;
 };
 
 const TooltipOption: React.FC<ComponentProps<typeof RovingAccessibleTooltipButton>> = ({ inputRef, ...props }) => {
@@ -357,7 +360,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                         { result.room.name }
                         <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(result.room)} />
                         <ResultDetails room={result.room} />
-                        <div className="mx_SpotlightDialog_enterPrompt">↵</div>
                     </Option>
                 );
             }
@@ -372,7 +374,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                     { otherResult.avatar }
                     { otherResult.name }
                     { otherResult.description }
-                    <div className="mx_SpotlightDialog_enterPrompt">↵</div>
                 </Option>
             );
         };
@@ -431,7 +432,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                             { room.name && room.canonical_alias && <div className="mx_SpotlightDialog_result_details">
                                 { room.canonical_alias }
                             </div> }
-                            <div className="mx_SpotlightDialog_enterPrompt">↵</div>
                         </Option>
                     )) }
                     { spaceResultsLoading && <Spinner /> }
@@ -463,7 +463,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                         { _t("Join %(roomAddress)s", {
                             roomAddress: trimmedQuery,
                         }) }
-                        <div className="mx_SpotlightDialog_enterPrompt">↵</div>
                     </Option>
                 </div>
             </div>;
@@ -490,7 +489,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                         }}
                     >
                         { _t("Public rooms") }
-                        <div className="mx_SpotlightDialog_enterPrompt">↵</div>
                     </Option>
                     <Option
                         id="mx_SpotlightDialog_button_startChat"
@@ -501,7 +499,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                         }}
                     >
                         { _t("People") }
-                        <div className="mx_SpotlightDialog_enterPrompt">↵</div>
                     </Option>
                 </div>
             </div>
@@ -544,7 +541,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                                 { room.name }
                                 <NotificationBadge notification={RoomNotificationStateStore.instance.getRoomState(room)} />
                                 <ResultDetails room={room} />
-                                <div className="mx_SpotlightDialog_enterPrompt">↵</div>
                             </Option>
                         )) }
                     </div>
@@ -590,7 +586,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                         }}
                     >
                         { _t("Explore public rooms") }
-                        <div className="mx_SpotlightDialog_enterPrompt">↵</div>
                     </Option>
                 </div>
             </div>
@@ -679,7 +674,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
     const activeDescendant = rovingContext.state.activeRef?.current?.id;
 
     return <>
-        <div className="mx_SpotlightDialog_keyboardPrompt">
+        <div id="mx_SpotlightDialog_keyboardPrompt">
             { _t("Use <arrows/> to scroll", {}, {
                 arrows: () => <>
                     <div>↓</div>
@@ -696,6 +691,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
             hasCancel={false}
             onKeyDown={onDialogKeyDown}
             screenName="UnifiedSearch"
+            aria-label={_t("Search Dialog")}
         >
             <div className="mx_SpotlightDialog_searchBox mx_textinput">
                 <input
@@ -708,10 +704,17 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                     onKeyDown={onKeyDown}
                     aria-owns="mx_SpotlightDialog_content"
                     aria-activedescendant={activeDescendant}
+                    aria-label={_t("Search")}
+                    aria-describedby="mx_SpotlightDialog_keyboardPrompt"
                 />
             </div>
 
-            <div id="mx_SpotlightDialog_content" role="listbox" aria-activedescendant={activeDescendant}>
+            <div
+                id="mx_SpotlightDialog_content"
+                role="listbox"
+                aria-activedescendant={activeDescendant}
+                aria-describedby="mx_SpotlightDialog_keyboardPrompt"
+            >
                 { content }
             </div>
 

src/i18n/strings/en_EN.json

@@ -2809,6 +2809,7 @@
     "Recent searches": "Recent searches",
     "Clear": "Clear",
     "Use <arrows/> to scroll": "Use <arrows/> to scroll",
+    "Search Dialog": "Search Dialog",
     "Results not as expected? Please <a>give feedback</a>.": "Results not as expected? Please <a>give feedback</a>.",
     "To help us prevent this in future, please <a>send us logs</a>.": "To help us prevent this in future, please <a>send us logs</a>.",
     "Missing session data": "Missing session data",
@@ -3423,8 +3424,8 @@
     "Collapse room list section": "Collapse room list section",
     "Expand room list section": "Expand room list section",
     "Clear room list filter field": "Clear room list filter field",
-    "Navigate up in the room list": "Navigate up in the room list",
     "Navigate down in the room list": "Navigate down in the room list",
+    "Navigate up in the room list": "Navigate up in the room list",
     "Toggle the top left menu": "Toggle the top left menu",
     "Toggle right panel": "Toggle right panel",
     "Open this settings tab": "Open this settings tab",