Pass aria attributes to pill (#2227)

Previously, aria attributes were accepted as props, but nothing was done with them. I have passed the aria attributes to the `clickable` and the `view` so that they can be used.

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), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (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), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2227

.changeset/tender-frogs-appear.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-pill": minor
+---
+
+Aria props are now properly applied to pill component.

packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx

@@ -37,6 +37,7 @@ describe("Pill", () => {
             <Pill
                 id="pill-id"
                 role="radio"
+                aria-checked="true"
                 testId="pill-test-id"
                 onClick={() => {}}
                 ref={pillRef}
@@ -49,6 +50,7 @@ describe("Pill", () => {
         expect(pillRef.current).toHaveAttribute("id", "pill-id");
         expect(pillRef.current).toHaveAttribute("role", "radio");
         expect(pillRef.current).toHaveAttribute("data-testid", "pill-test-id");
+        expect(pillRef.current).toHaveAttribute("aria-checked", "true");
     });
 
     test("is Clickable if onClick is passed in (mouse click)", async () => {

packages/wonder-blocks-pill/src/components/pill.tsx

@@ -118,6 +118,7 @@ const Pill = React.forwardRef(function Pill(
         onClick,
         style,
         testId,
+        ...ariaProps
     } = props;
 
     let wrapperSizeStyle;
@@ -150,6 +151,7 @@ const Pill = React.forwardRef(function Pill(
                 style={[defaultStyles, colorStyles.clickableWrapper, style]}
                 testId={testId}
                 ref={ref as React.ForwardedRef<HTMLButtonElement>}
+                {...ariaProps}
             >
                 {() => <PillInner size={size}>{children}</PillInner>}
             </Clickable>
@@ -163,6 +165,7 @@ const Pill = React.forwardRef(function Pill(
             style={[defaultStyles, style]}
             testId={testId}
             ref={ref as React.ForwardedRef<HTMLElement>}
+            {...ariaProps}
         >
             <PillInner size={size}>{children}</PillInner>
         </View>