Aller au contenu
Biome
Docs Playground
Blog

useFocusableInteractive

Ce contenu n’est pas encore disponible dans votre langue.

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.

Examples

Section titled Examples

Invalid

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 />
Section titled Related links