Cursor rule

1---
2description: Switch component accessibility compliance pattern
3globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
4alwaysApply: false
5---
6# Switch Component Accessibility Standards
7 
8Ensures switch components follow WCAG compliance and WAI-ARIA Switch Pattern specifications.
9 
10<rule>
11name: switch_accessibility_standards
12description: Enforce switch component accessibility standards and WAI-ARIA Switch Pattern compliance
13filters:
14  - type: file_extension
15    pattern: "\\.(vue|jsx|tsx|html|liquid|php|js|ts)$"
16 
17actions:
18  - type: enforce
19    conditions:
20      # Switch role requirement
21      - pattern: "(?i)<(div|span|button)[^>]*(?:switch|toggle)[^>]*>"
22        pattern_negate: "role=\"switch\""
23        message: "Switch elements must have role='switch' attribute."
24 
25      # Missing aria-checked state
26      - pattern: "(?i)<[^>]*role=\"switch\"[^>]*>"
27        pattern_negate: "aria-checked=\"(true|false)\""
28        message: "Switch elements must have aria-checked attribute set to 'true' or 'false'."
29 
30      # Missing accessible label
31      - pattern: "(?i)<[^>]*role=\"switch\"[^>]*>"
32        pattern_negate: "(aria-labelledby|aria-label)"
33        message: "Switch elements must have either aria-labelledby or aria-label for accessibility."
34 
35      # Empty aria-label check
36      - pattern: "(?i)<[^>]*role=\"switch\"[^>]*aria-label=\"\"[^>]*>"
37        message: "Switch aria-label should not be empty; provide a meaningful description."
38 
39      # Missing keyboard event handlers
40      - pattern: "(?i)<[^>]*role=\"switch\"[^>]*>"
41        pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown)"
42        message: "Switch elements should handle keyboard events (Space, optionally Enter)."
43 
44      # Switch group missing proper structure
45      - pattern: "(?i)<(div|section)[^>]*(?:switch.*group|group.*switch)[^>]*>"
46        pattern_negate: "(role=\"group\"|fieldset)"
47        message: "Switch groups must use role='group' or fieldset element."
48 
49      # Switch group missing label
50      - pattern: "(?i)<[^>]*role=\"group\"[^>]*>"
51        pattern_negate: "(aria-labelledby|legend)"
52        message: "Switch groups must have aria-labelledby or legend element for labeling."
53 
54  - type: suggest
55    message: |
56      **Switch Component Accessibility Best Practices:**
57 
58      **Required ARIA Attributes:**
59      - **role='switch':** Set on the input element
60      - **aria-checked:** 'true' if switch is on, 'false' if off
61      - **aria-labelledby:** Reference to visible label, OR
62      - **aria-label:** Descriptive label if no visible label exists
63 
64      **Optional ARIA Attributes:**
65      - **aria-describedby:** Reference to additional descriptive text
66      - **aria-disabled:** 'true' if switch cannot be toggled
67 
68      **Keyboard Interaction Requirements:**
69      - **Space:** Toggle switch state
70      - **Enter:** (Optional) Toggle switch state
71      - **Tab/Shift+Tab:** Move through all focusable elements in page order
72 
73      **Structure Requirements:**
74      - Switch must have a visible label that doesn't change with state
75      - Use semantic HTML within the switch (buttons, spans)
76      - Provide clear visual focus indicators
77      - Consider using native checkbox input with role='switch' for better semantics
78 
79      **Implementation Patterns:**
80 
81      **Basic Switch:**
82```html
83      <div class="switch">
84        <input type="checkbox"
85               id="notifications"
86               role="switch"
87               aria-checked="false"
88               tabindex="0">
89        <span class="switch-slider"></span>
90      </div>
91      <label for="notifications">Notifications</label>
92```
93 
94      **Switch with Description:**
95```html
96      <div class="switch">
97        <input type="checkbox"
98               id="dark-mode"
99               role="switch"
100               aria-checked="false"
101               tabindex="0"
102               aria-describedby="dark-mode-desc">
103        <span class="switch-slider"></span>
104      </div>
105      <label for="dark-mode">Dark Mode</label>
106      <span id="dark-mode-desc">Enable dark mode for reduced eye strain</span>
107```
108 
109      **Switch Group:**
110```html
111      <fieldset>
112        <legend>Notification Settings</legend>
113        <div class="switch">
114          <input type="checkbox"
115                 id="email-notifications"
116                 role="switch"
117                 aria-checked="false"
118                 tabindex="0">
119          <span class="switch-slider"></span>
120        </div>
121        <label for="email-notifications">Email Notifications</label>
122      </fieldset>
123```
124 
125      **JavaScript Considerations:**
126      - Implement Space and optional Enter key handlers
127      - Update aria-checked state when switch toggles
128      - Ensure focus management is maintained
129      - Consider implementing disabled state
130      - Use CSS transitions for smooth state changes
131 
132      **Accessibility Notes:**
133      - Choose between switch, checkbox, or toggle button based on semantics
134      - Use switch when on/off semantics are clearer than checked/unchecked
135      - Ensure visual state changes are clear and maintainable
136      - Test with screen readers to ensure proper announcement
137      - Consider implementing a visible focus indicator
138 
139metadata:
140  priority: high
141  version: 1.0
142</rule>
143