diff --git a/.changeset/pink-tables-attack.md b/.changeset/pink-tables-attack.md new file mode 100644 index 000000000..2a85bcee5 --- /dev/null +++ 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 index 6a91505a1..07ffe7d8e 100644 --- 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 index 5598bf3a7..33debf326 100644 --- 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} + tabIndex={tabIndex} {...ariaProps} > {() => {children}}