コンテンツにスキップ
Biome
Docs Blog Playground

useFocusableInteractive (since v1.8.0)

このコンテンツはまだ日本語訳がありません。

Diagnostic Category: lint/nursery/useFocusableInteractive

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.

Examples

Section titled Examples

Invalid

Section titled Invalid
<div role="button" />
code-block.jsx:1:1 lint/nursery/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/nursery/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 />
Section titled Related links