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}
/>
);
});