@khanacademy/math-input 4.3.0 → 5.0.0

package/src/components/keypad/index.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 
 import Key from "../../data/keys";
 import {ClickKeyCallback} from "../../types";
+import {CursorContext} from "../input/cursor-contexts";
 import Tabbar from "../tabbar/tabbar";
 import {TabbarItemType} from "../tabbar/types";
 
@@ -14,8 +15,11 @@ import NumbersPage from "./keypad-pages/numbers-page";
 import OperatorsPage from "./keypad-pages/operators-page";
 import SharedKeys from "./shared-keys";
 
+import type {SendEventFn} from "@khanacademy/perseus-core";
+
 export type Props = {
     onClickKey: ClickKeyCallback;
+    cursorContext?: CursorContext;
     trigonometry?: boolean;
     extraKeys: ReadonlyArray<Key>;
     multiplicationDot?: boolean;
@@ -24,6 +28,12 @@ export type Props = {
     logarithms?: boolean;
     basicRelations?: boolean;
     advancedRelations?: boolean;
+
+    sendEvent: SendEventFn;
+};
+
+const defaultProps = {
+    extraKeys: [],
 };
 
 function allPages(props: Props): ReadonlyArray<TabbarItemType> {
@@ -50,6 +60,8 @@ function allPages(props: Props): ReadonlyArray<TabbarItemType> {
     return pages;
 }
 
+// The main (v2) Keypad. Use this component to present an accessible, onscreen
+// keypad to learners for entering math expressions.
 export default function Keypad(props: Props) {
     const [selectedPage, setSelectedPage] =
         React.useState<TabbarItemType>("Numbers");
@@ -58,7 +70,8 @@ export default function Keypad(props: Props) {
 
     const {
         onClickKey,
-        extraKeys = [],
+        cursorContext,
+        extraKeys,
         multiplicationDot,
         divisionKey,
         preAlgebra,
@@ -76,9 +89,15 @@ export default function Keypad(props: Props) {
                     setSelectedPage(tabbarItem);
                 }}
                 style={styles.tabbar}
+                onClickClose={() => onClickKey("DISMISS")}
             />
 
-            <View style={styles.grid}>
+            <View
+                style={styles.grid}
+                role="grid"
+                tabIndex={0}
+                aria-label="Keypad"
+            >
                 {selectedPage === "Numbers" && (
                     <NumbersPage onClickKey={onClickKey} />
                 )}
@@ -99,14 +118,18 @@ export default function Keypad(props: Props) {
                 )}
                 <SharedKeys
                     onClickKey={onClickKey}
+                    cursorContext={cursorContext}
                     multiplicationDot={multiplicationDot}
                     divisionKey={divisionKey}
+                    selectedPage={selectedPage}
                 />
             </View>
         </View>
     );
 }
 
+Keypad.defaultProps = defaultProps;
+
 const styles = StyleSheet.create({
     tabbar: {
         background: Color.white,

package/src/components/keypad/keypad-mathquill.stories.tsx

@@ -3,6 +3,8 @@ import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import * as React from "react";
 
 import Key from "../../data/keys";
+import {CursorContext} from "../input/cursor-contexts";
+import {getCursorContext} from "../input/mathquill-helpers";
 import {createMathField} from "../input/mathquill-instance";
 import {MathFieldInterface} from "../input/mathquill-types";
 import keyTranslator from "../key-handlers/key-translator";
@@ -16,11 +18,22 @@ export default {
 export function V2KeypadWithMathquill() {
     const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
     const [mathField, setMathField] = React.useState<MathFieldInterface>();
+    const [cursorContext, setCursorContext] = React.useState<CursorContext>(
+        CursorContext.NONE,
+    );
 
     React.useEffect(() => {
         if (!mathField && mathFieldWrapperRef.current) {
             const mathFieldInstance = createMathField(
                 mathFieldWrapperRef.current,
+                (baseConfig) => ({
+                    ...baseConfig,
+                    handlers: {
+                        edit: (_mathField) => {
+                            setCursorContext(getCursorContext(_mathField));
+                        },
+                    },
+                }),
             );
             setMathField(mathFieldInstance);
         }
@@ -34,6 +47,7 @@ export function V2KeypadWithMathquill() {
         const mathFieldCallback = keyTranslator[key];
         if (mathFieldCallback) {
             mathFieldCallback(mathField, key);
+            setCursorContext(getCursorContext(mathField));
         } else {
             // eslint-disable-next-line no-console
             console.warn(`No translation to Mathquill for: ${key}`);
@@ -51,8 +65,9 @@ export function V2KeypadWithMathquill() {
                         }}
                     >
                         <Keypad
-                            extraKeys={["a", "b", "c"]}
+                            extraKeys={["x", "y", "PI", "THETA"]}
                             onClickKey={handleClickKey}
+                            cursorContext={cursorContext}
                             advancedRelations
                             basicRelations
                             divisionKey
@@ -60,6 +75,10 @@ export function V2KeypadWithMathquill() {
                             multiplicationDot
                             preAlgebra
                             trigonometry
+                            sendEvent={async (event) => {
+                                // eslint-disable-next-line no-console
+                                console.log("Send Event:", event);
+                            }}
                         />
                     </PopoverContentCore>
                 }

package/src/components/keypad/keypad-pages/extras-page.tsx

@@ -10,7 +10,7 @@ type Props = {
     onClickKey: ClickKeyCallback;
 };
 
-const columns = 4;
+const columns = 3;
 
 export default function ExtrasPage(props: Props) {
     const {extraKeys, onClickKey} = props;

package/src/components/keypad/keypad-pages/numbers-page.tsx

@@ -10,26 +10,29 @@ type Props = {
 
 export default function NumbersPage(props: Props) {
     const {onClickKey} = props;
+    // These keys are arranged sequentially so that tabbing follows numerical order. This
+    // allows us to visually mimic a keypad without affecting a11y. The visual order of the
+    // keys in the keypad is determined by their coordinates, not their order in the DOM.
     return (
         <>
-            {/* Row 1 */}
+            {/* Row 4 */}
             <KeypadButton
-                keyConfig={Keys.NUM_7}
+                keyConfig={Keys.NUM_1}
                 onClickKey={onClickKey}
-                coord={[0, 0]}
+                coord={[0, 2]}
             />
             <KeypadButton
-                keyConfig={Keys.NUM_8}
+                keyConfig={Keys.NUM_2}
                 onClickKey={onClickKey}
-                coord={[1, 0]}
+                coord={[1, 2]}
             />
             <KeypadButton
-                keyConfig={Keys.NUM_9}
+                keyConfig={Keys.NUM_3}
                 onClickKey={onClickKey}
-                coord={[2, 0]}
+                coord={[2, 2]}
             />
 
-            {/* Row 2 */}
+            {/* Row 3 */}
             <KeypadButton
                 keyConfig={Keys.NUM_4}
                 onClickKey={onClickKey}
@@ -46,24 +49,24 @@ export default function NumbersPage(props: Props) {
                 coord={[2, 1]}
             />
 
-            {/* Row 3 */}
+            {/* Row 2 */}
             <KeypadButton
-                keyConfig={Keys.NUM_1}
+                keyConfig={Keys.NUM_7}
                 onClickKey={onClickKey}
-                coord={[0, 2]}
+                coord={[0, 0]}
             />
             <KeypadButton
-                keyConfig={Keys.NUM_2}
+                keyConfig={Keys.NUM_8}
                 onClickKey={onClickKey}
-                coord={[1, 2]}
+                coord={[1, 0]}
             />
             <KeypadButton
-                keyConfig={Keys.NUM_3}
+                keyConfig={Keys.NUM_9}
                 onClickKey={onClickKey}
-                coord={[2, 2]}
+                coord={[2, 0]}
             />
 
-            {/* Row 4 */}
+            {/* Row 1 */}
             <KeypadButton
                 keyConfig={Keys.NUM_0}
                 onClickKey={onClickKey}
@@ -79,6 +82,12 @@ export default function NumbersPage(props: Props) {
                 onClickKey={onClickKey}
                 coord={[2, 3]}
             />
+            <KeypadButton
+                keyConfig={Keys.PERCENT}
+                onClickKey={onClickKey}
+                coord={[3, 0]}
+                secondary
+            />
         </>
     );
 }

package/src/components/keypad/keypad.stories.tsx

@@ -89,3 +89,14 @@ Trigonometry.args = {
     preAlgebra: true,
     trigonometry: true,
 };
+
+export const Everything = Template.bind({});
+Everything.args = {
+    advancedRelations: true,
+    basicRelations: true,
+    divisionKey: true,
+    logarithms: true,
+    multiplicationDot: false,
+    preAlgebra: true,
+    trigonometry: true,
+};

package/src/components/keypad/shared-keys.tsx

@@ -2,21 +2,61 @@ import * as React from "react";
 
 import Keys from "../../data/key-configs";
 import {ClickKeyCallback} from "../../types";
+import {CursorContext} from "../input/cursor-contexts";
+import {TabbarItemType} from "../tabbar/types";
 
 import {KeypadButton} from "./keypad-button";
 
 type Props = {
     onClickKey: ClickKeyCallback;
+    selectedPage: TabbarItemType;
+    cursorContext?: CursorContext;
     multiplicationDot?: boolean;
     divisionKey?: boolean;
 };
 
+function getCursorContextConfig(cursorContext?: CursorContext) {
+    if (!cursorContext) {
+        return null;
+    }
+
+    switch (cursorContext) {
+        case CursorContext.NONE:
+            return null;
+        case CursorContext.IN_PARENS:
+            return Keys.JUMP_OUT_PARENTHESES;
+        case CursorContext.IN_SUPER_SCRIPT:
+            return Keys.JUMP_OUT_EXPONENT;
+        case CursorContext.IN_SUB_SCRIPT:
+            return Keys.JUMP_OUT_BASE;
+        case CursorContext.IN_NUMERATOR:
+            return Keys.JUMP_OUT_NUMERATOR;
+        case CursorContext.IN_DENOMINATOR:
+            return Keys.JUMP_OUT_DENOMINATOR;
+        case CursorContext.BEFORE_FRACTION:
+            return Keys.JUMP_INTO_NUMERATOR;
+    }
+}
+
 export default function SharedKeys(props: Props) {
-    const {onClickKey, divisionKey, multiplicationDot} = props;
+    const {
+        onClickKey,
+        cursorContext,
+        divisionKey,
+        multiplicationDot,
+        selectedPage,
+    } = props;
+
+    const cursorKeyConfig = getCursorContextConfig(cursorContext);
+
+    // Fraction position depends on the page
+    const fractionCoord: readonly [number, number] =
+        selectedPage === "Numbers" || selectedPage === "Operators"
+            ? [3, 1]
+            : [3, 0];
 
     return (
         <>
-            {/* Row 1 */}
             <KeypadButton
                 keyConfig={Keys.PLUS}
                 onClickKey={onClickKey}
@@ -29,6 +69,12 @@ export default function SharedKeys(props: Props) {
                 coord={[5, 0]}
                 secondary
             />
+            <KeypadButton
+                keyConfig={Keys.FRAC_INCLUSIVE}
+                onClickKey={onClickKey}
+                coord={fractionCoord}
+                secondary
+            />
 
             {/* Row 2 */}
             <KeypadButton
@@ -61,12 +107,14 @@ export default function SharedKeys(props: Props) {
             />
 
             {/* Row 4 */}
-            <KeypadButton
-                keyConfig={Keys.FRAC_INCLUSIVE}
-                onClickKey={onClickKey}
-                coord={[4, 3]}
-                secondary
-            />
+            {cursorKeyConfig && (
+                <KeypadButton
+                    keyConfig={cursorKeyConfig}
+                    onClickKey={onClickKey}
+                    coord={[4, 3]}
+                    secondary
+                />
+            )}
             <KeypadButton
                 keyConfig={Keys.BACKSPACE}
                 onClickKey={onClickKey}

package/src/components/tabbar/__tests__/tabbar.test.tsx

@@ -17,9 +17,7 @@ describe("<Tabbar />", () => {
         );
 
         // Assert
-        expect(
-            screen.getByRole("button", {name: "Numbers"}),
-        ).toBeInTheDocument();
+        expect(screen.getByRole("tab", {name: "Numbers"})).toBeInTheDocument();
     });
 
     it("renders many tabs", () => {
@@ -33,17 +31,11 @@ describe("<Tabbar />", () => {
         );
 
         // Assert
+        expect(screen.getByRole("tab", {name: "Numbers"})).toBeInTheDocument();
+        expect(screen.getByRole("tab", {name: "Extras"})).toBeInTheDocument();
+        expect(screen.getByRole("tab", {name: "Geometry"})).toBeInTheDocument();
         expect(
-            screen.getByRole("button", {name: "Numbers"}),
-        ).toBeInTheDocument();
-        expect(
-            screen.getByRole("button", {name: "Extras"}),
-        ).toBeInTheDocument();
-        expect(
-            screen.getByRole("button", {name: "Geometry"}),
-        ).toBeInTheDocument();
-        expect(
-            screen.getByRole("button", {name: "Operators"}),
+            screen.getByRole("tab", {name: "Operators"}),
         ).toBeInTheDocument();
     });
 
@@ -59,7 +51,55 @@ describe("<Tabbar />", () => {
         );
 
         // Assert
-        userEvent.click(screen.getByRole("button", {name: "Geometry"}));
+        userEvent.click(screen.getByRole("tab", {name: "Geometry"}));
         expect(mockSelectCallback).toHaveBeenCalledWith("Geometry");
     });
+
+    it("shows dismiss button with a onClickClose callback", () => {
+        // Arrange
+        render(
+            <Tabbar
+                items={["Numbers"]}
+                selectedItem={"Numbers"}
+                onSelectItem={() => {}}
+                onClickClose={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByRole("tab", {name: "Dismiss"})).toBeInTheDocument();
+    });
+
+    it("does not show dismiss button without onClickClose callback", () => {
+        // Arrange
+        render(
+            <Tabbar
+                items={["Numbers"]}
+                selectedItem={"Numbers"}
+                onSelectItem={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.queryByRole("tab", {name: "Dismiss"}),
+        ).not.toBeInTheDocument();
+    });
+
+    it("handles onClickClose callback", () => {
+        // Arrange
+        const mockClickCloseCallback = jest.fn();
+        render(
+            <Tabbar
+                items={["Numbers", "Geometry"]}
+                selectedItem={"Numbers"}
+                onSelectItem={() => {}}
+                onClickClose={mockClickCloseCallback}
+            />,
+        );
+
+        // Assert
+        userEvent.click(screen.getByRole("tab", {name: "Dismiss"}));
+        expect(mockClickCloseCallback).toHaveBeenCalled();
+    });
 });

package/src/components/tabbar/icons.tsx

@@ -21,7 +21,7 @@ const IconAsset = function ({tintColor, type}: Props): React.ReactElement {
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
-                        d="M7.57584 7.09442C7.92723 6.92984 8.3421 6.98339 8.64018 7.23179L26.6402 22.2318C26.9636 22.5013 27.0836 22.9446 26.9403 23.3404C26.7969 23.7363 26.421 24 26 24H8C7.44772 24 7 23.5523 7 23V8.00001C7 7.61199 7.22446 7.259 7.57584 7.09442ZM9 10.1351V17H13C13.5523 17 14 17.4477 14 18V22H23.238L9 10.1351ZM12 22V19H9V22H12Z"
+                        d="M7.57584 7.09442c.35139-.16458.76626-.11103 1.06434.13737L26.6402 22.2318c.3234.2695.4434.7128.3001 1.1086C26.7969 23.7363 26.421 24 26 24H8c-.55228 0-1-.4477-1-1V8.00001c0-.38802.22446-.74101.57584-.90559zM9 10.1351V17h4c.5523 0 1 .4477 1 1v4h9.238L9 10.1351zM12 22v-3H9v3h3z"
                         fill={tintColor}
                     />
                 </svg>
@@ -30,6 +30,8 @@ const IconAsset = function ({tintColor, type}: Props): React.ReactElement {
         case "Operators": {
             return (
                 <svg
+                    width="32"
+                    height="32"
                     viewBox="0 0 32 32"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +39,7 @@ const IconAsset = function ({tintColor, type}: Props): React.ReactElement {
                     <path
                         fillRule="evenodd"
                         clipRule="evenodd"
-                        d="M29 6H30V7H29V6ZM27 6C27 4.89543 27.8954 4 29 4H30C31.1046 4 32 4.89543 32 6V7C32 8.10457 31.1046 9 30 9H29C27.8954 9 27 8.10457 27 7V6ZM11.1318 6.50386C11.3098 6.19229 11.6411 6 12 6H14C14.5523 6 15 6.44772 15 7C15 7.55228 14.5523 8 14 8H12.5803L8.86824 14.4961C8.68527 14.8163 8.34091 15.0098 7.97225 14.9996C7.6036 14.9894 7.2705 14.7771 7.10557 14.4472L5.10557 10.4472C4.85858 9.95324 5.05881 9.35256 5.55279 9.10557C6.04676 8.85858 6.64744 9.05881 6.89443 9.55279L8.0588 11.8815L11.1318 6.50386ZM7.70676 16.2925C8.09748 16.6829 8.09779 17.316 7.70745 17.7068C7.28543 18.1292 6.84383 18.7303 6.51157 19.3658C6.17039 20.0184 6 20.601 6 21C6 21.3789 6.17235 21.9897 6.51638 22.6649C6.85315 23.3259 7.28488 23.9121 7.66786 24.2557C8.07892 24.6246 8.11314 25.2568 7.74429 25.6679C7.37544 26.0789 6.7432 26.1131 6.33214 25.7443C5.7161 25.1915 5.14783 24.3844 4.73434 23.5728C4.32813 22.7755 3.99999 21.8345 4 21C4.00001 20.1391 4.3301 19.2217 4.73917 18.4392C5.15715 17.6397 5.71554 16.8708 6.29255 16.2932C6.68288 15.9025 7.31605 15.9022 7.70676 16.2925ZM11.2932 16.2925C11.684 15.9022 12.3171 15.9025 12.7075 16.2932C13.2845 16.8708 13.8428 17.6397 14.2608 18.4392C14.6699 19.2217 15 20.1391 15 21C15 21.8345 14.6719 22.7755 14.2657 23.5728C13.8522 24.3844 13.2839 25.1915 12.6679 25.7443C12.2568 26.1131 11.6246 26.0789 11.2557 25.6679C10.8869 25.2568 10.9211 24.6246 11.3321 24.2557C11.7151 23.9121 12.1469 23.3259 12.4836 22.6649C12.8276 21.9897 13 21.3789 13 21C13 20.601 12.8296 20.0184 12.4884 19.3658C12.1562 18.7303 11.7146 18.1292 11.2925 17.7068C10.9022 17.316 10.9025 16.6829 11.2932 16.2925ZM27.9363 17.6489C28.1302 18.166 27.8682 18.7424 27.3511 18.9363L21.848 21L27.3511 23.0637C27.8682 23.2576 28.1302 23.834 27.9363 24.3511C27.7424 24.8682 27.166 25.1302 26.6489 24.9363L18.6489 21.9363C18.2586 21.79 18 21.4168 18 21C18 20.5832 18.2586 20.21 18.6489 20.0637L26.6489 17.0637C27.166 16.8698 27.7424 17.1318 27.9363 17.6489ZM21 8V13H24V8H21ZM20 6C19.4477 6 19 6.44772 19 7V14C19 14.5523 19.4477 15 20 15H25C25.5523 15 26 14.5523 26 14V7C26 6.44772 25.5523 6 25 6H20Z"
+                        d="M29 6h1v1h-1V6zm-2 0c0-1.10457.8954-2 2-2h1c1.1046 0 2 .89543 2 2v1c0 1.10457-.8954 2-2 2h-1c-1.1046 0-2-.89543-2-2V6zm-15.8682.50386C11.3098 6.19229 11.6411 6 12 6h2c.5523 0 1 .44772 1 1s-.4477 1-1 1h-1.4197l-3.71206 6.4961c-.18297.3202-.52733.5137-.89599.5035-.36865-.0102-.70175-.2225-.86668-.5524l-2-4c-.24699-.49396-.04676-1.09464.44722-1.34163.49397-.24699 1.09465-.04676 1.34164.44722L8.0588 11.8815l3.073-5.37764zM7.70676 16.2925c.39072.3904.39103 1.0235.00069 1.4143-.42202.4224-.86362 1.0235-1.19588 1.659C6.17039 20.0184 6 20.601 6 21c0 .3789.17235.9897.51638 1.6649.33677.661.7685 1.2472 1.15148 1.5908.41106.3689.44528 1.0011.07643 1.4122-.36885.411-1.00109.4452-1.41215.0764-.61604-.5528-1.18431-1.3599-1.5978-2.1715C4.32813 22.7755 3.99999 21.8345 4 21c.00001-.8609.3301-1.7783.73917-2.5608.41798-.7995.97637-1.5684 1.55338-2.146.39033-.3907 1.0235-.391 1.41421-.0007zm3.58644 0c.3908-.3903 1.0239-.39 1.4143.0007.577.5776 1.1353 1.3465 1.5533 2.146C14.6699 19.2217 15 20.1391 15 21c0 .8345-.3281 1.7755-.7343 2.5728-.4135.8116-.9818 1.6187-1.5978 2.1715-.4111.3688-1.0433.3346-1.4122-.0764-.3688-.4111-.3346-1.0433.0764-1.4122.383-.3436.8148-.9298 1.1515-1.5908.344-.6752.5164-1.286.5164-1.6649 0-.399-.1704-.9816-.5116-1.6342-.3322-.6355-.7738-1.2366-1.1959-1.659-.3903-.3908-.39-1.0239.0007-1.4143zm16.6431 1.3564c.1939.5171-.0681 1.0935-.5852 1.2874L21.848 21l5.5031 2.0637c.5171.1939.7791.7703.5852 1.2874-.1939.5171-.7703.7791-1.2874.5852l-8-3C18.2586 21.79 18 21.4168 18 21c0-.4168.2586-.79.6489-.9363l8-3c.5171-.1939 1.0935.0681 1.2874.5852zM21 8v5h3V8h-3zm-1-2c-.5523 0-1 .44772-1 1v7c0 .5523.4477 1 1 1h5c.5523 0 1-.4477 1-1V7c0-.55228-.4477-1-1-1h-5z"
                         fill={tintColor}
                     />
                 </svg>
@@ -53,7 +55,7 @@ const IconAsset = function ({tintColor, type}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        d="M10.4123 19.5794V21.0004H4.71434V19.5794H6.73034V14.0214C6.73034 13.9001 6.73267 13.7764 6.73734 13.6504C6.742 13.5244 6.749 13.3961 6.75834 13.2654L5.42834 14.3714C5.335 14.4414 5.244 14.4858 5.15534 14.5044C5.06667 14.5231 4.98267 14.5254 4.90334 14.5114C4.824 14.4928 4.754 14.4648 4.69334 14.4274C4.63267 14.3854 4.586 14.3434 4.55334 14.3014L3.94434 13.4824L7.06634 10.8364H8.65534V19.5794H10.4123ZM18.7924 19.2294C19.0024 19.2294 19.1658 19.2878 19.2824 19.4044C19.4038 19.5211 19.4644 19.6751 19.4644 19.8664V21.0004H12.4224V20.3704C12.4224 20.2491 12.4481 20.1184 12.4994 19.9784C12.5508 19.8338 12.6371 19.7031 12.7584 19.5864L15.7684 16.5694C16.0251 16.3128 16.2514 16.0678 16.4474 15.8344C16.6434 15.5964 16.8068 15.3654 16.9374 15.1414C17.0681 14.9128 17.1661 14.6818 17.2314 14.4484C17.2968 14.2151 17.3294 13.9701 17.3294 13.7134C17.3294 13.2608 17.2128 12.9178 16.9794 12.6844C16.7461 12.4464 16.4171 12.3274 15.9924 12.3274C15.8058 12.3274 15.6331 12.3554 15.4744 12.4114C15.3204 12.4628 15.1804 12.5351 15.0544 12.6284C14.9331 12.7218 14.8281 12.8314 14.7394 12.9574C14.6508 13.0834 14.5854 13.2211 14.5434 13.3704C14.4594 13.6038 14.3451 13.7601 14.2004 13.8394C14.0604 13.9141 13.8598 13.9304 13.5984 13.8884L12.5764 13.7064C12.6511 13.2118 12.7911 12.7778 12.9964 12.4044C13.2018 12.0311 13.4584 11.7208 13.7664 11.4734C14.0744 11.2261 14.4268 11.0418 14.8234 10.9204C15.2201 10.7944 15.6471 10.7314 16.1044 10.7314C16.5851 10.7314 17.0214 10.8038 17.4134 10.9484C17.8101 11.0884 18.1484 11.2868 18.4284 11.5434C18.7084 11.7954 18.9254 12.1011 19.0794 12.4604C19.2334 12.8198 19.3104 13.2164 19.3104 13.6504C19.3104 14.0238 19.2568 14.3691 19.1494 14.6864C19.0421 15.0038 18.8951 15.3071 18.7084 15.5964C18.5264 15.8811 18.3141 16.1588 18.0714 16.4294C17.8288 16.7001 17.5721 16.9731 17.3014 17.2484L15.1454 19.4534C15.3834 19.3834 15.6191 19.3298 15.8524 19.2924C16.0858 19.2504 16.3051 19.2294 16.5104 19.2294H18.7924ZM21.4535 13.7064C21.5282 13.2118 21.6682 12.7778 21.8735 12.4044C22.0789 12.0311 22.3355 11.7208 22.6435 11.4734C22.9515 11.2261 23.3015 11.0418 23.6935 10.9204C24.0902 10.7944 24.5172 10.7314 24.9745 10.7314C25.4599 10.7314 25.8939 10.8014 26.2765 10.9414C26.6639 11.0768 26.9905 11.2634 27.2565 11.5014C27.5225 11.7394 27.7255 12.0171 27.8655 12.3344C28.0102 12.6518 28.0825 12.9924 28.0825 13.3564C28.0825 13.6784 28.0475 13.9631 27.9775 14.2104C27.9122 14.4531 27.8119 14.6654 27.6765 14.8474C27.5459 15.0294 27.3825 15.1834 27.1865 15.3094C26.9952 15.4354 26.7735 15.5404 26.5215 15.6244C27.6882 16.0071 28.2715 16.7841 28.2715 17.9554C28.2715 18.4734 28.1759 18.9308 27.9845 19.3274C27.7932 19.7194 27.5365 20.0484 27.2145 20.3144C26.8925 20.5804 26.5169 20.7811 26.0875 20.9164C25.6629 21.0471 25.2172 21.1124 24.7505 21.1124C24.2559 21.1124 23.8195 21.0564 23.4415 20.9444C23.0635 20.8324 22.7299 20.6644 22.4405 20.4404C22.1559 20.2164 21.9109 19.9364 21.7055 19.6004C21.5002 19.2598 21.3205 18.8631 21.1665 18.4104L22.0205 18.0604C22.2445 17.9671 22.4522 17.9414 22.6435 17.9834C22.8395 18.0254 22.9795 18.1281 23.0635 18.2914C23.1569 18.4688 23.2549 18.6321 23.3575 18.7814C23.4649 18.9308 23.5839 19.0614 23.7145 19.1734C23.8452 19.2808 23.9922 19.3648 24.1555 19.4254C24.3235 19.4861 24.5149 19.5164 24.7295 19.5164C25.0002 19.5164 25.2359 19.4721 25.4365 19.3834C25.6372 19.2948 25.8052 19.1804 25.9405 19.0404C26.0759 18.8958 26.1762 18.7348 26.2415 18.5574C26.3115 18.3754 26.3465 18.1958 26.3465 18.0184C26.3465 17.7851 26.3255 17.5751 26.2835 17.3884C26.2415 17.1971 26.1435 17.0361 25.9895 16.9054C25.8402 16.7701 25.6162 16.6674 25.3175 16.5974C25.0235 16.5228 24.6222 16.4854 24.1135 16.4854V15.1274C24.5382 15.1274 24.8859 15.0924 25.1565 15.0224C25.4272 14.9524 25.6395 14.8544 25.7935 14.7284C25.9475 14.6024 26.0525 14.4508 26.1085 14.2734C26.1692 14.0961 26.1995 13.9024 26.1995 13.6924C26.1995 13.2491 26.0829 12.9108 25.8495 12.6774C25.6209 12.4441 25.2942 12.3274 24.8695 12.3274C24.6829 12.3274 24.5102 12.3554 24.3515 12.4114C24.1975 12.4628 24.0575 12.5351 23.9315 12.6284C23.8102 12.7218 23.7052 12.8314 23.6165 12.9574C23.5279 13.0834 23.4625 13.2211 23.4205 13.3704C23.3319 13.6038 23.2175 13.7601 23.0775 13.8394C22.9375 13.9141 22.7345 13.9304 22.4685 13.8884L21.4535 13.7064Z"
+                        d="M10.4123 19.5794v1.421H4.71434v-1.421h2.016v-5.558c0-.1213.00233-.245.007-.371.00466-.126.01166-.2543.021-.385l-1.33 1.106c-.09334.07-.18434.1144-.273.133-.08867.0187-.17267.021-.252.007-.07934-.0186-.14934-.0466-.21-.084-.06067-.042-.10734-.084-.14-.126l-.609-.819 3.122-2.646h1.589v8.743h1.75696zm8.3801-.35c.21 0 .3734.0584.49.175.1214.1167.182.2707.182.462v1.134h-7.042v-.63c0-.1213.0257-.252.077-.392.0514-.1446.1377-.2753.259-.392l3.01-3.017c.2567-.2566.483-.5016.679-.735.196-.238.3594-.469.49-.693.1307-.2286.2287-.4596.294-.693.0654-.2333.098-.4783.098-.735 0-.4526-.1166-.7956-.35-1.029-.2333-.238-.5623-.357-.987-.357-.1866 0-.3593.028-.518.084-.154.0514-.294.1237-.42.217-.1213.0934-.2263.203-.315.329-.0886.126-.154.2637-.196.413-.084.2334-.1983.3897-.343.469-.14.0747-.3406.091-.602.049l-1.022-.182c.0747-.4946.2147-.9286.42-1.302.2054-.3733.462-.6836.77-.931.308-.2473.6604-.4316 1.057-.553.3967-.126.8237-.189 1.281-.189.4807 0 .917.0724 1.309.217.3967.14.735.3384 1.015.595.28.252.497.5577.651.917.154.3594.231.756.231 1.19 0 .3734-.0536.7187-.161 1.036-.1073.3174-.2543.6207-.441.91-.182.2847-.3943.5624-.637.833-.2426.2707-.4993.5437-.77.819l-2.156 2.205c.238-.07.4737-.1236.707-.161.2334-.042.4527-.063.658-.063h2.282zm2.6611-5.523c.0747-.4946.2147-.9286.42-1.302.2054-.3733.462-.6836.77-.931.308-.2473.658-.4316 1.05-.553.3967-.126.8237-.189 1.281-.189.4854 0 .9194.07 1.302.21.3874.1354.714.322.98.56.266.238.469.5157.609.833.1447.3174.217.658.217 1.022 0 .322-.035.6067-.105.854-.0653.2427-.1656.455-.301.637-.1306.182-.294.336-.49.462-.1913.126-.413.231-.665.315 1.1667.3827 1.75 1.1597 1.75 2.331 0 .518-.0956.9754-.287 1.372-.1913.392-.448.721-.77.987s-.6976.4667-1.127.602c-.4246.1307-.8703.196-1.337.196-.4946 0-.931-.056-1.309-.168-.378-.112-.7116-.28-1.001-.504-.2846-.224-.5296-.504-.735-.84-.2053-.3406-.385-.7373-.539-1.19l.854-.35c.224-.0933.4317-.119.623-.077.196.042.336.1447.42.308.0934.1774.1914.3407.294.49.1074.1494.2264.28.357.392.1307.1074.2777.1914.441.252.168.0607.3594.091.574.091.2707 0 .5064-.0443.707-.133.2007-.0886.3687-.203.504-.343.1354-.1446.2357-.3056.301-.483.07-.182.105-.3616.105-.539 0-.2333-.021-.4433-.063-.63-.042-.1913-.14-.3523-.294-.483-.1493-.1353-.3733-.238-.672-.308-.294-.0746-.6953-.112-1.204-.112v-1.358c.4247 0 .7724-.035 1.043-.105.2707-.07.483-.168.637-.294.154-.126.259-.2776.315-.455.0607-.1773.091-.371.091-.581 0-.4433-.1166-.7816-.35-1.015-.2286-.2333-.5553-.35-.98-.35-.1866 0-.3593.028-.518.084-.154.0514-.294.1237-.42.217-.1213.0934-.2263.203-.315.329-.0886.126-.154.2637-.196.413-.0886.2334-.203.3897-.343.469-.14.0747-.343.091-.609.049l-1.015-.182z"
                         fill={tintColor}
                     />
                 </svg>
@@ -63,12 +65,50 @@ const IconAsset = function ({tintColor, type}: Props): React.ReactElement {
             return (
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    fill="currentColor"
-                    viewBox="0 0 256 256"
+                    width="32"
+                    height="32"
+                    fill="none"
+                    viewBox="0 0 32 32"
                 >
-                    <path d="M232,172a36,36,0,0,1-72,0V72H96V200a8,8,0,0,1-16,0V72H72a40,40,0,0,0-40,40,8,8,0,0,1-16,0A56.06,56.06,0,0,1,72,56H224a8,8,0,0,1,0,16H176V172a20,20,0,0,0,40,0,8,8,0,0,1,16,0Z" />
+                    <g clipPath="url(#a)">
+                        <path
+                            fill={tintColor}
+                            fillRule="evenodd"
+                            d="M6.127 10.454c.224-.032.403-.05.53-.05.591 0 1.137.153 1.63.459.398.239.713.529.94.872l.188-.248.005-.007.006-.006c.619-.703 1.347-1.07 2.178-1.07.691 0 1.269.204 1.71.626.454.403.686.91.686 1.51 0 .533-.156.994-.476 1.37-.312.383-.738.574-1.254.574-.345 0-.643-.101-.878-.317a1.1 1.1 0 0 1-.353-.843c0-.405.11-.76.342-1.051.153-.193.354-.352.596-.479a1.416 1.416 0 0 0-.492-.07c-.195 0-.316.016-.38.035-.53.226-.938.694-1.208 1.445l-.001.003c-.02.05-.085.289-.202.74-.115.443-.275 1.077-.481 1.901-.414 1.641-.633 2.547-.662 2.74l-.002.01a3.423 3.423 0 0 0-.067.673c0 .337.097.581.272.756.176.177.413.272.733.272.6 0 1.15-.247 1.657-.768.518-.549.864-1.146 1.044-1.791l.001-.004a1.2 1.2 0 0 1 .088-.224.368.368 0 0 1 .161-.164.564.564 0 0 1 .198-.056 2.19 2.19 0 0 1 .276-.014c.159 0 .305.016.42.064.059.025.12.063.167.122.05.063.073.137.073.213 0 .023-.004.048-.005.057a12.52 12.52 0 0 1-.046.245l-.004.015c-.281 1.026-.86 1.917-1.73 2.67l-.007.007c-.776.611-1.605.925-2.484.925-1.08 0-1.93-.45-2.53-1.33-.453.605-1.015 1.024-1.685 1.248l-.01.003-.011.002a3.23 3.23 0 0 1-.664.053c-.974 0-1.703-.35-2.13-1.078A2.05 2.05 0 0 1 2 19.437c0-.52.158-.975.478-1.349.326-.38.749-.572 1.252-.572.372 0 .69.091.913.31.224.218.318.531.318.898 0 .327-.078.621-.241.874a1.706 1.706 0 0 1-.707.597l-.018.009c.158.063.331.095.52.095.467 0 .902-.285 1.295-.966l.002-.005c.071-.115.185-.417.341-.938.154-.51.341-1.209.563-2.096v-.002c.095-.364.198-.767.31-1.21.11-.444.188-.78.235-1.014l.002-.013c.058-.216.098-.36.119-.425.077-.42.113-.709.113-.877 0-.342-.092-.588-.254-.762-.159-.171-.384-.267-.704-.267-.652 0-1.217.251-1.704.768l-.002.002A4.215 4.215 0 0 0 3.79 14.28a1.084 1.084 0 0 1-.065.207.41.41 0 0 1-.14.176l-.01.007-.012.006a.35.35 0 0 1-.104.03 1.16 1.16 0 0 1-.095.01 5.04 5.04 0 0 1-.275.006H2.67l-.061-.061c-.109-.11-.204-.247-.204-.41v-.015l.003-.015c.07-.472.335-1.05.768-1.723l.001-.002c.771-1.165 1.754-1.857 2.949-2.042h.002Z"
+                            clipRule="evenodd"
+                        />
+                        <path
+                            fill={tintColor}
+                            d="M21.084 10.284c.932-.008 2.301-.013 4.107-.013 1.325 0 2.327.003 3.007.007a75.812 75.812 0 0 1 .99.013c.025 0 .047.002.065.003h.002c.01 0 .04.003.067.01l.01.002.011.004c.201.07.37.183.488.347a.966.966 0 0 1 .169.574c0 .3-.078.568-.248.79-.168.221-.411.377-.708.479h-.002a1.01 1.01 0 0 1-.221.034 8.213 8.213 0 0 1-.35.016c-.29.008-.696.012-1.219.012h-1.39l-.038.223v.001c-.198 1.185-.295 2.156-.295 2.916 0 1.446.251 2.746.75 3.905l.004.007c.059.153.105.284.137.393.03.103.053.205.053.29 0 .359-.16.68-.44.961-.278.296-.63.445-1.041.445-.255 0-.492-.03-.654-.139l-.009-.006-.008-.006c-.126-.101-.236-.274-.338-.477l-.006-.012c-.331-.768-.49-1.722-.49-2.852 0-.595.007-1.002.025-1.212v-.005c.118-1.157.377-2.551.776-4.18v-.002c.024-.096.045-.18.061-.25h-1.948c-.008.038-.02.086-.034.143l-.002.007a35.14 35.14 0 0 0-.146.537c-.05.232-.1.448-.15.648v.001a230.673 230.673 0 0 1-1.312 4.936 41.285 41.285 0 0 1-.411 1.384c-.104.322-.19.557-.256.681-.115.262-.28.473-.5.617-.225.146-.49.212-.783.212-.449 0-.807-.173-1.006-.549l-.006-.011-.005-.012a1.37 1.37 0 0 1-.067-.486v-.326l.346-.745c1.24-2.61 2.136-4.858 2.695-6.747l.002-.008.094-.281h-.463c-.662 0-1.105.025-1.346.07-.198.04-.47.173-.824.43l-.007.005-.007.005c-.366.228-.69.542-.97.947-.044.069-.085.13-.125.18a.651.651 0 0 1-.141.136l-.027.017-.03.01a.8.8 0 0 1-.19.03c-.07.005-.156.008-.258.008-.17 0-.335-.021-.465-.09a.437.437 0 0 1-.216-.546c.014-.042.034-.086.057-.132.047-.093.113-.208.198-.343l.003-.005c1.147-1.745 2.311-2.774 3.508-2.96a2.345 2.345 0 0 1 .158-.015 60.295 60.295 0 0 1 1.369-.026Z"
+                        />
+                    </g>
+                    <defs>
+                        <clipPath id="a">
+                            <path
+                                fill="#fff"
+                                d="M0 0h28v11.457H0z"
+                                transform="translate(2 10.271)"
+                            />
+                        </clipPath>
+                    </defs>
+                </svg>
+            );
+        }
+        case "Dismiss": {
+            return (
+                <svg
+                    width="44"
+                    height="44"
+                    viewBox="0 0 44 44"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M28.7071 15.2929C28.3166 14.9024 27.6834 14.9024 27.2929 15.2929L22 20.5858L16.7071 15.2929C16.3166 14.9024 15.6834 14.9024 15.2929 15.2929C14.9024 15.6834 14.9024 16.3166 15.2929 16.7071L20.5858 22L15.2929 27.2929C14.9024 27.6834 14.9024 28.3166 15.2929 28.7071C15.6834 29.0976 16.3166 29.0976 16.7071 28.7071L22 23.4142L27.2929 28.7071C27.6834 29.0976 28.3166 29.0976 28.7071 28.7071C29.0976 28.3166 29.0976 27.6834 28.7071 27.2929L23.4142 22L28.7071 16.7071C29.0976 16.3166 29.0976 15.6834 28.7071 15.2929Z"
+                        fill={tintColor}
+                    />
                 </svg>
             );
         }

package/src/components/tabbar/item.tsx

@@ -84,6 +84,8 @@ class TabbarItem extends React.Component<Props> {
                 onClick={onClick}
                 disabled={itemState === "disabled"}
                 aria-label={itemType}
+                aria-selected={itemState === "active"}
+                role="tab"
             >
                 {({hovered, focused, pressed}) => {
                     const tintColor = imageTintColor(

package/src/components/tabbar/tabbar.tsx

@@ -9,33 +9,53 @@ const styles = StyleSheet.create({
     tabbar: {
         display: "flex",
         flexDirection: "row",
+        justifyContent: "space-between",
         paddingTop: 2,
         paddingBottom: 2,
     },
+    pages: {
+        display: "flex",
+        flexDirection: "row",
+    },
 });
 
 type Props = {
     items: ReadonlyArray<TabbarItemType>;
     selectedItem: TabbarItemType;
+    onClickClose?: () => void;
     onSelectItem: (item: TabbarItemType) => void;
     style?: StyleType;
 };
 
 function Tabbar(props: Props): React.ReactElement {
-    const {items, selectedItem, onSelectItem, style} = props;
+    const {items, onClickClose, selectedItem, onSelectItem, style} = props;
 
     return (
-        <View style={[styles.tabbar, style]}>
-            {items.map((item) => (
-                <TabbarItem
-                    key={`tabbar-item-${item}`}
-                    itemState={item === selectedItem ? "active" : "inactive"}
-                    itemType={item}
-                    onClick={() => {
-                        onSelectItem(item);
-                    }}
-                />
-            ))}
+        <View style={[styles.tabbar, style]} role="tablist">
+            <View style={[styles.pages]}>
+                {items.map((item) => (
+                    <TabbarItem
+                        key={`tabbar-item-${item}`}
+                        itemState={
+                            item === selectedItem ? "active" : "inactive"
+                        }
+                        itemType={item}
+                        onClick={() => {
+                            onSelectItem(item);
+                        }}
+                    />
+                ))}
+            </View>
+
+            <View>
+                {onClickClose && (
+                    <TabbarItem
+                        itemState="inactive"
+                        itemType="Dismiss"
+                        onClick={onClickClose}
+                    />
+                )}
+            </View>
         </View>
     );
 }