Add tabIndex prop to React Icon component

.changeset/sixty-nails-juggle.md

@@ -0,0 +1,5 @@
+---
+'@primer/octicons': minor
+---
+
+Add focusable prop to react icons

docs/content/packages/react.mdx

@@ -66,6 +66,23 @@ export default () => (
 )
 ```
 
+### `focusable`
+
+You can add the `focusable` attribute to the SVG element via the `focusable` prop, which can be either `true`, `false`, or `auto`.
+If there is no `aria-label` prop presents, `focusable` prop will be set to false and this helps prevent the decorative
+SVG from being announced by some specialized assistive technology browsing modes which get delayed while trying to parse SVG's markup
+
+```js
+// Example usage
+import {PlusIcon} from '@primer/octicons-react'
+
+export default () => (
+  <button>
+    <PlusIcon aria-label="Add new item" focusable="auto" /> New
+  </button>
+)
+```
+
 ### Sizes
 
 The `size` prop takes `small`, `medium`, and `large` values that can be used to
@@ -110,18 +127,24 @@ export default () => (
 ### `Octicon` (DEPRECATED)
 
 > ⚠️ The `Octicon` component is deprecated. Use icon components on their own instead:
+>
 > ```diff
+>
+> ```
+
 - <Octicon icon={AlertIcon} />
-+ <AlertIcon />
-```
+
+* <AlertIcon />
+
+````
 
 The `Octicon` component is wrapper that passes props to its icon component. To render a specific icon, you
 can pass it either via the `icon` prop, or as the only child:
 
 ```jsx
 <Octicon icon={Icon} />
 <Octicon><Icon x={10}/></Octicon>
-```
+````
 
 [octicons]: https://primer.style/octicons/
 [primer]: https://github.com/primer/primer

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

lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap

@@ -5,6 +5,7 @@ exports[`An icon component matches snapshot 1`] = `
   aria-hidden="true"
   class="octicon octicon-alert"
   fill="currentColor"
+  focusable="false"
   height="16"
   role="img"
   style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"

lib/octicons_react/src/__tests__/octicon.js

@@ -69,6 +69,16 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveAttribute('aria-label', 'icon')
   })
 
+  it('set the focusable prop to false if ariaLabel prop is not present', () => {
+    const {container} = render(<AlertIcon focusable={true} />)
+    expect(container.querySelector('svg')).toHaveAttribute('focusable', 'false')
+  })
+
+  it('sets focusable prop to given value if ariaLabel prop is present', () => {
+    const {container} = render(<AlertIcon aria-label="icon" focusable="auto" />)
+    expect(container.querySelector('svg')).toHaveAttribute('focusable', 'auto')
+  })
+
   it('respects the className prop', () => {
     const {container} = render(<AlertIcon className="foo" />)
     expect(container.querySelector('svg')).toHaveAttribute('class', 'foo')

lib/octicons_react/src/createIconComponent.js

@@ -10,7 +10,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
   const svgDataByHeight = getSVGData()
   const heights = Object.keys(svgDataByHeight)
 
-  function Icon({'aria-label': ariaLabel, className, fill = 'currentColor', size, verticalAlign}) {
+  function Icon({'aria-label': ariaLabel, focusable = false, className, fill = 'currentColor', size, verticalAlign}) {
     const height = sizeMap[size] || size
     const naturalHeight = closestNaturalHeight(heights, height)
     const naturalWidth = svgDataByHeight[naturalHeight].width
@@ -20,6 +20,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
     return (
       <svg
         aria-hidden={ariaLabel ? 'false' : 'true'}
+        focusable={ariaLabel ? focusable : false}
         aria-label={ariaLabel}
         role="img"
         className={className}

lib/octicons_react/src/index.d.ts

@@ -6,6 +6,7 @@ type Size = 'small' | 'medium' | 'large'
 
 export interface OcticonProps {
   'aria-label'?: string
+  focusable?: boolean | 'auto'
   children?: React.ReactElement<any>
   className?: string
   fill?: string