Skip to content

Commit 9cfbee0

Browse files
committed
feat(icon): enhance a11y
1 parent 9a4a029 commit 9cfbee0

File tree

2 files changed

+23
-0
lines changed

2 files changed

+23
-0
lines changed

packages/bezier-react/src/components/AlphaIcon/Icon.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,20 @@ export const Icon = memo(
3737
color,
3838
source: SourceElement,
3939
style,
40+
'aria-hidden': ariaHidden,
41+
'aria-label': ariaLabel,
42+
role = 'img',
4043
...rest
4144
} = marginRest
4245

46+
const isDecorative = !ariaLabel && ariaHidden !== false
47+
4348
return (
4449
<SourceElement
4550
ref={forwardedRef}
51+
role={role}
52+
aria-hidden={isDecorative}
53+
aria-label={ariaLabel}
4654
style={
4755
{
4856
'--b-icon-color': alphaColorTokenCssVar(color),

packages/bezier-react/src/components/AlphaIcon/Icon.types.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,21 @@ interface IconOwnProps {
3030
* Color from the design system's functional or semantic color.
3131
*/
3232
color?: FunctionalColor | SemanticColor
33+
/**
34+
* Accessible label for the icon
35+
* @example "Close", "Menu", "More"
36+
*/
37+
'aria-label'?: string
38+
/**
39+
* Whether to hide the icon from screen readers
40+
* @default true when `aria-label` is not provided
41+
*/
42+
'aria-hidden'?: boolean
43+
/**
44+
* ARIA role
45+
* @default "img"
46+
*/
47+
role?: string
3348
}
3449

3550
export interface IconProps

0 commit comments

Comments
 (0)