Add arrow key controls to emoji and reaction pickers (#10637)

* Add arrow key controls to emoji and reaction pickers

* Iterate types

* Switch to using aria-activedescendant

* Add tests

* Fix tests

* Iterate

* Update test

* Tweak header keyboard navigation behaviour

* Also handle scrolling on left/right arrow keys

* Iterate

src/accessibility/RovingTabIndex.tsx

@@ -61,7 +61,7 @@ export interface IState {
     refs: Ref[];
 }
 
-interface IContext {
+export interface IContext {
     state: IState;
     dispatch: Dispatch<IAction>;
 }
@@ -80,7 +80,7 @@ export enum Type {
     SetFocus = "SET_FOCUS",
 }
 
-interface IAction {
+export interface IAction {
     type: Type;
     payload: {
         ref: Ref;
@@ -160,7 +160,7 @@ interface IProps {
     handleUpDown?: boolean;
     handleLeftRight?: boolean;
     children(renderProps: { onKeyDownHandler(ev: React.KeyboardEvent): void }): ReactNode;
-    onKeyDown?(ev: React.KeyboardEvent, state: IState): void;
+    onKeyDown?(ev: React.KeyboardEvent, state: IState, dispatch: Dispatch<IAction>): void;
 }
 
 export const findSiblingElement = (
@@ -199,7 +199,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
     const onKeyDownHandler = useCallback(
         (ev: React.KeyboardEvent) => {
             if (onKeyDown) {
-                onKeyDown(ev, context.state);
+                onKeyDown(ev, context.state, context.dispatch);
                 if (ev.defaultPrevented) {
                     return;
                 }

src/accessibility/roving/RovingAccessibleButton.tsx

@@ -22,10 +22,17 @@ import { Ref } from "./types";
 
 interface IProps extends Omit<React.ComponentProps<typeof AccessibleButton>, "inputRef" | "tabIndex"> {
     inputRef?: Ref;
+    focusOnMouseOver?: boolean;
 }
 
 // Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
-export const RovingAccessibleButton: React.FC<IProps> = ({ inputRef, onFocus, ...props }) => {
+export const RovingAccessibleButton: React.FC<IProps> = ({
+    inputRef,
+    onFocus,
+    onMouseOver,
+    focusOnMouseOver,
+    ...props
+}) => {
     const [onFocusInternal, isActive, ref] = useRovingTabIndex(inputRef);
     return (
         <AccessibleButton
@@ -34,6 +41,10 @@ export const RovingAccessibleButton: React.FC<IProps> = ({ inputRef, onFocus, ..
                 onFocusInternal();
                 onFocus?.(event);
             }}
+            onMouseOver={(event: React.MouseEvent) => {
+                if (focusOnMouseOver) onFocusInternal();
+                onMouseOver?.(event);
+            }}
             inputRef={ref}
             tabIndex={isActive ? 0 : -1}
         />