diff --git a/.changeset/dirty-dragons-fix.md b/.changeset/dirty-dragons-fix.md new file mode 100644 index 000000000..2e9b50f62 --- /dev/null +++ b/.changeset/dirty-dragons-fix.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-icon": minor +--- + +defaults the role of PhosphorIcon to "img" when an aria-label is provided diff --git a/packages/wonder-blocks-icon/src/components/__tests__/phosphor-icon.test.tsx b/packages/wonder-blocks-icon/src/components/__tests__/phosphor-icon.test.tsx index 4b7294f42..8248d4af6 100644 --- a/packages/wonder-blocks-icon/src/components/__tests__/phosphor-icon.test.tsx +++ b/packages/wonder-blocks-icon/src/components/__tests__/phosphor-icon.test.tsx @@ -48,6 +48,16 @@ describe("PhosphorIcon", () => { ); }); + it("applies role=img when aria-label is provided", async () => { + // Arrange + + // Act + render(); + + // Assert + expect(screen.getByRole("img")).toBeInTheDocument(); + }); + it("calls viewportPixelsForSize with size from props", async () => { // Arrange const viewPortPixelsForSizeSpy = jest.spyOn( diff --git a/packages/wonder-blocks-icon/src/components/phosphor-icon.tsx b/packages/wonder-blocks-icon/src/components/phosphor-icon.tsx index 890a2de51..d2f23d8cc 100644 --- a/packages/wonder-blocks-icon/src/components/phosphor-icon.tsx +++ b/packages/wonder-blocks-icon/src/components/phosphor-icon.tsx @@ -26,7 +26,8 @@ type Props = Pick & { className?: string; /** - * The role of the icon. + * The role of the icon. Will default to `img` if an `aria-label` is + * provided. * @see https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24 */ role?: "img"; @@ -89,6 +90,7 @@ export const PhosphorIcon = React.forwardRef(function PhosphorIcon( style, testId, className, + role, ...sharedProps } = props; @@ -113,6 +115,7 @@ export const PhosphorIcon = React.forwardRef(function PhosphorIcon( ]} data-testid={testId} ref={ref} + role={role ?? sharedProps["aria-label"] ? "img" : undefined} /> ); });