feature: a11y lint rule

[yamanoku]

Propose what kinds of accessibility‑related lint rules would be beneficial for Vize Patina.

https://github.com/ubugeeei/vize/tree/main/crates/vize_patina/src/rules/a11y

[yamanoku]

aria-props

Elements cannot use an invalid ARIA attribute. This will fail if it finds an aria-* property that is not listed in WAI-ARIA States and Properties spec.

Incorrect ARIA attributes can prevent assistive technologies from conveying the intended meaning to users.

Example

✔ Succeed

<template>
  <input aria-labelledby="address" />
</template>

❌ Fail

<template>
  <input aria-labeledby="address" />
</template>

[ubugeeei]

#27

[yamanoku]

aria-role

Elements with ARIA roles must use a valid, non-abstract ARIA role listed in Definition of Roles

Incorrect role can prevent assistive technologies from conveying the intended meaning to users.

Example

✔ Succeed

<template>
  <div role="button" />
  <!-- Good: "button" is a valid ARIA role -->
  <div :role="role" />
  <!-- 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>

[ubugeeei]

#28

[yamanoku]

useUniqueElementIds

I saw this implemented in Biome, where it enforces unique ID usage. Since useId is widely available across frameworks today, implementing this beyond Biome seems valuable.

Example

✔ Succeed

<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <form>
    <label :for="id">Name:</label>
    <input :id="id" type="text" />
  </form>
</template>

❌ Fail

<template>
  <div id=“foo”>bar</div>
  <!-- Bad: id attribute should not be a static string literal. Generate unique IDs using useId() -->
</template>

[yamanoku]

The id attribute can also be used for accessibility by associating elements via aria-labelledby.

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="tac"></span>
<span id="tac">I agree to the terms of service.</span>

[ubugeeei]

#29

[ubugeeei]

Awesome!

[ubugeeei]

Currently, I'm implementing optional "cross-file" analyze in vize/croquis, it might be helpfull to detect some non-unique ids.

[ubugeeei]

relates: #1629

[yamanoku]

I’d be super excited to see this get shipped !