Enhance accessibility of icons

packages/bezier-react/package.json

@@ -123,6 +123,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.13",
+    "@radix-ui/react-accessible-icon": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-separator": "^1.0.0",
     "@radix-ui/react-slider": "^1.0.0",

packages/bezier-react/scripts/icon-template.js

@@ -1,14 +1,25 @@
-function iconTemplate({ imports, componentName, props, jsx }, { tpl }) {
+function iconTemplate({ imports, componentName, props, interfaces, jsx }, { tpl }) {
   return tpl`
   ${imports}
-  import { createBezierIcon } from '../utils'
+
+  ${interfaces}
+
+  import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
+
+  import { createIconLabel, createBezierIcon } from '../utils'
+
+  const label = createIconLabel('${componentName}')
 
   function ${componentName}(${props}) {
+    const Svg = ${jsx}
+
     return (
-      ${jsx}
+      <AccessibleIcon.Root label={label}>
+        { Svg }
+      </AccessibleIcon.Root>
     )
   }
-  
+
   export default createBezierIcon(${componentName})
 `
 }

packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

@@ -400,10 +400,12 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
       class="c4"
     >
       <svg
+        aria-hidden="true"
         class="c5"
         color="bgtxt-absolute-white-dark"
         data-testid="bezier-react-icon"
         fill="none"
+        focusable="false"
         foundation="[object Object]"
         height="16"
         marginbottom="0"
@@ -421,6 +423,11 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
           fill-rule="evenodd"
         />
       </svg>
+      <span
+        style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
+      >
+        More
+      </span>
     </div>
     <div
       class="c1"

packages/bezier-react/src/components/Forms/Inputs/Select/__snapshots__/Select.test.tsx.snap

@@ -128,10 +128,12 @@ exports[`Select Test > Default Style > Snapshot > 1`] = `
       </span>
     </div>
     <svg
+      aria-hidden="true"
       class="c4"
       color="txt-black-darker"
       data-testid="bezier-react-icon"
       fill="none"
+      focusable="false"
       foundation="[object Object]"
       height="16"
       marginbottom="0"
@@ -149,6 +151,11 @@ exports[`Select Test > Default Style > Snapshot > 1`] = `
         fill-rule="evenodd"
       />
     </svg>
+    <span
+      style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
+    >
+      Chevron Down
+    </span>
   </button>
 </div>
 `;
@@ -284,10 +291,12 @@ exports[`Select Test > rightContent > Snapshot > 1`] = `
       </div>
     </div>
     <svg
+      aria-hidden="true"
       class="c4"
       color="txt-black-darker"
       data-testid="bezier-react-icon"
       fill="none"
+      focusable="false"
       foundation="[object Object]"
       height="16"
       marginbottom="0"
@@ -305,6 +314,11 @@ exports[`Select Test > rightContent > Snapshot > 1`] = `
         fill-rule="evenodd"
       />
     </svg>
+    <span
+      style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
+    >
+      Chevron Down
+    </span>
   </button>
 </div>
 `;

packages/bezier-react/src/components/Help/__snapshots__/Help.test.tsx.snap

@@ -18,10 +18,12 @@ exports[`Help > Snapshot > 1`] = `
 }
 
 <svg
+  aria-hidden="true"
   class="c0 "
   color="txt-black-dark"
   data-testid="bezier-react-help"
   fill="none"
+  focusable="false"
   foundation="[object Object]"
   height="16"
   marginbottom="0"

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

@@ -31,8 +31,10 @@ import { Text } from '~/src/components/Text'
 
 import { Icon } from './Icon'
 import mdx from './Icon.mdx'
-import type IconProps from './Icon.types'
-import { IconSize } from './Icon.types'
+import {
+  type IconProps,
+  IconSize,
+} from './Icon.types'
 import icons, {
   ArrowLeftIcon,
   BookmarkFilledIcon,

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

@@ -8,7 +8,7 @@ import {
   ICON_TEST_ID,
   Icon,
 } from './Icon'
-import type IconProps from './Icon.types'
+import { type IconProps } from './Icon.types'
 import { AllIcon } from './generated'
 
 describe('Icon test >', () => {

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

@@ -3,8 +3,10 @@ import React, {
   memo,
 } from 'react'
 
-import type IconProps from './Icon.types'
-import { IconSize } from './Icon.types'
+import {
+  type IconProps,
+  IconSize,
+} from './Icon.types'
 
 import Styled from './Icon.styled'
 

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

@@ -60,7 +60,7 @@ interface IconOptions {
   marginLeft?: number
 }
 
-export default interface IconProps extends
+export interface IconProps extends
   Omit<BezierComponentProps, 'as'>,
   SizeProps<IconSize>,
   ColorProps,

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-imports */
-import type IconProps from '../Icon.types'
+import { type IconProps } from '../Icon.types'
 import { type IconName } from '../generated'
 /* eslint-enable no-restricted-imports */