Allow consumers to set tabindex on pill when clickable (#2229)

Exposes tabIndex and passes to Clickable wrapper. Adds test.

Author: nedredmond

Reviewers: jeresig, jandrade

Required Reviewers:

Approved By: jeresig

Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  dependabot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #2229

.changeset/pink-tables-attack.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-pill": minor
+---
+
+Add tabindex to pill props

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 () => {

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>}