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 ( = 0 ? 'true' : 'false'} aria-label={ariaLabel} aria-labelledby={arialabelledby} - role="img" className={className} + role={role} viewBox={`0 0 ${naturalWidth} ${naturalHeight}`} width={width} height={height} diff --git a/package.json b/package.json index 823f5655a..751d625e0 100644 --- a/package.json +++ b/package.json @@ -49,5 +49,6 @@ "github/no-then": 0, "eslint-comments/no-use": 0 } - } + }, + "packageManager": "yarn@1.22.1" }