diff --git a/.changeset/spicy-actors-act.md b/.changeset/spicy-actors-act.md
new file mode 100644
index 000000000..32d0778c5
--- /dev/null
+++ b/.changeset/spicy-actors-act.md
@@ -0,0 +1,5 @@
+---
+'@primer/octicons-react': patch
+---
+
+Update octicons in React to no longer set role="img" if the icon is aria-hidden
diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/lib/octicons_react/__tests__/tree-shaking.test.js
index 4dcd08f02..a490c44bf 100644
--- a/lib/octicons_react/__tests__/tree-shaking.test.js
+++ b/lib/octicons_react/__tests__/tree-shaking.test.js
@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
})
const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
- expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.47kB"`)
+ expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.563kB"`)
})
diff --git a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap b/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
index 6a702f6d2..2c1947a65 100644
--- a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
+++ b/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap
@@ -7,7 +7,6 @@ exports[`An icon component matches snapshot 1`] = `
fill="currentColor"
focusable="false"
height="16"
- role="img"
style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
viewBox="0 0 16 16"
width="16"
diff --git a/lib/octicons_react/src/__tests__/octicon.js b/lib/octicons_react/src/__tests__/octicon.js
index 2364725e6..c4a9493a7 100644
--- a/lib/octicons_react/src/__tests__/octicon.js
+++ b/lib/octicons_react/src/__tests__/octicon.js
@@ -1,5 +1,5 @@
import '@testing-library/jest-dom'
-import {render} from '@testing-library/react'
+import {render, screen} from '@testing-library/react'
import React from 'react'
import {AlertIcon} from '../index'
@@ -9,9 +9,29 @@ describe('An icon component', () => {
expect(container.querySelector('svg')).toMatchSnapshot()
})
+ it('defaults to `aria-hidden="true"` if no label is present', () => {
+ const {container} = render()
+ expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
+ })
+
+ it('sets `role="img"` if `aria-label` is provided', () => {
+ render()
+ expect(screen.getByLabelText('Alert')).toHaveAttribute('role', 'img')
+ })
+
+ it('sets `role="img"` if `aria-labelledby` is provided', () => {
+ render(
+ <>
+ Alert
+
+ >
+ )
+ expect(screen.getByLabelText('Alert')).toHaveAttribute('role', 'img')
+ })
+
it('sets aria-hidden="false" if ariaLabel prop is present', () => {
const {container} = render()
- expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'false')
+ expect(container.querySelector('svg')).not.toHaveAttribute('aria-hidden')
expect(container.querySelector('svg')).toHaveAttribute('aria-label', 'icon')
})
diff --git a/lib/octicons_react/src/createIconComponent.js b/lib/octicons_react/src/createIconComponent.js
index 8b8a51df0..f895c43ec 100644
--- a/lib/octicons_react/src/createIconComponent.js
+++ b/lib/octicons_react/src/createIconComponent.js
@@ -30,17 +30,19 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
const naturalWidth = svgDataByHeight[naturalHeight].width
const width = height * (naturalWidth / naturalHeight)
const path = svgDataByHeight[naturalHeight].path
+ const labelled = ariaLabel || arialabelledby
+ const role = labelled ? 'img' : undefined
return (