useFocusableInteractive
诊断类别：lint/a11y/useFocusableInteractive
¥Diagnostic Category: lint/a11y/useFocusableInteractive
自从：v1.8.0
¥Since: v1.8.0
来源：
¥Sources:
具有交互角色和交互处理程序的元素必须是可聚焦的。
¥Elements with an interactive role and interaction handlers must be focusable.
具有交互角色的 HTML 元素必须定义 tabIndex 以确保它们可聚焦。如果没有 tabIndex，辅助技术可能无法将这些元素识别为交互式元素。你也可以考虑从交互角色切换到其语义 HTML 元素。
¥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
¥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
<div role="button" tabIndex={0} /><div />¥Related links