aria-role

Elements with ARIA roles must use a valid, non-abstract ARIA role.

🔧 Options

This rule takes one optional object argument of type object:

{
  "rules": {
    "vuejs-accessibility/aria-role": ["error", { "ignoreNonDOM": true }]
  }
}

✔ Succeed

<template>
  <div role="button" />
  <!-- Good: "button" is a valid ARIA role -->
  <div :role="role" />
  <!-- Good: role is a variable & cannot be determined until runtime. -->
  <div />
  <!-- Good: No ARIA role -->
  <Foo role="test" />
  <!-- Good: ignoreNonDOM is set to true -->
</template>

❌ Fail

<template>
  <div role="datepicker" />
  <!-- Bad: "datepicker" is not an ARIA role -->
  <div role="range" />
  <!-- Bad: "range" is an _abstract_ ARIA role -->
</template>

📚 Resources

• WAI-ARIA site.
• AX_ARIA_01
• DPUB-ARIA roles