@khanacademy/math-input 19.1.0 → 19.2.0

package/dist/components/tabbar/item.d.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { KeypadPageType } from "../../types";
 export type ItemState = "active" | "inactive" | "disabled";
-type Props = {
+type TabItemProps = {
     onClick: () => void;
     itemState: ItemState;
     itemType: KeypadPageType;
+    focus?: boolean;
+    role: "tab" | "button";
 };
-declare class TabbarItem extends React.Component<Props> {
-    render(): React.ReactNode;
-}
+declare function TabbarItem(props: TabItemProps): React.ReactElement;
 export declare const TabbarItemForTesting: typeof TabbarItem;
 export default TabbarItem;

package/dist/es/index.js

@@ -3,7 +3,7 @@ import { color } from '@khanacademy/wonder-blocks-tokens';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
-import { useContext, useState, useMemo, useEffect } from 'react';
+import { useContext, useState, useMemo, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { SpeechRuleEngine } from '@khanacademy/mathjax-renderer';
 import MathQuill from 'mathquill';
@@ -15,7 +15,7 @@ import PropTypes from 'prop-types';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "19.1.0";
+const libVersion = "19.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -2599,40 +2599,64 @@ function imageTintColor(itemState, hovered, focused, pressed) {
   }
   return color.offBlack64;
 }
-class TabbarItem extends React.Component {
-  render() {
-    const {
-      onClick,
-      itemType,
-      itemState
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Clickable, {
-      onClick: onClick,
-      disabled: itemState === "disabled",
-      "aria-label": itemType,
-      style: styles$6.clickable,
-      "aria-selected": itemState === "active",
-      role: "tab"
-    }, ({
-      hovered,
-      focused,
-      pressed
-    }) => {
-      const tintColor = imageTintColor(itemState, hovered, focused, pressed);
-      return /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$6.base, itemState !== "disabled" && hovered && styles$6.hovered, focused && styles$6.focused, pressed && styles$6.pressed]
-      }, /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$6.innerBox, pressed && styles$6.innerBoxPressed]
-      }, /*#__PURE__*/React.createElement(IconAsset, {
-        type: itemType,
-        tintColor: tintColor
-      })), itemState === "active" && /*#__PURE__*/React.createElement(View$1, {
-        style: [styles$6.activeIndicator, {
-          backgroundColor: tintColor
-        }]
-      }));
-    });
-  }
+function TabbarItem(props) {
+  const {
+    onClick,
+    itemType,
+    itemState,
+    focus,
+    role
+  } = props;
+  const tabRef = useRef(null);
+  useEffect(() => {
+    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 != null && tabRef.current) {
+          // Move element into view when it is focused
+          tabRef == null || tabRef.current.focus();
+        }
+      }, 0);
+    }
+    return () => clearTimeout(timeout);
+  }, [role, focus, tabRef]);
+  return /*#__PURE__*/React.createElement(Clickable, {
+    onClick: onClick,
+    disabled: itemState === "disabled",
+    "aria-label": itemType,
+    style: styles$6.clickable,
+    "aria-selected": itemState === "active",
+    tabIndex: role === "button" ? 0 : focus ? 0 : -1,
+    role: role,
+    ref: tabRef
+  }, ({
+    hovered,
+    focused,
+    pressed
+  }) => {
+    const tintColor = imageTintColor(itemState, hovered, focused, pressed);
+    return /*#__PURE__*/React.createElement(View$1, {
+      style: [styles$6.base, itemState !== "disabled" && hovered && styles$6.hovered, focused && styles$6.focused, pressed && styles$6.pressed]
+    }, /*#__PURE__*/React.createElement(View$1, {
+      style: [styles$6.innerBox, pressed && styles$6.innerBoxPressed]
+    }, /*#__PURE__*/React.createElement(IconAsset, {
+      type: itemType,
+      tintColor: tintColor
+    })), itemState === "active" && /*#__PURE__*/React.createElement(View$1, {
+      style: [styles$6.activeIndicator, {
+        backgroundColor: tintColor
+      }]
+    }));
+  });
 }
 
 const styles$5 = StyleSheet.create({
@@ -2656,19 +2680,42 @@ function Tabbar(props) {
     onSelectItem,
     style
   } = props;
+  const selectedIndex = items.indexOf(selectedItem);
+  const [focus, setFocus] = useState(selectedIndex === -1 ? 0 : selectedIndex);
+  /**
+   * 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 => {
+    if (e.keyCode === 39) {
+      // Right arrow
+      setFocus(focus === items.length - 1 ? 0 : focus + 1);
+    } else if (e.keyCode === 37) {
+      // Left arrow
+      setFocus(focus === 0 ? items.length - 1 : focus - 1);
+    }
+  };
   return /*#__PURE__*/React.createElement(View$1, {
-    style: [styles$5.tabbar, style],
-    role: "tablist"
-  }, /*#__PURE__*/React.createElement(View$1, {
-    style: [styles$5.pages]
-  }, items.map(item => /*#__PURE__*/React.createElement(TabbarItem, {
+    style: [styles$5.tabbar, style]
+  }, items.length > 0 && /*#__PURE__*/React.createElement(View$1, {
+    style: [styles$5.pages],
+    role: "tablist",
+    onKeyDown: onArrowKeyFocus
+  }, items.map((item, index) => /*#__PURE__*/React.createElement(TabbarItem, {
+    role: "tab",
     key: `tabbar-item-${item}`,
     itemState: item === selectedItem ? "active" : "inactive",
     itemType: item,
+    focus: focus === index,
     onClick: () => {
       onSelectItem(item);
     }
   }))), /*#__PURE__*/React.createElement(View$1, null, onClickClose && /*#__PURE__*/React.createElement(TabbarItem, {
+    role: "button",
     itemState: "inactive",
     itemType: "Dismiss",
     onClick: onClickClose
@@ -5282,7 +5329,6 @@ function Keypad(props) {
     style: styles$1.keypadInnerContainer
   }, /*#__PURE__*/React.createElement(View$1, {
     style: [styles$1.keypadGrid, gridStyle],
-    tabIndex: 0,
     "aria-label": "Keypad"
   }, selectedPage === "Fractions" && /*#__PURE__*/React.createElement(FractionsPage, {
     onClickKey: onClickKey,