Skip to content

Commit 476d595

Browse files
authored
fix: add aria-hidden to error overlay voting icons (#74568)
## What? Added accessibility improvements to the error overlay voting buttons by making their icons properly hidden from screen readers. ## Why? To enhance accessibility for users relying on screen readers by preventing redundant icon announcements while maintaining the clear button labels "Mark as helpful" and "Mark as not helpful". ## How? - Added `ComponentProps<'svg'>` type to ThumbsUp and ThumbsDown components to allow passing SVG attributes - Spread props to SVG elements to enable aria attributes - Added test coverage to ensure icons have `aria-hidden="true"`
1 parent 60eb702 commit 476d595

File tree

3 files changed

+27
-2
lines changed

3 files changed

+27
-2
lines changed

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.test.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,25 @@ describe('ErrorOverlayLayout Component', () => {
6060
)
6161
).toBeInTheDocument()
6262
})
63+
test('voting buttons have aria-hidden icons', () => {
64+
renderTestComponent()
65+
66+
const helpfulButton = screen.getByRole('button', {
67+
name: 'Mark as helpful',
68+
})
69+
const notHelpfulButton = screen.getByRole('button', {
70+
name: 'Mark as not helpful',
71+
})
72+
73+
expect(helpfulButton.querySelector('svg')).toHaveAttribute(
74+
'aria-hidden',
75+
'true'
76+
)
77+
expect(notHelpfulButton.querySelector('svg')).toHaveAttribute(
78+
'aria-hidden',
79+
'true'
80+
)
81+
})
6382

6483
test('sends feedback when clicking helpful button', async () => {
6584
renderTestComponent()

packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/thumbs/thumbs-down.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export function ThumbsDown() {
1+
import type { ComponentProps } from 'react'
2+
3+
export function ThumbsDown(props: ComponentProps<'svg'>) {
24
return (
35
<svg
46
width="16"
@@ -7,6 +9,7 @@ export function ThumbsDown() {
79
fill="none"
810
xmlns="http://www.w3.org/2000/svg"
911
className="thumbs-down-icon"
12+
{...props}
1013
>
1114
<path
1215
fillRule="evenodd"

packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/thumbs/thumbs-up.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export function ThumbsUp() {
1+
import type { ComponentProps } from 'react'
2+
3+
export function ThumbsUp(props: ComponentProps<'svg'>) {
24
return (
35
<svg
46
width="16"
@@ -7,6 +9,7 @@ export function ThumbsUp() {
79
fill="none"
810
xmlns="http://www.w3.org/2000/svg"
911
className="thumbs-up-icon"
12+
{...props}
1013
>
1114
<g id="thumb-up-16">
1215
<path

0 commit comments

Comments
 (0)