Add tabIndex prop to React Icon component (#849)

* add focusable prop to svg * add changeset and write tests * update snapshots and tests and add docs * tabIndex prop introduced * update tree shaking snapshot * changeset update & remove type * Minor copy edits Co-authored-by: Cole Bemis <[email protected]>
primer · Oct 7, 2022 · f6c8d2b · f6c8d2b
1 parent 0c758fe
commit f6c8d2b
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 2 deletions.
diff --git a/.changeset/sixty-nails-juggle.md b/.changeset/sixty-nails-juggle.md
@@ -0,0 +1,5 @@
+---
+'@primer/octicons': minor
+---
+
+Add `tabIndex` prop to React icon components
diff --git a/docs/content/packages/react.mdx b/docs/content/packages/react.mdx
@@ -66,6 +66,24 @@ export default () => (
 )
 ```
 
+### `tabIndex`
+
+You can add the `tabindex` attribute to an SVG element via the `tabIndex` prop if the SVG element is intended to be interactive.
+`tabIndex` prop also controls the `focusable` attribute of the SVG element which is defined by SVG Tiny 1.2 and only implemented in
+Internet Explorer and Microsoft Edge.
+
+If there is no `tabIndex` prop is present (default behavior), it will set the `focusable` attribute to `false`. This is helpful
+for preventing the decorative SVG from being announced by some specialized assistive technology browsing modes which can get delayed
+while trying to parse the SVG markup.
+
+```js
+// Example usage
+import {PlusIcon} from '@primer/octicons-react'
+export default () => (
+  <PlusIcon aria-label="Interactive Plus Icon" tabIndex={0} /> New Item
+)
+```
+
 ### Sizes
 
 The `size` prop takes `small`, `medium`, and `large` values that can be used to

diff --git a/lib/octicons_react/__tests__/tree-shaking.test.js b/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.595kB"`)
 })
diff --git a/lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap b/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;"

diff --git a/lib/octicons_react/src/__tests__/octicon.js b/lib/octicons_react/src/__tests__/octicon.js
@@ -69,6 +69,23 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveAttribute('aria-label', 'icon')
   })
 
+  it('set the focusable prop to false if tabIndex prop is not present', () => {
+    const {container} = render(<AlertIcon />)
+    expect(container.querySelector('svg')).toHaveAttribute('focusable', 'false')
+  })
+
+  it('sets focusable prop to true if tabIndex prop is present and greater than 0', () => {
+    const {container} = render(<AlertIcon aria-label="icon" tabIndex={0} />)
+    expect(container.querySelector('svg')).toHaveAttribute('tabindex', '0')
+    expect(container.querySelector('svg')).toHaveAttribute('focusable', 'true')
+  })
+
+  it('sets focusable prop to false if tabIndex prop is -1', () => {
+    const {container} = render(<AlertIcon aria-label="icon" tabIndex={-1} />)
+    expect(container.querySelector('svg')).toHaveAttribute('tabindex', '-1')
+    expect(container.querySelector('svg')).toHaveAttribute('focusable', 'false')
+  })
+
   it('respects the className prop', () => {
     const {container} = render(<AlertIcon className="foo" />)
     expect(container.querySelector('svg')).toHaveAttribute('class', 'foo')

diff --git a/lib/octicons_react/src/createIconComponent.js b/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, tabIndex, className, fill = 'currentColor', size, verticalAlign}) {
     const height = sizeMap[size] || size
     const naturalHeight = closestNaturalHeight(heights, height)
     const naturalWidth = svgDataByHeight[naturalHeight].width
@@ -20,6 +20,8 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
     return (
       <svg
         aria-hidden={ariaLabel ? 'false' : 'true'}
+        tabIndex={tabIndex}
+        focusable={tabIndex >= 0 ? 'true' : 'false'}
         aria-label={ariaLabel}
         role="img"
         className={className}

diff --git a/lib/octicons_react/src/index.d.ts b/lib/octicons_react/src/index.d.ts
@@ -6,6 +6,7 @@ type Size = 'small' | 'medium' | 'large'
 
 export interface OcticonProps {
   'aria-label'?: string
+  tabIndex?: number
   children?: React.ReactElement<any>
   className?: string
   fill?: string