From 7d64ca93bf75b3050722dc2e885b172c4c53b170 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 26 Jun 2024 16:55:40 -0700
Subject: [PATCH 01/17] Attempting to break expression widget tabbing.

---
 .../src/components/input/math-input.tsx       |  8 +++----
 .../src/components/keypad/keypad.tsx          |  1 -
 .../math-input/src/components/tabbar/item.tsx |  9 +-------
 .../src/components/tabbar/tabbar.tsx          |  4 ++--
 .../perseus/src/components/math-input.tsx     |  1 -
 packages/perseus/src/perseus-markdown.tsx     |  2 +-
 packages/perseus/src/widgets/expression.tsx   | 21 +++++++++++--------
 7 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/packages/math-input/src/components/input/math-input.tsx b/packages/math-input/src/components/input/math-input.tsx
index 2f136f32f8..09da57d9b5 100644
--- a/packages/math-input/src/components/input/math-input.tsx
+++ b/packages/math-input/src/components/input/math-input.tsx
@@ -684,12 +684,12 @@ class MathInput extends React.Component<Props, State> {
 
         // If we're already focused, but the keypad isn't active, activate it.
         if (this.state.focused && !keypadActive) {
-            setKeypadActive(true);
+            //setKeypadActive(true);
         }
 
         // Trigger a focus event, if we're not already focused.
         if (!this.state.focused) {
-            this.focus(setKeypadActive);
+            //this.focus(setKeypadActive);
         }
 
         // If the user clicked on the input using a mouse or tap gesture,
@@ -697,7 +697,7 @@ class MathInput extends React.Component<Props, State> {
         // event will be triggered when the user types on the keyboard.
         // This is necessary to support Chromebooks as they use mobile user
         // agents, do not simulate touch events, and have physical keyboards.
-        this.inputRef?.focus();
+        //this.inputRef?.focus();
     };
 
     handleTouchMove: (arg1: React.TouchEvent<HTMLDivElement>) => void = (e) => {
@@ -998,7 +998,7 @@ class MathInput extends React.Component<Props, State> {
                                 this.inputRef = node;
                             }}
                             onFocus={() => {
-                                this.focus(setKeypadActive);
+                                //this.focus(setKeypadActive);
                             }}
                             onBlur={this.blur}
                             onKeyUp={this.handleKeyUp}
diff --git a/packages/math-input/src/components/keypad/keypad.tsx b/packages/math-input/src/components/keypad/keypad.tsx
index 4aaf90f145..4e21539b2e 100644
--- a/packages/math-input/src/components/keypad/keypad.tsx
+++ b/packages/math-input/src/components/keypad/keypad.tsx
@@ -151,7 +151,6 @@ export default function Keypad(props: Props) {
                 <View style={styles.keypadInnerContainer}>
                     <View
                         style={[styles.keypadGrid, gridStyle]}
-                        tabIndex={0}
                         aria-label="Keypad"
                     >
                         {selectedPage === "Fractions" && (
diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index d51bd63b95..4f13e20364 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -85,14 +85,7 @@ class TabbarItem extends React.Component<Props> {
     render(): React.ReactNode {
         const {onClick, itemType, itemState} = this.props;
         return (
-            <Clickable
-                onClick={onClick}
-                disabled={itemState === "disabled"}
-                aria-label={itemType}
-                style={styles.clickable}
-                aria-selected={itemState === "active"}
-                role="tab"
-            >
+            <Clickable onClick={onClick} tabIndex={-1}>
                 {({hovered, focused, pressed}) => {
                     const tintColor = imageTintColor(
                         itemState,
diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index 0d9a3cd2ac..9e5517ec28 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -33,8 +33,8 @@ function Tabbar(props: Props): React.ReactElement {
     const {items, onClickClose, selectedItem, onSelectItem, style} = props;
 
     return (
-        <View style={[styles.tabbar, style]} role="tablist">
-            <View style={[styles.pages]}>
+        <View style={[styles.tabbar, style]}>
+            <View style={[styles.pages]} role="tablist">
                 {items.map((item) => (
                     <TabbarItem
                         key={`tabbar-item-${item}`}
diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx
index d5eaee536a..43e75e8c1e 100644
--- a/packages/perseus/src/components/math-input.tsx
+++ b/packages/perseus/src/components/math-input.tsx
@@ -280,7 +280,6 @@ class InnerMathInput extends React.Component<InnerProps, State> {
     render(): React.ReactNode {
         let className = classNames({
             "perseus-math-input": true,
-
             // mathquill usually adds these itself but react removes them when
             // updating the component.
             "mq-editable-field": true,
diff --git a/packages/perseus/src/perseus-markdown.tsx b/packages/perseus/src/perseus-markdown.tsx
index 47be9731b1..8d5cf3d57d 100644
--- a/packages/perseus/src/perseus-markdown.tsx
+++ b/packages/perseus/src/perseus-markdown.tsx
@@ -63,7 +63,7 @@ const rules = {
                 return table;
             }
 
-            return React.cloneElement(table, {tabIndex: 0});
+            return React.cloneElement(table);
         },
     },
     // This is pretty much horrible, but we have a regex here to capture an
diff --git a/packages/perseus/src/widgets/expression.tsx b/packages/perseus/src/widgets/expression.tsx
index 8318ae7097..cf4d4f433c 100644
--- a/packages/perseus/src/widgets/expression.tsx
+++ b/packages/perseus/src/widgets/expression.tsx
@@ -539,7 +539,9 @@ export class Expression extends React.Component<Props, ExpressionState> {
     render():
         | React.ReactNode
         | React.ReactElement<React.ComponentProps<"div">> {
+        console.log("render Expression");
         if (this.props.apiOptions.customKeypad) {
+            console.log("custom keypad");
             return (
                 <KeypadInput
                     // eslint-disable-next-line react/no-string-refs
@@ -551,14 +553,14 @@ export class Expression extends React.Component<Props, ExpressionState> {
                         // this.props.keypadElement should always be set
                         // when apiOptions.customKeypad is set, but how
                         // to convince TypeScript of this?
-                        this.props.keypadElement?.configure(
-                            this.props.keypadConfiguration,
-                            () => {
-                                if (this._isMounted) {
-                                    this._handleFocus();
-                                }
-                            },
-                        );
+                        // this.props.keypadElement?.configure(
+                        //     this.props.keypadConfiguration,
+                        //     () => {
+                        //         if (this._isMounted) {
+                        //             this._handleFocus();
+                        //         }
+                        //     },
+                        // );
                     }}
                     onBlur={this._handleBlur}
                 />
@@ -572,6 +574,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
 
         const {ERROR_MESSAGE, ERROR_TITLE} = this.context.strings;
 
+        console.log("render MathInput");
         return (
             <div
                 className={className}
@@ -610,7 +613,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
                         onChange={this.changeAndTrack}
                         convertDotToTimes={this.props.times}
                         buttonSets={this.props.buttonSets}
-                        onFocus={this._handleFocus}
+                        //onFocus={this._handleFocus}
                         onBlur={this._handleBlur}
                         hasError={this.state.showErrorStyle}
                         extraKeys={this.props.keypadConfiguration?.extraKeys}

From 00d0639dc487ad06bac3609344715e29bd2ea771 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Thu, 27 Jun 2024 17:29:46 -0700
Subject: [PATCH 02/17] Undoing testing code.

---
 .../src/components/input/math-input.tsx       |  8 +++----
 .../math-input/src/components/tabbar/item.tsx |  9 +++++++-
 .../src/components/tabbar/tabbar.tsx          |  4 ++--
 .../perseus/src/components/math-input.tsx     |  1 +
 packages/perseus/src/perseus-markdown.tsx     |  2 +-
 packages/perseus/src/widgets/expression.tsx   | 21 ++++++++-----------
 6 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/packages/math-input/src/components/input/math-input.tsx b/packages/math-input/src/components/input/math-input.tsx
index 09da57d9b5..2f136f32f8 100644
--- a/packages/math-input/src/components/input/math-input.tsx
+++ b/packages/math-input/src/components/input/math-input.tsx
@@ -684,12 +684,12 @@ class MathInput extends React.Component<Props, State> {
 
         // If we're already focused, but the keypad isn't active, activate it.
         if (this.state.focused && !keypadActive) {
-            //setKeypadActive(true);
+            setKeypadActive(true);
         }
 
         // Trigger a focus event, if we're not already focused.
         if (!this.state.focused) {
-            //this.focus(setKeypadActive);
+            this.focus(setKeypadActive);
         }
 
         // If the user clicked on the input using a mouse or tap gesture,
@@ -697,7 +697,7 @@ class MathInput extends React.Component<Props, State> {
         // event will be triggered when the user types on the keyboard.
         // This is necessary to support Chromebooks as they use mobile user
         // agents, do not simulate touch events, and have physical keyboards.
-        //this.inputRef?.focus();
+        this.inputRef?.focus();
     };
 
     handleTouchMove: (arg1: React.TouchEvent<HTMLDivElement>) => void = (e) => {
@@ -998,7 +998,7 @@ class MathInput extends React.Component<Props, State> {
                                 this.inputRef = node;
                             }}
                             onFocus={() => {
-                                //this.focus(setKeypadActive);
+                                this.focus(setKeypadActive);
                             }}
                             onBlur={this.blur}
                             onKeyUp={this.handleKeyUp}
diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index 4f13e20364..d51bd63b95 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -85,7 +85,14 @@ class TabbarItem extends React.Component<Props> {
     render(): React.ReactNode {
         const {onClick, itemType, itemState} = this.props;
         return (
-            <Clickable onClick={onClick} tabIndex={-1}>
+            <Clickable
+                onClick={onClick}
+                disabled={itemState === "disabled"}
+                aria-label={itemType}
+                style={styles.clickable}
+                aria-selected={itemState === "active"}
+                role="tab"
+            >
                 {({hovered, focused, pressed}) => {
                     const tintColor = imageTintColor(
                         itemState,
diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index 9e5517ec28..0d9a3cd2ac 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -33,8 +33,8 @@ function Tabbar(props: Props): React.ReactElement {
     const {items, onClickClose, selectedItem, onSelectItem, style} = props;
 
     return (
-        <View style={[styles.tabbar, style]}>
-            <View style={[styles.pages]} role="tablist">
+        <View style={[styles.tabbar, style]} role="tablist">
+            <View style={[styles.pages]}>
                 {items.map((item) => (
                     <TabbarItem
                         key={`tabbar-item-${item}`}
diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx
index 886b83bcb6..f5a0f79b44 100644
--- a/packages/perseus/src/components/math-input.tsx
+++ b/packages/perseus/src/components/math-input.tsx
@@ -280,6 +280,7 @@ class InnerMathInput extends React.Component<InnerProps, State> {
     render(): React.ReactNode {
         let className = classNames({
             "perseus-math-input": true,
+
             // mathquill usually adds these itself but react removes them when
             // updating the component.
             "mq-editable-field": true,
diff --git a/packages/perseus/src/perseus-markdown.tsx b/packages/perseus/src/perseus-markdown.tsx
index 8d5cf3d57d..47be9731b1 100644
--- a/packages/perseus/src/perseus-markdown.tsx
+++ b/packages/perseus/src/perseus-markdown.tsx
@@ -63,7 +63,7 @@ const rules = {
                 return table;
             }
 
-            return React.cloneElement(table);
+            return React.cloneElement(table, {tabIndex: 0});
         },
     },
     // This is pretty much horrible, but we have a regex here to capture an
diff --git a/packages/perseus/src/widgets/expression.tsx b/packages/perseus/src/widgets/expression.tsx
index cf4d4f433c..8318ae7097 100644
--- a/packages/perseus/src/widgets/expression.tsx
+++ b/packages/perseus/src/widgets/expression.tsx
@@ -539,9 +539,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     render():
         | React.ReactNode
         | React.ReactElement<React.ComponentProps<"div">> {
-        console.log("render Expression");
         if (this.props.apiOptions.customKeypad) {
-            console.log("custom keypad");
             return (
                 <KeypadInput
                     // eslint-disable-next-line react/no-string-refs
@@ -553,14 +551,14 @@ export class Expression extends React.Component<Props, ExpressionState> {
                         // this.props.keypadElement should always be set
                         // when apiOptions.customKeypad is set, but how
                         // to convince TypeScript of this?
-                        // this.props.keypadElement?.configure(
-                        //     this.props.keypadConfiguration,
-                        //     () => {
-                        //         if (this._isMounted) {
-                        //             this._handleFocus();
-                        //         }
-                        //     },
-                        // );
+                        this.props.keypadElement?.configure(
+                            this.props.keypadConfiguration,
+                            () => {
+                                if (this._isMounted) {
+                                    this._handleFocus();
+                                }
+                            },
+                        );
                     }}
                     onBlur={this._handleBlur}
                 />
@@ -574,7 +572,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
 
         const {ERROR_MESSAGE, ERROR_TITLE} = this.context.strings;
 
-        console.log("render MathInput");
         return (
             <div
                 className={className}
@@ -613,7 +610,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
                         onChange={this.changeAndTrack}
                         convertDotToTimes={this.props.times}
                         buttonSets={this.props.buttonSets}
-                        //onFocus={this._handleFocus}
+                        onFocus={this._handleFocus}
                         onBlur={this._handleBlur}
                         hasError={this.state.showErrorStyle}
                         extraKeys={this.props.keypadConfiguration?.extraKeys}

From 4f6f02e92382540d7026cf401b09d3a1c4937ec5 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Fri, 28 Jun 2024 12:03:34 -0700
Subject: [PATCH 03/17] Proof of concept of the arrowkey navigation of the
 expressions tabbar.

---
 .../math-input/src/components/tabbar/item.tsx | 177 +++++++++++++-----
 .../src/components/tabbar/tabbar.tsx          |  46 ++++-
 2 files changed, 170 insertions(+), 53 deletions(-)

diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index d51bd63b95..3e8c362967 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -7,6 +7,7 @@ import * as React from "react";
 import IconAsset from "./icons";
 
 import type {KeypadPageType} from "../../types";
+import {useCallback, useEffect, useRef} from "react";
 
 const styles = StyleSheet.create({
     base: {
@@ -75,70 +76,146 @@ function imageTintColor(
     return color.offBlack64;
 }
 export type ItemState = "active" | "inactive" | "disabled";
-type Props = {
+type ArrowKeyTabItemProps = {
     onClick: () => void;
     itemState: ItemState;
     itemType: KeypadPageType;
+    focus: boolean;
+    setFocus: React.Dispatch<React.SetStateAction<number>>;
+    index: number;
 };
 
-class TabbarItem extends React.Component<Props> {
-    render(): React.ReactNode {
-        const {onClick, itemType, itemState} = this.props;
-        return (
-            <Clickable
-                onClick={onClick}
-                disabled={itemState === "disabled"}
-                aria-label={itemType}
-                style={styles.clickable}
-                aria-selected={itemState === "active"}
-                role="tab"
-            >
-                {({hovered, focused, pressed}) => {
-                    const tintColor = imageTintColor(
-                        itemState,
-                        hovered,
-                        focused,
-                        pressed,
-                    );
+type TabItemProps = {
+    onClick: () => void;
+    itemState: ItemState;
+    itemType: KeypadPageType;
+};
+
+export function ArrowKeyTabbarItem(
+    props: ArrowKeyTabItemProps,
+): React.ReactElement {
+    const {onClick, itemType, itemState, focus, setFocus, index} = props;
+
+    const ref = useRef(null);
 
-                    return (
+    useEffect(() => {
+        if (focus) {
+            // Move element into view when it is focused
+            // @ts-expect-error - TS2339 - Property 'current' does not exist on type 'never'.
+            ref.current?.focus();
+        }
+    }, [focus, ref.current]);
+
+    return (
+        <Clickable
+            onClick={onClick}
+            disabled={itemState === "disabled"}
+            aria-label={itemType}
+            style={styles.clickable}
+            aria-selected={itemState === "active"}
+            tabIndex={itemState === "active" ? 0 : -1}
+            role="tab"
+            ref={ref}
+        >
+            {({hovered, focused, pressed}) => {
+                const tintColor = imageTintColor(
+                    itemState,
+                    hovered,
+                    focused,
+                    pressed,
+                );
+
+                return (
+                    <View
+                        style={[
+                            styles.base,
+                            itemState !== "disabled" &&
+                                hovered &&
+                                styles.hovered,
+                            focused && styles.focused,
+                            pressed && styles.pressed,
+                        ]}
+                    >
                         <View
                             style={[
-                                styles.base,
-                                itemState !== "disabled" &&
-                                    hovered &&
-                                    styles.hovered,
-                                focused && styles.focused,
-                                pressed && styles.pressed,
+                                styles.innerBox,
+                                pressed && styles.innerBoxPressed,
                             ]}
                         >
+                            <IconAsset type={itemType} tintColor={tintColor} />
+                        </View>
+                        {itemState === "active" && (
                             <View
                                 style={[
-                                    styles.innerBox,
-                                    pressed && styles.innerBoxPressed,
+                                    styles.activeIndicator,
+                                    {
+                                        backgroundColor: tintColor,
+                                    },
                                 ]}
-                            >
-                                <IconAsset
-                                    type={itemType}
-                                    tintColor={tintColor}
-                                />
-                            </View>
-                            {itemState === "active" && (
-                                <View
-                                    style={[
-                                        styles.activeIndicator,
-                                        {
-                                            backgroundColor: tintColor,
-                                        },
-                                    ]}
-                                />
-                            )}
+                            />
+                        )}
+                    </View>
+                );
+            }}
+        </Clickable>
+    );
+}
+
+function TabbarItem(props: TabItemProps): React.ReactElement {
+    const {onClick, itemType, itemState} = props;
+
+    return (
+        <Clickable
+            onClick={onClick}
+            disabled={itemState === "disabled"}
+            aria-label={itemType}
+            style={styles.clickable}
+            aria-selected={itemState === "active"}
+            tabIndex={0}
+            role="tab"
+        >
+            {({hovered, focused, pressed}) => {
+                const tintColor = imageTintColor(
+                    itemState,
+                    hovered,
+                    focused,
+                    pressed,
+                );
+
+                return (
+                    <View
+                        style={[
+                            styles.base,
+                            itemState !== "disabled" &&
+                                hovered &&
+                                styles.hovered,
+                            focused && styles.focused,
+                            pressed && styles.pressed,
+                        ]}
+                    >
+                        <View
+                            style={[
+                                styles.innerBox,
+                                pressed && styles.innerBoxPressed,
+                            ]}
+                        >
+                            <IconAsset type={itemType} tintColor={tintColor} />
                         </View>
-                    );
-                }}
-            </Clickable>
-        );
-    }
+                        {itemState === "active" && (
+                            <View
+                                style={[
+                                    styles.activeIndicator,
+                                    {
+                                        backgroundColor: tintColor,
+                                    },
+                                ]}
+                            />
+                        )}
+                    </View>
+                );
+            }}
+        </Clickable>
+    );
 }
 
 export const TabbarItemForTesting = TabbarItem;
diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index 0d9a3cd2ac..952cc2cc27 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -2,10 +2,11 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import TabbarItem from "./item";
+import TabbarItem, {ArrowKeyTabbarItem} from "./item";
 
 import type {KeypadPageType} from "../../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
+import {useCallback, useEffect, useState} from "react";
 
 const styles = StyleSheet.create({
     tabbar: {
@@ -31,17 +32,25 @@ type Props = {
 
 function Tabbar(props: Props): React.ReactElement {
     const {items, onClickClose, selectedItem, onSelectItem, style} = props;
+    const [focus, setFocus] = useArrowKeyFocus(items.length);
 
     return (
         <View style={[styles.tabbar, style]} role="tablist">
             <View style={[styles.pages]}>
-                {items.map((item) => (
-                    <TabbarItem
+                {items.map((item, index) => (
+                    <ArrowKeyTabbarItem
                         key={`tabbar-item-${item}`}
                         itemState={
                             item === selectedItem ? "active" : "inactive"
                         }
                         itemType={item}
+                        index={index}
+                        focus={focus === index}
+                        setFocus={
+                            setFocus as React.Dispatch<
+                                React.SetStateAction<number>
+                            >
+                        }
                         onClick={() => {
                             onSelectItem(item);
                         }}
@@ -62,4 +71,35 @@ function Tabbar(props: Props): React.ReactElement {
     );
 }
 
+// Custom focus hook to handle arrow key navigation for the TabBar for each ArrowKeyTabItem.
+function useArrowKeyFocus(size) {
+    const [currentFocus, setCurrentFocus] = useState(0);
+
+    const handleKeyDown = useCallback(
+        (e) => {
+            if (e.keyCode === 39) {
+                // Right arrow
+                e.preventDefault();
+                setCurrentFocus(
+                    currentFocus === size - 1 ? size - 1 : currentFocus + 1,
+                );
+            } else if (e.keyCode === 37) {
+                // Left arrow
+                e.preventDefault();
+                setCurrentFocus(currentFocus === 0 ? 0 : currentFocus - 1);
+            }
+        },
+        [size, currentFocus, setCurrentFocus],
+    );
+
+    useEffect(() => {
+        document.addEventListener("keydown", handleKeyDown, false);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown, false);
+        };
+    }, [handleKeyDown]);
+
+    return [currentFocus, setCurrentFocus];
+}
+
 export default Tabbar;

From 684adae745e712c75ad2ab3e4ad012ccb47846fc Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Mon, 1 Jul 2024 16:26:19 -0700
Subject: [PATCH 04/17] Making a few changes.

---
 .../math-input/src/components/tabbar/item.tsx | 21 +++----
 .../src/components/tabbar/tabbar.tsx          | 55 ++++++++++---------
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index 3e8c362967..2abbad70a6 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -7,7 +7,7 @@ import * as React from "react";
 import IconAsset from "./icons";
 
 import type {KeypadPageType} from "../../types";
-import {useCallback, useEffect, useRef} from "react";
+import {useEffect, useRef} from "react";
 
 const styles = StyleSheet.create({
     base: {
@@ -81,8 +81,6 @@ type ArrowKeyTabItemProps = {
     itemState: ItemState;
     itemType: KeypadPageType;
     focus: boolean;
-    setFocus: React.Dispatch<React.SetStateAction<number>>;
-    index: number;
 };
 
 type TabItemProps = {
@@ -94,17 +92,16 @@ type TabItemProps = {
 export function ArrowKeyTabbarItem(
     props: ArrowKeyTabItemProps,
 ): React.ReactElement {
-    const {onClick, itemType, itemState, focus, setFocus, index} = props;
+    const {onClick, itemType, itemState, focus} = props;
 
-    const ref = useRef(null);
+    const tabRef = useRef<typeof Clickable>(null);
 
     useEffect(() => {
-        if (focus) {
+        if (focus && tabRef?.current) {
             // Move element into view when it is focused
-            // @ts-expect-error - TS2339 - Property 'current' does not exist on type 'never'.
-            ref.current?.focus();
+            tabRef?.current.focus();
         }
-    }, [focus, ref.current]);
+    }, [focus, tabRef.current]);
 
     return (
         <Clickable
@@ -113,9 +110,9 @@ export function ArrowKeyTabbarItem(
             aria-label={itemType}
             style={styles.clickable}
             aria-selected={itemState === "active"}
-            tabIndex={itemState === "active" ? 0 : -1}
+            tabIndex={focus ? 0 : -1}
             role="tab"
-            ref={ref}
+            ref={tabRef}
         >
             {({hovered, focused, pressed}) => {
                 const tintColor = imageTintColor(
@@ -172,7 +169,7 @@ function TabbarItem(props: TabItemProps): React.ReactElement {
             style={styles.clickable}
             aria-selected={itemState === "active"}
             tabIndex={0}
-            role="tab"
+            role="button"
         >
             {({hovered, focused, pressed}) => {
                 const tintColor = imageTintColor(
diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index 952cc2cc27..b3c170400d 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -6,7 +6,7 @@ import TabbarItem, {ArrowKeyTabbarItem} from "./item";
 
 import type {KeypadPageType} from "../../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import {useCallback, useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 
 const styles = StyleSheet.create({
     tabbar: {
@@ -32,6 +32,7 @@ type Props = {
 
 function Tabbar(props: Props): React.ReactElement {
     const {items, onClickClose, selectedItem, onSelectItem, style} = props;
+
     const [focus, setFocus] = useArrowKeyFocus(items.length);
 
     return (
@@ -44,13 +45,7 @@ function Tabbar(props: Props): React.ReactElement {
                             item === selectedItem ? "active" : "inactive"
                         }
                         itemType={item}
-                        index={index}
                         focus={focus === index}
-                        setFocus={
-                            setFocus as React.Dispatch<
-                                React.SetStateAction<number>
-                            >
-                        }
                         onClick={() => {
                             onSelectItem(item);
                         }}
@@ -72,32 +67,42 @@ function Tabbar(props: Props): React.ReactElement {
 }
 
 // Custom focus hook to handle arrow key navigation for the TabBar for each ArrowKeyTabItem.
-function useArrowKeyFocus(size) {
+function useArrowKeyFocus(size: number) {
     const [currentFocus, setCurrentFocus] = useState(0);
 
-    const handleKeyDown = useCallback(
-        (e) => {
-            if (e.keyCode === 39) {
-                // Right arrow
-                e.preventDefault();
-                setCurrentFocus(
-                    currentFocus === size - 1 ? size - 1 : currentFocus + 1,
-                );
-            } else if (e.keyCode === 37) {
-                // Left arrow
+    useEffect(() => {
+        function handleKeyDown(e) {
+            let arrowEvent = false;
+
+            // Extra condition to ensure you can't arrow key navigate outside a
+            // tabbar component. Would love to know of a more effective notation of this
+            // As there are concerns around whether this will cause issues
+            // where multiple keypads are open....
+            if (document.activeElement?.role === "tab") {
+                if (e.keyCode === 39) {
+                    // Right arrow
+                    e.preventDefault();
+                    setCurrentFocus(
+                        currentFocus === size - 1 ? size - 1 : currentFocus + 1,
+                    );
+                    arrowEvent = true;
+                } else if (e.keyCode === 37) {
+                    // Left arrow
+                    e.preventDefault();
+                    setCurrentFocus(currentFocus === 0 ? 0 : currentFocus - 1);
+                    arrowEvent = true;
+                }
+            }
+            if (arrowEvent) {
+                e.stopPropagation();
                 e.preventDefault();
-                setCurrentFocus(currentFocus === 0 ? 0 : currentFocus - 1);
             }
-        },
-        [size, currentFocus, setCurrentFocus],
-    );
-
-    useEffect(() => {
+        }
         document.addEventListener("keydown", handleKeyDown, false);
         return () => {
             document.removeEventListener("keydown", handleKeyDown, false);
         };
-    }, [handleKeyDown]);
+    });
 
     return [currentFocus, setCurrentFocus];
 }

From 7d3de427adef79c9f972aea5c283f78baa14ce67 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 2 Jul 2024 14:27:43 -0700
Subject: [PATCH 05/17] Fixing arrow-key logic and consolidating components.

---
 .../math-input/src/components/tabbar/item.tsx | 79 ++-----------------
 .../src/components/tabbar/tabbar.tsx          | 77 +++++++-----------
 2 files changed, 37 insertions(+), 119 deletions(-)

diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index 2abbad70a6..c9dd6c6ecc 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -76,28 +76,20 @@ function imageTintColor(
     return color.offBlack64;
 }
 export type ItemState = "active" | "inactive" | "disabled";
-type ArrowKeyTabItemProps = {
-    onClick: () => void;
-    itemState: ItemState;
-    itemType: KeypadPageType;
-    focus: boolean;
-};
-
 type TabItemProps = {
     onClick: () => void;
     itemState: ItemState;
     itemType: KeypadPageType;
+    focus?: boolean;
+    role: "tab" | "button";
 };
 
-export function ArrowKeyTabbarItem(
-    props: ArrowKeyTabItemProps,
-): React.ReactElement {
-    const {onClick, itemType, itemState, focus} = props;
-
+function TabbarItem(props: TabItemProps): React.ReactElement {
+    const {onClick, itemType, itemState, focus, role} = props;
     const tabRef = useRef<typeof Clickable>(null);
 
     useEffect(() => {
-        if (focus && tabRef?.current) {
+        if (role === "tab" && focus && tabRef?.current) {
             // Move element into view when it is focused
             tabRef?.current.focus();
         }
@@ -110,8 +102,8 @@ export function ArrowKeyTabbarItem(
             aria-label={itemType}
             style={styles.clickable}
             aria-selected={itemState === "active"}
-            tabIndex={focus ? 0 : -1}
-            role="tab"
+            tabIndex={role === "button" ? 0 : focus ? 0 : -1}
+            role={role}
             ref={tabRef}
         >
             {({hovered, focused, pressed}) => {
@@ -158,63 +150,6 @@ export function ArrowKeyTabbarItem(
     );
 }
 
-function TabbarItem(props: TabItemProps): React.ReactElement {
-    const {onClick, itemType, itemState} = props;
-
-    return (
-        <Clickable
-            onClick={onClick}
-            disabled={itemState === "disabled"}
-            aria-label={itemType}
-            style={styles.clickable}
-            aria-selected={itemState === "active"}
-            tabIndex={0}
-            role="button"
-        >
-            {({hovered, focused, pressed}) => {
-                const tintColor = imageTintColor(
-                    itemState,
-                    hovered,
-                    focused,
-                    pressed,
-                );
-
-                return (
-                    <View
-                        style={[
-                            styles.base,
-                            itemState !== "disabled" &&
-                                hovered &&
-                                styles.hovered,
-                            focused && styles.focused,
-                            pressed && styles.pressed,
-                        ]}
-                    >
-                        <View
-                            style={[
-                                styles.innerBox,
-                                pressed && styles.innerBoxPressed,
-                            ]}
-                        >
-                            <IconAsset type={itemType} tintColor={tintColor} />
-                        </View>
-                        {itemState === "active" && (
-                            <View
-                                style={[
-                                    styles.activeIndicator,
-                                    {
-                                        backgroundColor: tintColor,
-                                    },
-                                ]}
-                            />
-                        )}
-                    </View>
-                );
-            }}
-        </Clickable>
-    );
-}
-
 export const TabbarItemForTesting = TabbarItem;
 
 export default TabbarItem;
diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index b3c170400d..577521adf8 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -2,11 +2,11 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import TabbarItem, {ArrowKeyTabbarItem} from "./item";
+import TabbarItem from "./item";
 
 import type {KeypadPageType} from "../../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import {useEffect, useRef, useState} from "react";
+import {useRef, useState} from "react";
 
 const styles = StyleSheet.create({
     tabbar: {
@@ -33,13 +33,36 @@ type Props = {
 function Tabbar(props: Props): React.ReactElement {
     const {items, onClickClose, selectedItem, onSelectItem, style} = props;
 
-    const [focus, setFocus] = useArrowKeyFocus(items.length);
+    const selectedIndex = items.findIndex((item: KeypadPageType) => {
+        return item === selectedItem;
+    });
+
+    const [focus, setFocus] = useState(
+        selectedIndex === -1 ? 0 : selectedIndex,
+    );
+
+    // Custom function to handle arrow key navigation for the TabBar for each TabItem.
+    const useArrowKeyFocus = (e) => {
+        if (e.keyCode === 39) {
+            // Right arrow
+            setFocus(focus === items.length - 1 ? items.length - 1 : focus + 1);
+        } else if (e.keyCode === 37) {
+            // Left arrow
+            setFocus(focus === 0 ? 0 : focus - 1);
+        }
+        console.log(focus);
+    };
 
     return (
-        <View style={[styles.tabbar, style]} role="tablist">
-            <View style={[styles.pages]}>
+        <View style={[styles.tabbar, style]}>
+            <View
+                style={[styles.pages]}
+                role="tablist"
+                onKeyDown={useArrowKeyFocus}
+            >
                 {items.map((item, index) => (
-                    <ArrowKeyTabbarItem
+                    <TabbarItem
+                        role="tab"
                         key={`tabbar-item-${item}`}
                         itemState={
                             item === selectedItem ? "active" : "inactive"
@@ -56,6 +79,7 @@ function Tabbar(props: Props): React.ReactElement {
             <View>
                 {onClickClose && (
                     <TabbarItem
+                        role="button"
                         itemState="inactive"
                         itemType="Dismiss"
                         onClick={onClickClose}
@@ -66,45 +90,4 @@ function Tabbar(props: Props): React.ReactElement {
     );
 }
 
-// Custom focus hook to handle arrow key navigation for the TabBar for each ArrowKeyTabItem.
-function useArrowKeyFocus(size: number) {
-    const [currentFocus, setCurrentFocus] = useState(0);
-
-    useEffect(() => {
-        function handleKeyDown(e) {
-            let arrowEvent = false;
-
-            // Extra condition to ensure you can't arrow key navigate outside a
-            // tabbar component. Would love to know of a more effective notation of this
-            // As there are concerns around whether this will cause issues
-            // where multiple keypads are open....
-            if (document.activeElement?.role === "tab") {
-                if (e.keyCode === 39) {
-                    // Right arrow
-                    e.preventDefault();
-                    setCurrentFocus(
-                        currentFocus === size - 1 ? size - 1 : currentFocus + 1,
-                    );
-                    arrowEvent = true;
-                } else if (e.keyCode === 37) {
-                    // Left arrow
-                    e.preventDefault();
-                    setCurrentFocus(currentFocus === 0 ? 0 : currentFocus - 1);
-                    arrowEvent = true;
-                }
-            }
-            if (arrowEvent) {
-                e.stopPropagation();
-                e.preventDefault();
-            }
-        }
-        document.addEventListener("keydown", handleKeyDown, false);
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown, false);
-        };
-    });
-
-    return [currentFocus, setCurrentFocus];
-}
-
 export default Tabbar;

From 2c6a4c01edc3be2182cff970d1d28b6a0efe6bf1 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 2 Jul 2024 14:50:51 -0700
Subject: [PATCH 06/17] Fixing linting issues and updating tests.

---
 .../__snapshots__/keypad.test.tsx.snap        | 22 ++++++++++++-------
 .../__snapshots__/mobile-keypad.test.tsx.snap |  6 ++---
 .../keypad/__tests__/keypad.test.tsx          |  4 ++--
 .../keypad/__tests__/mobile-keypad.test.tsx   |  2 +-
 .../tabbar/__tests__/tabbar.test.tsx          |  8 ++++---
 .../math-input/src/components/tabbar/item.tsx |  4 ++--
 .../src/components/tabbar/tabbar.tsx          |  3 +--
 .../__tests__/expression-mobile.test.tsx      |  2 +-
 8 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
index f261ded6fa..9d2bd1fa52 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
@@ -10,21 +10,22 @@ exports[`keypad should snapshot expanded: first render 1`] = `
     >
       <div
         class="default_xu2jcg-o_O-tabbar_721koc"
-        role="tablist"
       >
         <div
           class="default_xu2jcg-o_O-pages_cjo0m2"
+          role="tablist"
         >
           <button
             aria-disabled="false"
             aria-label="Numbers"
             aria-selected="true"
-            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
+            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-focused_en8zhl-o_O-clickable_1ncqa8p"
             role="tab"
+            tabindex="0"
             type="button"
           >
             <div
-              class="default_xu2jcg-o_O-base_1pupywz"
+              class="default_xu2jcg-o_O-base_1pupywz-o_O-focused_2hwz1v"
             >
               <div
                 class="default_xu2jcg-o_O-innerBox_qdbgl3"
@@ -53,6 +54,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
             aria-selected="false"
             class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
+            tabindex="-1"
             type="button"
           >
             <div
@@ -84,6 +86,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
             aria-selected="false"
             class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
+            tabindex="-1"
             type="button"
           >
             <div
@@ -115,6 +118,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
             aria-selected="false"
             class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
+            tabindex="-1"
             type="button"
           >
             <div
@@ -170,7 +174,6 @@ exports[`keypad should snapshot expanded: first render 1`] = `
         <div
           aria-label="Keypad"
           class="default_xu2jcg-o_O-keypadGrid_ztxlrb-o_O-expressionGrid_1fuqhx9"
-          tabindex="0"
         >
           <div
             class="default_xu2jcg-o_O-inlineStyles_1c2q4k1"
@@ -1063,21 +1066,22 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
     >
       <div
         class="default_xu2jcg-o_O-tabbar_721koc"
-        role="tablist"
       >
         <div
           class="default_xu2jcg-o_O-pages_cjo0m2"
+          role="tablist"
         >
           <button
             aria-disabled="false"
             aria-label="Numbers"
             aria-selected="true"
-            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
+            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-focused_en8zhl-o_O-clickable_1ncqa8p"
             role="tab"
+            tabindex="0"
             type="button"
           >
             <div
-              class="default_xu2jcg-o_O-base_1pupywz"
+              class="default_xu2jcg-o_O-base_1pupywz-o_O-focused_2hwz1v"
             >
               <div
                 class="default_xu2jcg-o_O-innerBox_qdbgl3"
@@ -1106,6 +1110,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
             aria-selected="false"
             class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
+            tabindex="-1"
             type="button"
           >
             <div
@@ -1137,6 +1142,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
             aria-selected="false"
             class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
+            tabindex="-1"
             type="button"
           >
             <div
@@ -1168,6 +1174,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
             aria-selected="false"
             class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
+            tabindex="-1"
             type="button"
           >
             <div
@@ -1223,7 +1230,6 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
         <div
           aria-label="Keypad"
           class="default_xu2jcg-o_O-keypadGrid_ztxlrb-o_O-expressionGrid_1fuqhx9"
-          tabindex="0"
         >
           <div
             class="default_xu2jcg-o_O-inlineStyles_1c2q4k1"
diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
index 3947c7b393..060b0e3b9b 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
@@ -21,10 +21,10 @@ exports[`mobile keypad should render keypad when active 1`] = `
       >
         <div
           class="default_xu2jcg-o_O-tabbar_721koc"
-          role="tablist"
         >
           <div
             class="default_xu2jcg-o_O-pages_cjo0m2"
+            role="tablist"
           />
           <div
             class="default_xu2jcg"
@@ -34,7 +34,8 @@ exports[`mobile keypad should render keypad when active 1`] = `
               aria-label="Dismiss"
               aria-selected="false"
               class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
-              role="tab"
+              role="button"
+              tabindex="0"
               type="button"
             >
               <div
@@ -68,7 +69,6 @@ exports[`mobile keypad should render keypad when active 1`] = `
           <div
             aria-label="Keypad"
             class="default_xu2jcg-o_O-keypadGrid_ztxlrb-o_O-fractionsGrid_1aelnry"
-            tabindex="0"
           >
             <div
               class="default_xu2jcg-o_O-inlineStyles_1c2q4k1"
diff --git a/packages/math-input/src/components/keypad/__tests__/keypad.test.tsx b/packages/math-input/src/components/keypad/__tests__/keypad.test.tsx
index cc90aa8e8c..4aee5e1145 100644
--- a/packages/math-input/src/components/keypad/__tests__/keypad.test.tsx
+++ b/packages/math-input/src/components/keypad/__tests__/keypad.test.tsx
@@ -110,7 +110,7 @@ describe("keypad", () => {
 
         // Assert
         expect(
-            screen.getByRole("tab", {
+            screen.getByRole("button", {
                 name: "Dismiss",
             }),
         ).toBeInTheDocument();
@@ -125,7 +125,7 @@ describe("keypad", () => {
 
         // Assert
         expect(
-            screen.queryByRole("tab", {
+            screen.queryByRole("button", {
                 name: "Dismiss",
             }),
         ).not.toBeInTheDocument();
diff --git a/packages/math-input/src/components/keypad/__tests__/mobile-keypad.test.tsx b/packages/math-input/src/components/keypad/__tests__/mobile-keypad.test.tsx
index 502a76691c..b4a108825d 100644
--- a/packages/math-input/src/components/keypad/__tests__/mobile-keypad.test.tsx
+++ b/packages/math-input/src/components/keypad/__tests__/mobile-keypad.test.tsx
@@ -56,7 +56,7 @@ describe("mobile keypad", () => {
         );
 
         // Assert
-        expect(screen.queryAllByRole("tab")).not.toHaveLength(0);
+        expect(screen.queryAllByRole("button")).not.toHaveLength(0);
     });
 
     it("should fire an 'opened' event when activated", () => {
diff --git a/packages/math-input/src/components/tabbar/__tests__/tabbar.test.tsx b/packages/math-input/src/components/tabbar/__tests__/tabbar.test.tsx
index 2766350da0..ac4f3f47a2 100644
--- a/packages/math-input/src/components/tabbar/__tests__/tabbar.test.tsx
+++ b/packages/math-input/src/components/tabbar/__tests__/tabbar.test.tsx
@@ -73,7 +73,9 @@ describe("<Tabbar />", () => {
         );
 
         // Assert
-        expect(screen.getByRole("tab", {name: "Dismiss"})).toBeInTheDocument();
+        expect(
+            screen.getByRole("button", {name: "Dismiss"}),
+        ).toBeInTheDocument();
     });
 
     it("does not show dismiss button without onClickClose callback", async () => {
@@ -88,7 +90,7 @@ describe("<Tabbar />", () => {
 
         // Assert
         expect(
-            screen.queryByRole("tab", {name: "Dismiss"}),
+            screen.queryByRole("button", {name: "Dismiss"}),
         ).not.toBeInTheDocument();
     });
 
@@ -105,7 +107,7 @@ describe("<Tabbar />", () => {
         );
 
         // Assert
-        await userEvent.click(screen.getByRole("tab", {name: "Dismiss"}));
+        await userEvent.click(screen.getByRole("button", {name: "Dismiss"}));
         expect(mockClickCloseCallback).toHaveBeenCalled();
     });
 });
diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index c9dd6c6ecc..921d4016d4 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -3,11 +3,11 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {color} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
+import {useEffect, useRef} from "react";
 
 import IconAsset from "./icons";
 
 import type {KeypadPageType} from "../../types";
-import {useEffect, useRef} from "react";
 
 const styles = StyleSheet.create({
     base: {
@@ -93,7 +93,7 @@ function TabbarItem(props: TabItemProps): React.ReactElement {
             // Move element into view when it is focused
             tabRef?.current.focus();
         }
-    }, [focus, tabRef.current]);
+    }, [role, focus, tabRef]);
 
     return (
         <Clickable
diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index 577521adf8..47e5cd2076 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -1,12 +1,12 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
+import {useState} from "react";
 
 import TabbarItem from "./item";
 
 import type {KeypadPageType} from "../../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import {useRef, useState} from "react";
 
 const styles = StyleSheet.create({
     tabbar: {
@@ -50,7 +50,6 @@ function Tabbar(props: Props): React.ReactElement {
             // Left arrow
             setFocus(focus === 0 ? 0 : focus - 1);
         }
-        console.log(focus);
     };
 
     return (
diff --git a/packages/perseus/src/widgets/__tests__/expression-mobile.test.tsx b/packages/perseus/src/widgets/__tests__/expression-mobile.test.tsx
index 15cdd642d1..e6c73333a8 100644
--- a/packages/perseus/src/widgets/__tests__/expression-mobile.test.tsx
+++ b/packages/perseus/src/widgets/__tests__/expression-mobile.test.tsx
@@ -139,7 +139,7 @@ describe("expression mobile", () => {
             expect(screen.getByRole("button", {name: "1"})).toBeVisible(),
         );
 
-        await userEvent.click(screen.getByRole("tab", {name: "Dismiss"}));
+        await userEvent.click(screen.getByRole("button", {name: "Dismiss"}));
 
         // wait for the keypad to close
         await waitFor(() =>

From 20f139dd7558ea61a142cca031570481ae7b500b Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 2 Jul 2024 14:55:31 -0700
Subject: [PATCH 07/17] Updating math-input tests.

---
 packages/perseus/src/components/__tests__/math-input.test.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/perseus/src/components/__tests__/math-input.test.tsx b/packages/perseus/src/components/__tests__/math-input.test.tsx
index 4c4ca41669..f0ac28fe3e 100644
--- a/packages/perseus/src/components/__tests__/math-input.test.tsx
+++ b/packages/perseus/src/components/__tests__/math-input.test.tsx
@@ -162,8 +162,6 @@ describe("Perseus' MathInput", () => {
         // focusing the input triggers the popover
         screen.getByRole("button").click();
         await userEvent.tab(); // to "123" tab
-        await userEvent.tab(); // to extra keys tab
-        await userEvent.tab(); // to whole keypad
         await userEvent.tab(); // to "1" button
         await userEvent.keyboard("{enter}");
         jest.runOnlyPendingTimers();

From 6191c3143498e2b62c951a7905f5c57e75414005 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 2 Jul 2024 15:50:38 -0700
Subject: [PATCH 08/17] Adding item test file to confirm new focus logic.

---
 .../components/tabbar/__tests__/item.test.tsx | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 packages/math-input/src/components/tabbar/__tests__/item.test.tsx

diff --git a/packages/math-input/src/components/tabbar/__tests__/item.test.tsx b/packages/math-input/src/components/tabbar/__tests__/item.test.tsx
new file mode 100644
index 0000000000..ac55598659
--- /dev/null
+++ b/packages/math-input/src/components/tabbar/__tests__/item.test.tsx
@@ -0,0 +1,80 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {userEvent as userEventLib} from "@testing-library/user-event";
+import * as React from "react";
+
+import TabbarItem from "../item";
+
+describe("<TabbarItem />", () => {
+    let userEvent;
+    beforeEach(() => {
+        userEvent = userEventLib.setup({
+            advanceTimers: jest.advanceTimersByTime,
+        });
+    });
+
+    it("renders tab item", async () => {
+        // Arrange
+        render(
+            <TabbarItem
+                itemType="Numbers"
+                itemState="active"
+                role="tab"
+                onClick={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByRole("tab", {name: "Numbers"})).toBeInTheDocument();
+        expect(screen.getByRole("tab", {name: "Numbers"})).not.toHaveFocus();
+    });
+
+    it("renders tab item with role button", async () => {
+        // Arrange
+        render(
+            <TabbarItem
+                itemType="Numbers"
+                itemState="active"
+                role="button"
+                onClick={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("button", {name: "Numbers"}),
+        ).toBeInTheDocument();
+    });
+
+    it("can set focus when focus is enabled", async () => {
+        // Arrange
+        render(
+            <TabbarItem
+                itemType="Numbers"
+                itemState="active"
+                focus={true}
+                role="tab"
+                onClick={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByRole("tab", {name: "Numbers"})).toHaveFocus();
+    });
+
+    it("handles onClick callback", async () => {
+        // Arrange
+        const mockClick = jest.fn();
+        render(
+            <TabbarItem
+                itemType="Numbers"
+                itemState="active"
+                role="tab"
+                onClick={mockClick}
+            />,
+        );
+
+        // Assert
+        await userEvent.click(screen.getByRole("tab", {name: "Numbers"}));
+        expect(mockClick).toHaveBeenCalled();
+    });
+});

From ff4a2412c6dfedc61e82582abae24d006a56fabd Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 2 Jul 2024 15:56:16 -0700
Subject: [PATCH 09/17] Cleaning up linting issue in items.test

---
 .../math-input/src/components/tabbar/__tests__/item.test.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/math-input/src/components/tabbar/__tests__/item.test.tsx b/packages/math-input/src/components/tabbar/__tests__/item.test.tsx
index ac55598659..f8ebf6fa32 100644
--- a/packages/math-input/src/components/tabbar/__tests__/item.test.tsx
+++ b/packages/math-input/src/components/tabbar/__tests__/item.test.tsx
@@ -1,4 +1,4 @@
-import {fireEvent, render, screen} from "@testing-library/react";
+import {render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 

From 9ae7347a309259fccfce0874ca537b305ac152ea Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 2 Jul 2024 15:58:59 -0700
Subject: [PATCH 10/17] Updating changeset.

---
 .changeset/polite-snails-know.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/polite-snails-know.md

diff --git a/.changeset/polite-snails-know.md b/.changeset/polite-snails-know.md
new file mode 100644
index 0000000000..b1c59b7fb0
--- /dev/null
+++ b/.changeset/polite-snails-know.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": minor
+---
+
+Updating tabbar experience to use arrow-key navigation to access the other tabitems.

From b12f1b0da276c7eb2bf0f127d297a932c2c40ca7 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Tue, 2 Jul 2024 16:34:34 -0700
Subject: [PATCH 11/17] Updating change description.

---
 .changeset/polite-snails-know.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/polite-snails-know.md b/.changeset/polite-snails-know.md
index b1c59b7fb0..4817ab23ed 100644
--- a/.changeset/polite-snails-know.md
+++ b/.changeset/polite-snails-know.md
@@ -2,4 +2,4 @@
 "@khanacademy/math-input": minor
 ---
 
-Updating tabbar experience to use arrow-key navigation to access the other tabitems.
+Updating TabBar experience in to use arrow-key navigation to access the other TabItems. This will ensure the Expression Widget in perseus has proper keyboard navigation for users.

From 7879402c290e721516e9b3349466a74592f7aeda Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 3 Jul 2024 11:39:16 -0700
Subject: [PATCH 12/17] Updating code with a few improvements.

---
 .../math-input/src/components/tabbar/tabbar.tsx  | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index 47e5cd2076..4d77915ef5 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -40,15 +40,19 @@ function Tabbar(props: Props): React.ReactElement {
     const [focus, setFocus] = useState(
         selectedIndex === -1 ? 0 : selectedIndex,
     );
-
-    // Custom function to handle arrow key navigation for the TabBar for each TabItem.
-    const useArrowKeyFocus = (e) => {
+    /**
+     * Custom function to handle arrow key navigation for the TabBar for each TabItem.
+     * This implementation also circular in that if the user goes past the end of
+     * the list they will go back to the beginning and vise versa.
+     * @param e - onKeyDown event data.
+     */
+    const onArrowKeyFocus = (e) => {
         if (e.keyCode === 39) {
             // Right arrow
-            setFocus(focus === items.length - 1 ? items.length - 1 : focus + 1);
+            setFocus(focus === items.length - 1 ? 0 : focus + 1);
         } else if (e.keyCode === 37) {
             // Left arrow
-            setFocus(focus === 0 ? 0 : focus - 1);
+            setFocus(focus === 0 ? items.length - 1 : focus - 1);
         }
     };
 
@@ -57,7 +61,7 @@ function Tabbar(props: Props): React.ReactElement {
             <View
                 style={[styles.pages]}
                 role="tablist"
-                onKeyDown={useArrowKeyFocus}
+                onKeyDown={onArrowKeyFocus}
             >
                 {items.map((item, index) => (
                     <TabbarItem

From 3cab8f2975145b89bac315faeaa8d9394cfcd65f Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 3 Jul 2024 11:42:38 -0700
Subject: [PATCH 13/17] Updated comment.

---
 packages/math-input/src/components/tabbar/tabbar.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index 4d77915ef5..534fccb2e9 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -44,6 +44,8 @@ function Tabbar(props: Props): React.ReactElement {
      * Custom function to handle arrow key navigation for the TabBar for each TabItem.
      * This implementation also circular in that if the user goes past the end of
      * the list they will go back to the beginning and vise versa.
+     * This is the recommended pattern per WCAG implementation:
+     * https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/
      * @param e - onKeyDown event data.
      */
     const onArrowKeyFocus = (e) => {

From ca7b781fe62c36efeafc6cfe8a4d0ba263a343ae Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 3 Jul 2024 11:51:59 -0700
Subject: [PATCH 14/17] Removing empty tablist case.

---
 .../__snapshots__/mobile-keypad.test.tsx.snap |  4 --
 .../src/components/tabbar/tabbar.tsx          | 42 ++++++++++---------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
index 060b0e3b9b..d80bee5b46 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap
@@ -22,10 +22,6 @@ exports[`mobile keypad should render keypad when active 1`] = `
         <div
           class="default_xu2jcg-o_O-tabbar_721koc"
         >
-          <div
-            class="default_xu2jcg-o_O-pages_cjo0m2"
-            role="tablist"
-          />
           <div
             class="default_xu2jcg"
           >
diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index 534fccb2e9..a2e80e2b3d 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -60,26 +60,28 @@ function Tabbar(props: Props): React.ReactElement {
 
     return (
         <View style={[styles.tabbar, style]}>
-            <View
-                style={[styles.pages]}
-                role="tablist"
-                onKeyDown={onArrowKeyFocus}
-            >
-                {items.map((item, index) => (
-                    <TabbarItem
-                        role="tab"
-                        key={`tabbar-item-${item}`}
-                        itemState={
-                            item === selectedItem ? "active" : "inactive"
-                        }
-                        itemType={item}
-                        focus={focus === index}
-                        onClick={() => {
-                            onSelectItem(item);
-                        }}
-                    />
-                ))}
-            </View>
+            {items.length > 0 && (
+                <View
+                    style={[styles.pages]}
+                    role="tablist"
+                    onKeyDown={onArrowKeyFocus}
+                >
+                    {items.map((item, index) => (
+                        <TabbarItem
+                            role="tab"
+                            key={`tabbar-item-${item}`}
+                            itemState={
+                                item === selectedItem ? "active" : "inactive"
+                            }
+                            itemType={item}
+                            focus={focus === index}
+                            onClick={() => {
+                                onSelectItem(item);
+                            }}
+                        />
+                    ))}
+                </View>
+            )}
 
             <View>
                 {onClickClose && (

From 7a50770a99fbbdf4edee95c2053de026838dc361 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 3 Jul 2024 11:57:02 -0700
Subject: [PATCH 15/17] A few more improvements.

---
 packages/math-input/src/components/tabbar/item.tsx   | 2 +-
 packages/math-input/src/components/tabbar/tabbar.tsx | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index 921d4016d4..a024949341 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -86,7 +86,7 @@ type TabItemProps = {
 
 function TabbarItem(props: TabItemProps): React.ReactElement {
     const {onClick, itemType, itemState, focus, role} = props;
-    const tabRef = useRef<typeof Clickable>(null);
+    const tabRef = useRef<{focus: () => void}>(null);
 
     useEffect(() => {
         if (role === "tab" && focus && tabRef?.current) {
diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx
index a2e80e2b3d..5dcf0ebe66 100644
--- a/packages/math-input/src/components/tabbar/tabbar.tsx
+++ b/packages/math-input/src/components/tabbar/tabbar.tsx
@@ -32,10 +32,7 @@ type Props = {
 
 function Tabbar(props: Props): React.ReactElement {
     const {items, onClickClose, selectedItem, onSelectItem, style} = props;
-
-    const selectedIndex = items.findIndex((item: KeypadPageType) => {
-        return item === selectedItem;
-    });
+    const selectedIndex = items.indexOf(selectedItem);
 
     const [focus, setFocus] = useState(
         selectedIndex === -1 ? 0 : selectedIndex,

From de7adfa474e74d7433062920511f58cbf01dfb44 Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 3 Jul 2024 13:01:27 -0700
Subject: [PATCH 16/17] Adding timeout event to override keyboard issues.

---
 .../math-input/src/components/tabbar/item.tsx | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/math-input/src/components/tabbar/item.tsx b/packages/math-input/src/components/tabbar/item.tsx
index a024949341..de95e5adb6 100644
--- a/packages/math-input/src/components/tabbar/item.tsx
+++ b/packages/math-input/src/components/tabbar/item.tsx
@@ -89,10 +89,26 @@ function TabbarItem(props: TabItemProps): React.ReactElement {
     const tabRef = useRef<{focus: () => void}>(null);
 
     useEffect(() => {
-        if (role === "tab" && focus && tabRef?.current) {
-            // Move element into view when it is focused
-            tabRef?.current.focus();
+        let timeout;
+        if (role === "tab" && focus) {
+            /**
+             * When tabs are within a WonderBlocks Popover component, the
+             * manner in which the component is rendered and moved causes
+             * focus to snap to the bottom of the page on first focus.
+             *
+             * This timeout moves around that by delaying the focus enough
+             * to wait for the WonderBlock Popover to move to the correct
+             * location and scroll the user to the correct location.
+             * */
+            timeout = setTimeout(() => {
+                if (tabRef?.current) {
+                    // Move element into view when it is focused
+                    tabRef?.current.focus();
+                }
+            }, 0);
         }
+
+        return () => clearTimeout(timeout);
     }, [role, focus, tabRef]);
 
     return (

From 9ddcbfb44a1afe68b2451cfbce99780df20c11ea Mon Sep 17 00:00:00 2001
From: Cat Johnson <catjohnson@khanacademy.org>
Date: Wed, 3 Jul 2024 13:53:10 -0700
Subject: [PATCH 17/17] Updating snaps

---
 .../keypad/__tests__/__snapshots__/keypad.test.tsx.snap   | 8 ++++----
 .../src/components/tabbar/__tests__/item.test.tsx         | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
index 9d2bd1fa52..bcb11f03e6 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
@@ -19,13 +19,13 @@ exports[`keypad should snapshot expanded: first render 1`] = `
             aria-disabled="false"
             aria-label="Numbers"
             aria-selected="true"
-            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-focused_en8zhl-o_O-clickable_1ncqa8p"
+            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
             tabindex="0"
             type="button"
           >
             <div
-              class="default_xu2jcg-o_O-base_1pupywz-o_O-focused_2hwz1v"
+              class="default_xu2jcg-o_O-base_1pupywz"
             >
               <div
                 class="default_xu2jcg-o_O-innerBox_qdbgl3"
@@ -1075,13 +1075,13 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
             aria-disabled="false"
             aria-label="Numbers"
             aria-selected="true"
-            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-focused_en8zhl-o_O-clickable_1ncqa8p"
+            class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
             role="tab"
             tabindex="0"
             type="button"
           >
             <div
-              class="default_xu2jcg-o_O-base_1pupywz-o_O-focused_2hwz1v"
+              class="default_xu2jcg-o_O-base_1pupywz"
             >
               <div
                 class="default_xu2jcg-o_O-innerBox_qdbgl3"
diff --git a/packages/math-input/src/components/tabbar/__tests__/item.test.tsx b/packages/math-input/src/components/tabbar/__tests__/item.test.tsx
index f8ebf6fa32..9c301320cf 100644
--- a/packages/math-input/src/components/tabbar/__tests__/item.test.tsx
+++ b/packages/math-input/src/components/tabbar/__tests__/item.test.tsx
@@ -47,6 +47,7 @@ describe("<TabbarItem />", () => {
 
     it("can set focus when focus is enabled", async () => {
         // Arrange
+        jest.useFakeTimers();
         render(
             <TabbarItem
                 itemType="Numbers"
@@ -56,6 +57,7 @@ describe("<TabbarItem />", () => {
                 onClick={() => {}}
             />,
         );
+        jest.runAllTimers();
 
         // Assert
         expect(screen.getByRole("tab", {name: "Numbers"})).toHaveFocus();