Add tabIndex as a prop to PhosphorIcon

.changeset/moody-spies-behave.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-icon": patch
+---
+
+PhosphorIcon already support the tabIndex prop, this change updates the types to reflect that

packages/wonder-blocks-icon/src/components/__tests__/phosphor-icon.test.tsx

@@ -146,4 +146,15 @@ describe("PhosphorIcon", () => {
             `mask-image: url(${customIcon});`,
         );
     });
+
+    it("supports `tabIndex`", async () => {
+        // Arrange
+        const ref: React.RefObject<HTMLSpanElement> = React.createRef();
+
+        // Act
+        render(<PhosphorIcon icon={Plus} ref={ref} tabIndex={-1} />);
+
+        // Assert
+        expect(ref.current).toHaveAttribute("tabindex", "-1");
+    });
 });

packages/wonder-blocks-icon/src/components/phosphor-icon.tsx

@@ -43,6 +43,11 @@ type Props = Pick<AriaProps, "aria-hidden" | "aria-label" | "role"> & {
      */
     testId?: string;
 
+    /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number;
+
     /**
      * The icon to display. This is a reference to the icon asset (imported as a
      * static SVG file).