useFocusableInteractive
¥Summary
-
规则生效日期：
v1.8.0¥Rule available since:
v1.8.0 -
诊断类别：
lint/a11y/useFocusableInteractive¥Diagnostic Category:
lint/a11y/useFocusableInteractive -
此规则为推荐规则，默认启用。
¥This rule is recommended, which means is enabled by default.
-
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 error。
¥The default severity of this rule is error.
-
来源：
¥Sources:
¥How to configure
{ "linter": { "rules": { "a11y": { "useFocusableInteractive": "error" } } }}¥Description
具有交互角色和交互处理程序的元素必须是可聚焦的。
¥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
Biome v2.1 中文网 - 粤ICP备13048890号