@khanacademy/math-input 19.1.0 → 19.2.1

package/dist/index.js

@@ -44,7 +44,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // 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.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -2659,41 +2659,65 @@ function imageTintColor(itemState, hovered, focused, pressed) {
   }
   return wonderBlocksTokens.color.offBlack64;
 }
-class TabbarItem extends React__namespace.Component {
-  render() {
-    const {
-      onClick,
-      itemType,
-      itemState
-    } = this.props;
-    return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-      onClick: onClick,
-      disabled: itemState === "disabled",
-      "aria-label": itemType,
-      style: styles$6.clickable,
-      "aria-selected": itemState === "active",
-      role: "tab"
-    }, _ref => {
-      let {
-        hovered,
-        focused,
-        pressed
-      } = _ref;
-      const tintColor = imageTintColor(itemState, hovered, focused, pressed);
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$6.base, itemState !== "disabled" && hovered && styles$6.hovered, focused && styles$6.focused, pressed && styles$6.pressed]
-      }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$6.innerBox, pressed && styles$6.innerBoxPressed]
-      }, /*#__PURE__*/React__namespace.createElement(IconAsset, {
-        type: itemType,
-        tintColor: tintColor
-      })), itemState === "active" && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: [styles$6.activeIndicator, {
-          backgroundColor: tintColor
-        }]
-      }));
-    });
-  }
+function TabbarItem(props) {
+  const {
+    onClick,
+    itemType,
+    itemState,
+    focus,
+    role
+  } = props;
+  const tabRef = React.useRef(null);
+  React.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?.current) {
+          // Move element into view when it is focused
+          tabRef?.current.focus();
+        }
+      }, 0);
+    }
+    return () => clearTimeout(timeout);
+  }, [role, focus, tabRef]);
+  return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
+    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
+  }, _ref => {
+    let {
+      hovered,
+      focused,
+      pressed
+    } = _ref;
+    const tintColor = imageTintColor(itemState, hovered, focused, pressed);
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$6.base, itemState !== "disabled" && hovered && styles$6.hovered, focused && styles$6.focused, pressed && styles$6.pressed]
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$6.innerBox, pressed && styles$6.innerBoxPressed]
+    }, /*#__PURE__*/React__namespace.createElement(IconAsset, {
+      type: itemType,
+      tintColor: tintColor
+    })), itemState === "active" && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$6.activeIndicator, {
+        backgroundColor: tintColor
+      }]
+    }));
+  });
 }
 
 const styles$5 = aphrodite.StyleSheet.create({
@@ -2717,19 +2741,42 @@ function Tabbar(props) {
     onSelectItem,
     style
   } = props;
+  const selectedIndex = items.indexOf(selectedItem);
+  const [focus, setFocus] = React.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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$5.tabbar, style],
-    role: "tablist"
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$5.pages]
-  }, items.map(item => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
+    style: [styles$5.tabbar, style]
+  }, items.length > 0 && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$5.pages],
+    role: "tablist",
+    onKeyDown: onArrowKeyFocus
+  }, items.map((item, index) => /*#__PURE__*/React__namespace.createElement(TabbarItem, {
+    role: "tab",
     key: `tabbar-item-${item}`,
     itemState: item === selectedItem ? "active" : "inactive",
     itemType: item,
+    focus: focus === index,
     onClick: () => {
       onSelectItem(item);
     }
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, onClickClose && /*#__PURE__*/React__namespace.createElement(TabbarItem, {
+    role: "button",
     itemState: "inactive",
     itemType: "Dismiss",
     onClick: onClickClose
@@ -5587,7 +5634,6 @@ function Keypad(props) {
     style: styles$1.keypadInnerContainer
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles$1.keypadGrid, gridStyle],
-    tabIndex: 0,
     "aria-label": "Keypad"
   }, selectedPage === "Fractions" && /*#__PURE__*/React__namespace.createElement(FractionsPage, {
     onClickKey: onClickKey,