vue-accessibility-validatorlisted

# Vue Accessibility Validator ## Activation Triggers This skill activates when: - Creating Vue components - Writing template sections - Adding interactive elements - Mentioning "component", "form", "button" ## Checks ### Check 1: Semantic HTML ```vue <!-- WRONG --> <div @click="handleAction">Click me</div> <!-- CORRECT --> <button type="button" @click="handleAction"> Click me </button> ``` **Rule**: Interactive elements must use semantic HTML (`<button>`, `<a>`, `<input>`) not generic `<div>` or `<span>`. ### Check 2: Form Labels ```vue <!-- WRONG --> <input v-model="email" placeholder="Email" /> <!-- CORRECT --> <label for="email">Email</label> <input id="email" v-model="email" aria-describedby="email-hint" /> <span id="email-hint">Your work email address</span> ``` **Rule**: All form inputs must have associated labels or aria-label. ### Check 3: Keyboard Navigation ```vue <!-- WRONG - Only mouse --> <div @click="toggle" class="dropdown"> <!-- CORRECT - Keyboard accessible --> <button type="button" @click="toggle" @keydown.enter="toggle" @keydown.space.prevent="toggle" :aria-expanded="isOpen" aria-haspopup="listbox" > ``` **Rule**: All interactive elements must be keyboard accessible. ### Check 4: Focus Management ```vue <!-- Modal with focus trap --> <template> <div v-if="isOpen" role="dialog" aria-modal="true" aria-labelledby="modal-title" @keydown.escape="close" > <h2 id="modal-title">Modal Title</h2> <!-- Foc