跳转到内容

useFocusableInteractive

Diagnostic Category: lint/a11y/useFocusableInteractive

Since: v1.8.0

Sources:

Elements with an interactive role and interaction handlers must be focusable.

HTML elements with interactive roles must have tabIndex defined to ensure they are focusable. Without tabIndex, assistive technologies may not recognize these elements as interactive. You could also consider switching from an interactive role to its semantic HTML element instead.

<div role="button" />
code-block.jsx:1:1 lint/a11y/useFocusableInteractive ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The HTML element with the interactive role “button” is not focusable.

> 1 │ <div role=“button” />
^^^^^^^^^^^^^^^^^^^^^
2 │

A non-interactive HTML element that is not focusable may not be reachable for users that rely on keyboard navigation, even with an added role like “button”.

Add a tabIndex attribute to make this element focusable.

<div role="tab" />
code-block.jsx:1:1 lint/a11y/useFocusableInteractive ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The HTML element with the interactive role “tab” is not focusable.

> 1 │ <div role=“tab” />
^^^^^^^^^^^^^^^^^^
2 │

A non-interactive HTML element that is not focusable may not be reachable for users that rely on keyboard navigation, even with an added role like “tab”.

Add a tabIndex attribute to make this element focusable.

<div role="button" tabIndex={0} />
<div />