feat(icon): enhance a11y

channel-io · Dec 18, 2024 · 9cfbee0 · 9cfbee0
1 parent 9a4a029
commit 9cfbee0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.tsx b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx
@@ -37,12 +37,20 @@ export const Icon = memo(
       color,
       source: SourceElement,
       style,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      role = 'img',
       ...rest
     } = marginRest
 
+    const isDecorative = !ariaLabel && ariaHidden !== false
+
     return (
       <SourceElement
         ref={forwardedRef}
+        role={role}
+        aria-hidden={isDecorative}
+        aria-label={ariaLabel}
         style={
           {
             '--b-icon-color': alphaColorTokenCssVar(color),

diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.types.ts b/packages/bezier-react/src/components/AlphaIcon/Icon.types.ts
@@ -30,6 +30,21 @@ interface IconOwnProps {
    * Color from the design system's functional or semantic color.
    */
   color?: FunctionalColor | SemanticColor
+  /**
+   * Accessible label for the icon
+   * @example "Close", "Menu", "More"
+   */
+  'aria-label'?: string
+  /**
+   * Whether to hide the icon from screen readers
+   * @default true when `aria-label` is not provided
+   */
+  'aria-hidden'?: boolean
+  /**
+   * ARIA role
+   * @default "img"
+   */
+  role?: string
 }
 
 export interface IconProps