Merge 7b5d512 into 2ca3c39

Khan · May 16, 2024 · 66860c3 · 66860c3
2 parents 2ca3c39 + 7b5d512
commit 66860c3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/.changeset/pink-tables-attack.md b/.changeset/pink-tables-attack.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-pill": minor
+---
+
+Add tabindex to pill props
diff --git a/packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx b/packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx
@@ -38,6 +38,7 @@ describe("Pill", () => {
                 id="pill-id"
                 role="radio"
                 aria-checked="true"
+                tabIndex={0}
                 testId="pill-test-id"
                 onClick={() => {}}
                 ref={pillRef}
@@ -51,6 +52,7 @@ describe("Pill", () => {
         expect(pillRef.current).toHaveAttribute("role", "radio");
         expect(pillRef.current).toHaveAttribute("data-testid", "pill-test-id");
         expect(pillRef.current).toHaveAttribute("aria-checked", "true");
+        expect(pillRef.current).toHaveAttribute("tabindex", "0");
     });
 
     test("is Clickable if onClick is passed in (mouse click)", async () => {

diff --git a/packages/wonder-blocks-pill/src/components/pill.tsx b/packages/wonder-blocks-pill/src/components/pill.tsx
@@ -70,6 +70,10 @@ type Props = AriaProps & {
      * Optional test ID for e2e testing.
      */
     testId?: string;
+    /**
+     * The tab index of the pill (clickable only).
+     */
+    tabIndex?: number;
 };
 
 const PillInner = (props: {
@@ -118,6 +122,7 @@ const Pill = React.forwardRef(function Pill(
         onClick,
         style,
         testId,
+        tabIndex,
         ...ariaProps
     } = props;
 
@@ -151,6 +156,7 @@ const Pill = React.forwardRef(function Pill(
                 style={[defaultStyles, colorStyles.clickableWrapper, style]}
                 testId={testId}
                 ref={ref as React.ForwardedRef<HTMLButtonElement>}
+                tabIndex={tabIndex}
                 {...ariaProps}
             >
                 {() => <PillInner size={size}>{children}</PillInner>}