revert changes for react component and make tabindex optional

lib/octicons_angular/README.md

@@ -91,6 +91,24 @@ You have the option of adding information to the icon with the
 ></svg>
 ```
 
+#### `tabIndex`
+
+You can add the `tabindex` attribute to an SVG element via the `tabIndex` input if the SVG element is intended to be interactive.
+`tabIndex` input 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` input 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.
+
+```html
+<svg
+  log-icon
+  aria-label="Interactive log icon"  
+  [tabIndex]="0" 
+></svg>
+```
+
 #### Sizes
 
 The `size` input takes `small`, `medium`, and `large` values that can be used to render octicons at standard sizes:

lib/octicons_angular/src/octicon-component-base.ts

@@ -15,13 +15,17 @@ export class OpOcticonComponentBase {
   @HostBinding('attr.role') role = 'img';
   @HostBinding('attr.fill') @Input() fill = 'currentColor';
   @HostBinding('attr.id') @Input() id = '';
+  @HostBinding('attr.tabindex') @Input() tabIndex?:number;
   @HostBinding('attr.aria-label') @Input('aria-label') ariaLabel = '';
   @HostBinding('attr.aria-labelledby') @Input('aria-labelledby') arialabelledby = '';
 
   @HostBinding('class.octicon') baseClassName = true;
   @HostBinding('attr.aria-hidden') get ariaHidden() {
     return !this.ariaLabel;
   }
+  @HostBinding('attr.focusable') get focusable() {
+    return (this.tabIndex && this.tabIndex >= 0);
+  }
   @HostBinding('style') get style () {
     return {
       display: 'inline-block',

lib/octicons_react/README.md

@@ -99,6 +99,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

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"
   style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
   viewBox="0 0 16 16"

lib/octicons_react/src/__tests__/octicon.js

@@ -35,6 +35,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')

lib/octicons_react/src/createIconComponent.js

@@ -15,6 +15,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
       {
         'aria-label': ariaLabel,
         'aria-labelledby': arialabelledby,
+        tabIndex,
         className = defaultClassName,
         fill = 'currentColor',
         size = 16,
@@ -36,6 +37,8 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
         <svg
           ref={forwardedRef}
           aria-hidden={labelled ? undefined : 'true'}
+          tabIndex={tabIndex}
+          focusable={tabIndex >= 0 ? 'true' : 'false'}
           aria-label={ariaLabel}
           aria-labelledby={arialabelledby}
           className={className}

lib/octicons_react/src/index.d.ts

@@ -9,6 +9,7 @@ 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>