907 accept additional props for labeling icons (#932)

Author: agreenberry

.changeset/happy-knives-exist.md

@@ -0,0 +1,5 @@
+---
+"@primer/octicons": minor
+---
+
+Add `id`, `title`, and `aria-labelledby` props to icon components

lib/octicons_react/.gitignore

@@ -2,3 +2,4 @@
 .next
 dist/
 src/__generated__/
+.tool-versions

lib/octicons_react/README.md

@@ -62,6 +62,43 @@ export default () => (
 )
 ```
 
+### `aria-labelledby`
+
+You have the option of adding accessibility information to the icon with the
+[`aria-labelledby` attribute][aria-labelledby] via the `aria-labelledby` prop. Using aria-labelledby referencing the id values of the title element provides the accessible name.
+
+```js
+// Example usage
+import {PlusIcon} from '@primer/octicons-react'
+
+export default () => (
+  <button>
+    <PlusIcon aria-labelledby="title" title="Add new item" /> New
+  </button>
+)
+```
+
+### `title`
+
+You have the option of adding accessibility information to the icon with the
+[`title` attribute][title] via the `title` prop.
+
+### `id`
+
+You have the option of adding information to the icon with the
+[`id` attribute][id] via the `id` prop.
+
+```js
+// Example usage
+import {PlusIcon} from '@primer/octicons-react'
+
+export default () => (
+  <button>
+    <PlusIcon id="unique-plus-icon" /> New
+  </button>
+)
+```
+
 ### `tabIndex`
 
 You can add the `tabindex` attribute to an SVG element via the `tabIndex` prop if the SVG element is intended to be interactive.
@@ -142,3 +179,6 @@ can pass it either via the `icon` prop, or as the only child:
 [install-npm]: https://docs.npmjs.com/getting-started/installing-node
 [tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking
 [aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
+[aria-labelledby]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby
+[title]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
+[id]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

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.244kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"3.47kB"`)
 })

lib/octicons_react/src/createIconComponent.js

@@ -14,11 +14,14 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
     (
       {
         'aria-label': ariaLabel,
+        'aria-labelledby': arialabelledby,
         tabIndex,
         className = defaultClassName,
         fill = 'currentColor',
         size = 16,
-        verticalAlign = 'text-bottom'
+        verticalAlign = 'text-bottom',
+        id,
+        title
       },
       forwardedRef
     ) => {
@@ -35,19 +38,22 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           tabIndex={tabIndex}
           focusable={tabIndex >= 0 ? 'true' : 'false'}
           aria-label={ariaLabel}
+          aria-labelledby={arialabelledby}
           role="img"
           className={className}
           viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
           width={width}
           height={height}
           fill={fill}
+          id={id}
           style={{
             display: 'inline-block',
             userSelect: 'none',
             verticalAlign,
             overflow: 'visible'
           }}
         >
+          {title ? <title>{title}</title> : null}
           {path}
         </svg>
       )

lib/octicons_react/src/index.d.ts

@@ -1,16 +1,21 @@
+// eslint-disable-next-line import/no-namespace
 import * as React from 'react'
 
-import {Icon} from './__generated__/icons'
+// eslint-disable-next-line prettier/prettier
+import { Icon } from './__generated__/icons'
 
 type Size = 'small' | 'medium' | 'large'
 
 export interface OcticonProps {
   'aria-label'?: string
+  'aria-labelledby'?: string
   tabIndex?: number
   children?: React.ReactElement<any>
   className?: string
+  title?: string | React.ReactElement<any>
+  id?: string
   fill?: string
-  icon?: Icon
+  icon?: Icon | React.ReactNode
   size?: number | Size
   verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
 }