[58414] When you click on the "To the Notification Center" button, an outline appears

.changeset/chilled-gifts-hope.md

@@ -0,0 +1,5 @@
+---
+'@openproject/octicons': patch
+---
+
+remove tabindex from octicon svg

lib/octicons_angular/README.md

@@ -91,24 +91,6 @@ 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,17 +15,13 @@ 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 = -1;
   @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 >= 0;
-  }
   @HostBinding('style') get style () {
     return {
       display: 'inline-block',

lib/octicons_react/README.md

@@ -99,24 +99,6 @@ 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,7 +5,6 @@ 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,23 +35,6 @@ 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,7 +15,6 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
       {
         'aria-label': ariaLabel,
         'aria-labelledby': arialabelledby,
-        tabIndex,
         className = defaultClassName,
         fill = 'currentColor',
         size = 16,
@@ -37,8 +36,6 @@ 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,7 +9,6 @@ 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>