| Name                                        | Description | 💼 | 🔧 | ❌ |

| :------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :- | :- | :- |

| [a11y-aria-label-is-well-formatted](docs/rules/a11y-aria-label-is-well-formatted.md) | [aria-label] text should be formatted as you would visual text. | ⚛️ | | |

| [a11y-no-generic-link-text](docs/rules/a11y-no-generic-link-text.md) | disallow generic link text | | | ❌ |

| [a11y-no-visually-hidden-interactive-element](docs/rules/a11y-no-visually-hidden-interactive-element.md) | Ensures that interactive elements are not visually hidden | ⚛️ | | |

| [array-foreach](docs/rules/array-foreach.md) | enforce `for..of` loops over `Array.forEach` | ✅ | | |

| [async-currenttarget](docs/rules/async-currenttarget.md) | disallow `event.currentTarget` calls inside of async functions | 🔍 | | |

| [async-preventdefault](docs/rules/async-preventdefault.md) | disallow `event.preventDefault` calls inside of async functions | 🔍 | | |

| [authenticity-token](docs/rules/authenticity-token.md) | disallow usage of CSRF tokens in JavaScript | 🔐 | | |

| [get-attribute](docs/rules/get-attribute.md) | disallow wrong usage of attribute names | 🔍 | 🔧 | |

| [js-class-name](docs/rules/js-class-name.md) | enforce a naming convention for js- prefixed classes | 🔐 | | |

| [no-blur](docs/rules/no-blur.md) | disallow usage of `Element.prototype.blur()` | 🔍 | | |

| [no-d-none](docs/rules/no-d-none.md) | disallow usage the `d-none` CSS class | 🔐 | | |

| [no-dataset](docs/rules/no-dataset.md) | enforce usage of `Element.prototype.getAttribute` instead of `Element.prototype.datalist` | 🔍 | | |

| [no-dynamic-script-tag](docs/rules/no-dynamic-script-tag.md) | disallow creating dynamic script tags | ✅ | | |

| [no-implicit-buggy-globals](docs/rules/no-implicit-buggy-globals.md) | disallow implicit global variables | ✅ | | |

| [no-inner-html](docs/rules/no-inner-html.md) | disallow `Element.prototype.innerHTML` in favor of `Element.prototype.textContent` | 🔍 | | |

| [no-innerText](docs/rules/no-innerText.md) | disallow `Element.prototype.innerText` in favor of `Element.prototype.textContent` | 🔍 | 🔧 | |

| [no-then](docs/rules/no-then.md) | enforce using `async/await` syntax over Promises | ✅ | | |

| [no-useless-passive](docs/rules/no-useless-passive.md) | disallow marking a event handler as passive when it has no effect | 🔍 | 🔧 | |

| [prefer-observers](docs/rules/prefer-observers.md) | disallow poorly performing event listeners | 🔍 | | |

| [require-passive-events](docs/rules/require-passive-events.md) | enforce marking high frequency event handlers as passive | 🔍 | | |

| [role-supports-aria-props](docs/rules/role-supports-aria-props.md) | Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. | ⚛️ | | |

| [unescaped-html-literal](docs/rules/unescaped-html-literal.md) | disallow unescaped HTML literals | 🔍 | | |

💼 This rule is enabled in the ⚛️ `react` config.

This rule guards against visually hiding interactive elements. If a sighted keyboard user navigates to an interactive element that is visually hidden they might become confused and assume that keyboard focus has been lost.

Note: we are not guarding against visually hidden `input` elements at this time. Some visually hidden inputs might cause a false positive (e.g. some file inputs).

Visually hiding content can be useful when you want to provide information specifically to screen reader users or other assitive technology users while keeping content hidden from sighted users.

Applying the following css will visually hide content while still making it accessible to screen reader users.

clip-path: inset(50%);

height: 1px;

overflow: hidden;

position: absolute;

white-space: nowrap;

width: 1px;

```

👎 Examples of **incorrect** code for this rule:

```jsx

<button className="visually-hidden">Submit</button>

```

```jsx

<VisuallyHidden>

<button>Submit</button>

</VisuallyHidden>

```

```jsx

<VisuallyHidden as="button">Submit</VisuallyHidden>

```

👍 Examples of **correct** code for this rule:

```jsx

<h2 className="visually-hidden">Welcome to GitHub</h2>

```

```jsx

<VisuallyHidden>

<h2>Welcome to GitHub</h2>

</VisuallyHidden>

```

```jsx

<VisuallyHidden as="h2">Welcome to GitHub</VisuallyHidden>

```

## Options

- className - A css className that visually hides content. Defaults to `sr-only`.

- componentName - A react component name that visually hides content. Defaults to `VisuallyHidden`.

- htmlPropName - A prop name used to replace the semantic element that is rendered. Defaults to `as`.

```json

{

"a11y-no-visually-hidden-interactive-element": [

"error",

{

"className": "visually-hidden",

"componentName": "VisuallyHidden",

"htmlPropName": "as"

}

]

}

'github/a11y-no-visually-hidden-interactive-element': 'error',

'a11y-no-visually-hidden-interactive-element': require('./rules/a11y-no-visually-hidden-interactive-element'),

const {getProp, getPropValue} = require('jsx-ast-utils')

const {getElementType} = require('../utils/get-element-type')

const {generateObjSchema} = require('eslint-plugin-jsx-a11y/lib/util/schemas')

const defaultClassName = 'sr-only'

const defaultcomponentName = 'VisuallyHidden'

const defaultHtmlPropName = 'as'

const schema = generateObjSchema({

className: {type: 'string'},

componentName: {type: 'string'},

htmlPropName: {type: 'string'},

const INTERACTIVELEMENTS = ['a', 'button', 'summary', 'select', 'option', 'textarea']

const checkIfInteractiveElement = (context, htmlPropName, node) => {

const elementType = getElementType(context, node.openingElement)

const asProp = getPropValue(getProp(node.openingElement.attributes, htmlPropName))

for (const interactiveElement of INTERACTIVELEMENTS) {

if ((asProp ?? elementType) === interactiveElement) {

return true

}

}

return false

const checkIfVisuallyHiddenAndInteractive = (context, options, node, isParentVisuallyHidden) => {

const {className, componentName, htmlPropName} = options

if (node.type === 'JSXElement') {

const classes = getPropValue(getProp(node.openingElement.attributes, 'className'))

const isVisuallyHiddenElement = node.openingElement.name.name === componentName

const hasSROnlyClass = typeof classes !== 'undefined' && classes.includes(className)

let isHidden = false

if (hasSROnlyClass || isVisuallyHiddenElement || !!isParentVisuallyHidden) {

if (checkIfInteractiveElement(context, htmlPropName, node)) {

return true

}

isHidden = true

}

if (node.children && node.children.length > 0) {

return (

typeof node.children?.find(child =>

checkIfVisuallyHiddenAndInteractive(context, options, child, !!isParentVisuallyHidden || isHidden),

) !== 'undefined'

)

}

}

return false

module.exports = {

meta: {

docs: {

description: 'Ensures that interactive elements are not visually hidden',

url: require('../url')(module),

},

schema: [schema],

},

create(context) {

const {options} = context

const config = options[0] || {}

const className = config.className || defaultClassName

const componentName = config.componentName || defaultcomponentName

const htmlPropName = config.htmlPropName || defaultHtmlPropName

return {

JSXElement: node => {

if (checkIfVisuallyHiddenAndInteractive(context, {className, componentName, htmlPropName}, node, false)) {

context.report({

node,

message:

'Avoid visually hidding interactive elements. Visually hiding interactive elements can be confusing to sighted keyboard users as it appears their focus has been lost when they navigate to the hidden element.',

})

return

}

},

}

},