useFocusableInteractive
このコンテンツはまだ日本語訳がありません。
Diagnostic Category: lint/a11y/useFocusableInteractive
Since: v1.8.0
Sources:
- Same as:
jsx-a11y/interactive-supports-focus
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.
Examples
Section titled ExamplesInvalid
Section titled Invalid<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.
Valid
Section titled Valid<div role="button" tabIndex={0} /><div />