Refactor ContextMenu to use RovingTabIndex (more consistent keyboard navigation accessibility)

res/css/structures/_UserMenu.scss

@@ -208,17 +208,52 @@ limitations under the License.
 .mx_UserMenu_CustomStatusSection {
     margin: 0 12px 8px;
 
-    .mx_UserMenu_CustomStatusSection_input {
+    .mx_UserMenu_CustomStatusSection_field {
         position: relative;
         display: flex;
 
-        > input {
+        &.mx_UserMenu_CustomStatusSection_field_focused,
+        &.mx_UserMenu_CustomStatusSection_field_hasQuery {
+            .mx_UserMenu_CustomStatusSection_clear {
+                display: block;
+            }
+        }
+
+        > .mx_UserMenu_CustomStatusSection_input {
             border: 1px solid $accent;
             border-radius: 8px;
             width: 100%;
         }
+
+        > .mx_UserMenu_CustomStatusSection_clear {
+            display: none;
+
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            background-color: $quinary-content;
+            border-radius: 50%;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: inherit;
+                height: inherit;
+                mask-image: url('$(res)/img/feather-customised/x.svg');
+                mask-position: center;
+                mask-size: 12px;
+                mask-repeat: no-repeat;
+                background-color: $secondary-content;
+            }
+        }
     }
 
+
     > p {
         font-size: $font-12px;
         line-height: $font-15px;

src/accessibility/RovingTabIndex.tsx

@@ -131,6 +131,8 @@ export const reducer = (state: IState, action: IAction) => {
         }
 
         case Type.SetFocus: {
+            // if the ref doesn't change just return the same object reference to skip a re-render
+            if (state.activeRef === action.payload.ref) return state;
             // update active ref
             state.activeRef = action.payload.ref;
             return { ...state };
@@ -194,6 +196,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
         }
 
         let handled = false;
+        let focusRef: RefObject<HTMLElement>;
         // Don't interfere with input default keydown behaviour
         if (ev.target.tagName !== "INPUT" && ev.target.tagName !== "TEXTAREA") {
             // check if we actually have any items
@@ -202,36 +205,38 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
                     if (handleHomeEnd) {
                         handled = true;
                         // move focus to first (visible) item
-                        findSiblingElement(context.state.refs, 0)?.current?.focus();
+                        focusRef = findSiblingElement(context.state.refs, 0);
                     }
                     break;
 
                 case Key.END:
                     if (handleHomeEnd) {
                         handled = true;
                         // move focus to last (visible) item
-                        findSiblingElement(context.state.refs, context.state.refs.length - 1, true)?.current?.focus();
+                        focusRef = findSiblingElement(context.state.refs, context.state.refs.length - 1, true);
                     }
                     break;
 
-                case Key.ARROW_UP:
+                case Key.ARROW_DOWN:
                 case Key.ARROW_RIGHT:
-                    if ((ev.key === Key.ARROW_UP && handleUpDown) || (ev.key === Key.ARROW_RIGHT && handleLeftRight)) {
+                    if ((ev.key === Key.ARROW_DOWN && handleUpDown) ||
+                        (ev.key === Key.ARROW_RIGHT && handleLeftRight)
+                    ) {
                         handled = true;
                         if (context.state.refs.length > 0) {
                             const idx = context.state.refs.indexOf(context.state.activeRef);
-                            findSiblingElement(context.state.refs, idx - 1)?.current?.focus();
+                            focusRef = findSiblingElement(context.state.refs, idx + 1);
                         }
                     }
                     break;
 
-                case Key.ARROW_DOWN:
+                case Key.ARROW_UP:
                 case Key.ARROW_LEFT:
-                    if ((ev.key === Key.ARROW_DOWN && handleUpDown) || (ev.key === Key.ARROW_LEFT && handleLeftRight)) {
+                    if ((ev.key === Key.ARROW_UP && handleUpDown) || (ev.key === Key.ARROW_LEFT && handleLeftRight)) {
                         handled = true;
                         if (context.state.refs.length > 0) {
                             const idx = context.state.refs.indexOf(context.state.activeRef);
-                            findSiblingElement(context.state.refs, idx + 1, true)?.current?.focus();
+                            focusRef = findSiblingElement(context.state.refs, idx - 1, true);
                         }
                     }
                     break;
@@ -242,7 +247,18 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
             ev.preventDefault();
             ev.stopPropagation();
         }
-    }, [context.state, onKeyDown, handleHomeEnd, handleUpDown, handleLeftRight]);
+
+        if (focusRef) {
+            focusRef.current?.focus();
+            // programmatic focus doesn't fire the onFocus handler, so we must do the do ourselves
+            dispatch({
+                type: Type.SetFocus,
+                payload: {
+                    ref: focusRef,
+                },
+            });
+        }
+    }, [context, onKeyDown, handleHomeEnd, handleUpDown, handleLeftRight]);
 
     return <RovingTabIndexContext.Provider value={context}>
         { children({ onKeyDownHandler }) }
@@ -254,9 +270,9 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
 // onFocus should be called when the index gained focus in any manner
 // isActive should be used to set tabIndex in a manner such as `tabIndex={isActive ? 0 : -1}`
 // ref should be passed to a DOM node which will be used for DOM compareDocumentPosition
-export const useRovingTabIndex = (inputRef?: Ref): [FocusHandler, boolean, Ref] => {
+export const useRovingTabIndex = <T extends HTMLElement, >(inputRef?: RefObject<T>): [FocusHandler, boolean, RefObject<T>] => {
     const context = useContext(RovingTabIndexContext);
-    let ref = useRef<HTMLElement>(null);
+    let ref = useRef<T>(null);
 
     if (inputRef) {
         // if we are given a ref, use it instead of ours
@@ -283,7 +299,7 @@ export const useRovingTabIndex = (inputRef?: Ref): [FocusHandler, boolean, Ref]
             type: Type.SetFocus,
             payload: { ref },
         });
-    }, [ref, context]);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const isActive = context.state.activeRef === ref;
     return [onFocus, isActive, ref];

src/accessibility/Toolbar.tsx

@@ -52,7 +52,7 @@ const Toolbar: React.FC<IProps> = ({ children, ...props }) => {
         }
     };
 
-    return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
+    return <RovingTabIndexProvider handleHomeEnd handleLeftRight onKeyDown={onKeyDown}>
         { ({ onKeyDownHandler }) => <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
             { children }
         </div> }

src/accessibility/context_menu/MenuItem.tsx

@@ -18,10 +18,9 @@ limitations under the License.
 
 import React from "react";
 
-import AccessibleButton from "../../components/views/elements/AccessibleButton";
-import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+import { RovingAccessibleButton, RovingAccessibleTooltipButton } from "../RovingTabIndex";
 
-interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> {
     label?: string;
     tooltip?: string;
 }
@@ -31,15 +30,14 @@ export const MenuItem: React.FC<IProps> = ({ children, label, tooltip, ...props
     const ariaLabel = props["aria-label"] || label;
 
     if (tooltip) {
-        return <AccessibleTooltipButton {...props} role="menuitem" tabIndex={-1} aria-label={ariaLabel} title={tooltip}>
+        return <RovingAccessibleTooltipButton {...props} role="menuitem" aria-label={ariaLabel} title={tooltip}>
             { children }
-        </AccessibleTooltipButton>;
+        </RovingAccessibleTooltipButton>;
     }
 
     return (
-        <AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={ariaLabel}>
+        <RovingAccessibleButton {...props} role="menuitem" aria-label={ariaLabel}>
             { children }
-        </AccessibleButton>
+        </RovingAccessibleButton>
     );
 };
-

src/accessibility/context_menu/MenuItemCheckbox.tsx

@@ -18,26 +18,25 @@ limitations under the License.
 
 import React from "react";
 
-import AccessibleButton from "../../components/views/elements/AccessibleButton";
+import { RovingAccessibleButton } from "../RovingTabIndex";
 
-interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> {
     label?: string;
     active: boolean;
 }
 
 // Semantic component for representing a role=menuitemcheckbox
 export const MenuItemCheckbox: React.FC<IProps> = ({ children, label, active, disabled, ...props }) => {
     return (
-        <AccessibleButton
+        <RovingAccessibleButton
             {...props}
             role="menuitemcheckbox"
             aria-checked={active}
             aria-disabled={disabled}
             disabled={disabled}
-            tabIndex={-1}
             aria-label={label}
         >
             { children }
-        </AccessibleButton>
+        </RovingAccessibleButton>
     );
 };

src/accessibility/context_menu/MenuItemRadio.tsx

@@ -18,26 +18,25 @@ limitations under the License.
 
 import React from "react";
 
-import AccessibleButton from "../../components/views/elements/AccessibleButton";
+import { RovingAccessibleButton } from "../RovingTabIndex";
 
-interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> {
     label?: string;
     active: boolean;
 }
 
 // Semantic component for representing a role=menuitemradio
 export const MenuItemRadio: React.FC<IProps> = ({ children, label, active, disabled, ...props }) => {
     return (
-        <AccessibleButton
+        <RovingAccessibleButton
             {...props}
             role="menuitemradio"
             aria-checked={active}
             aria-disabled={disabled}
             disabled={disabled}
-            tabIndex={-1}
             aria-label={label}
         >
             { children }
-        </AccessibleButton>
+        </RovingAccessibleButton>
     );
 };

src/accessibility/context_menu/StyledMenuItemCheckbox.tsx

@@ -19,6 +19,7 @@ limitations under the License.
 import React from "react";
 
 import { Key } from "../../Keyboard";
+import { useRovingTabIndex } from "../RovingTabIndex";
 import StyledCheckbox from "../../components/views/elements/StyledCheckbox";
 
 interface IProps extends React.ComponentProps<typeof StyledCheckbox> {
@@ -29,6 +30,8 @@ interface IProps extends React.ComponentProps<typeof StyledCheckbox> {
 
 // Semantic component for representing a styled role=menuitemcheckbox
 export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, label, onChange, onClose, ...props }) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
+
     const onKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === Key.ENTER || e.key === Key.SPACE) {
             e.stopPropagation();
@@ -52,11 +55,13 @@ export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, label, onCh
         <StyledCheckbox
             {...props}
             role="menuitemcheckbox"
-            tabIndex={-1}
             aria-label={label}
             onChange={onChange}
             onKeyDown={onKeyDown}
             onKeyUp={onKeyUp}
+            onFocus={onFocus}
+            inputRef={ref}
+            tabIndex={isActive ? 0 : -1}
         >
             { children }
         </StyledCheckbox>

src/accessibility/context_menu/StyledMenuItemRadio.tsx

@@ -19,6 +19,7 @@ limitations under the License.
 import React from "react";
 
 import { Key } from "../../Keyboard";
+import { useRovingTabIndex } from "../RovingTabIndex";
 import StyledRadioButton from "../../components/views/elements/StyledRadioButton";
 
 interface IProps extends React.ComponentProps<typeof StyledRadioButton> {
@@ -29,6 +30,8 @@ interface IProps extends React.ComponentProps<typeof StyledRadioButton> {
 
 // Semantic component for representing a styled role=menuitemradio
 export const StyledMenuItemRadio: React.FC<IProps> = ({ children, label, onChange, onClose, ...props }) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
+
     const onKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === Key.ENTER || e.key === Key.SPACE) {
             e.stopPropagation();
@@ -52,11 +55,13 @@ export const StyledMenuItemRadio: React.FC<IProps> = ({ children, label, onChang
         <StyledRadioButton
             {...props}
             role="menuitemradio"
-            tabIndex={-1}
             aria-label={label}
             onChange={onChange}
             onKeyDown={onKeyDown}
             onKeyUp={onKeyUp}
+            onFocus={onFocus}
+            inputRef={ref}
+            tabIndex={isActive ? 0 : -1}
         >
             { children }
         </StyledRadioButton>