Cursor rule

1---
2description: Tab component accessibility compliance pattern
3globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
4alwaysApply: false
5---
6# Tab Component Accessibility Standards
7 
8Ensures tab components follow WCAG compliance and WAI-ARIA Tab Pattern specifications.
9 
10<rule>
11name: tab_accessibility_standards
12description: Enforce tab component accessibility standards and WAI-ARIA Tab 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      # Tablist role requirement
21      - pattern: "(?i)<(div|nav|section)[^>]*(?:tab.*list|list.*tab)[^>]*>"
22        pattern_negate: "role=\"tablist\""
23        message: "Tab list container must have role='tablist' attribute."
24 
25      # Tab role requirement
26      - pattern: "(?i)<(button|a|div)[^>]*(?:tab)[^>]*>"
27        pattern_negate: "role=\"tab\""
28        message: "Tab elements must have role='tab' attribute."
29 
30      # Tabpanel role requirement
31      - pattern: "(?i)<(div|section)[^>]*(?:tab.*panel|panel.*tab)[^>]*>"
32        pattern_negate: "role=\"tabpanel\""
33        message: "Tab panel elements must have role='tabpanel' attribute."
34 
35      # Missing aria-selected state
36      - pattern: "(?i)<[^>]*role=\"tab\"[^>]*>"
37        pattern_negate: "aria-selected=\"(true|false)\""
38        message: "Tab elements must have aria-selected attribute set to 'true' or 'false'."
39 
40      # Missing aria-controls
41      - pattern: "(?i)<[^>]*role=\"tab\"[^>]*>"
42        pattern_negate: "aria-controls=\"[^\"]+\""
43        message: "Tab elements must have aria-controls attribute referencing their associated panel."
44 
45      # Missing aria-labelledby on tabpanel
46      - pattern: "(?i)<[^>]*role=\"tabpanel\"[^>]*>"
47        pattern_negate: "aria-labelledby=\"[^\"]+\""
48        message: "Tab panel elements must have aria-labelledby referencing their associated tab."
49 
50      # Missing keyboard event handlers
51      - pattern: "(?i)<[^>]*role=\"tab\"[^>]*>"
52        pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown)"
53        message: "Tab elements should handle keyboard events (Arrow keys, Space, Enter, Home, End)."
54 
55      # Missing tablist label
56      - pattern: "(?i)<[^>]*role=\"tablist\"[^>]*>"
57        pattern_negate: "(aria-labelledby|aria-label)"
58        message: "Tab list must have either aria-labelledby or aria-label for accessibility."
59 
60      # Empty aria-label check
61      - pattern: "(?i)<[^>]*role=\"tablist\"[^>]*aria-label=\"\"[^>]*>"
62        message: "Tab list aria-label should not be empty; provide a meaningful description."
63 
64  - type: suggest
65    message: |
66      **Tab Component Accessibility Best Practices:**
67 
68      **Required ARIA Attributes:**
69      - **role='tablist':** Set on the container of tab elements
70      - **role='tab':** Set on each tab element
71      - **role='tabpanel':** Set on each panel element
72      - **aria-selected:** 'true' for active tab, 'false' for inactive tabs
73      - **aria-controls:** On tab elements, referencing their panel
74      - **aria-labelledby:** On tab panels, referencing their tab
75      - **aria-labelledby/aria-label:** On tablist for accessibility
76 
77      **Optional ARIA Attributes:**
78      - **aria-orientation:** 'vertical' if tabs are vertically oriented
79      - **aria-haspopup:** Set on tabs with popup menus
80      - **aria-disabled:** 'true' if tab cannot be activated
81 
82      **Keyboard Interaction Requirements:**
83      - **Tab:** Move focus into/out of tab list
84      - **Left/Right Arrow:** Move between tabs (horizontal)
85      - **Up/Down Arrow:** Move between tabs (vertical)
86      - **Space/Enter:** Activate focused tab
87      - **Home:** Move to first tab
88      - **End:** Move to last tab
89      - **Shift + F10:** Open popup menu if available
90      - **Delete:** (Optional) Remove tab
91 
92      **Structure Requirements:**
93      - Tab list must contain all tab elements
94      - Each tab must be associated with exactly one panel
95      - Active tab must be visually distinct
96      - Tab panels must be properly labeled
97      - Consider using native button elements for tabs
98 
99      **Implementation Patterns:**
100 
101      **Basic Tab Structure:**
102```html
103      <div role="tablist" aria-label="Settings">
104        <button role="tab"
105                aria-selected="true"
106                aria-controls="panel-1"
107                id="tab-1">
108          Account
109        </button>
110        <button role="tab"
111                aria-selected="false"
112                aria-controls="panel-2"
113                id="tab-2">
114          Security
115        </button>
116      </div>
117 
118      <div role="tabpanel"
119           id="panel-1"
120           aria-labelledby="tab-1">
121        Account settings content...
122      </div>
123      <div role="tabpanel"
124           id="panel-2"
125           aria-labelledby="tab-2"
126           hidden>
127        Security settings content...
128      </div>
129```
130 
131      **Vertical Tab List:**
132```html
133      <div role="tablist"
134           aria-label="Settings"
135           aria-orientation="vertical">
136        <button role="tab"
137                aria-selected="true"
138                aria-controls="panel-1"
139                id="tab-1">
140          Account
141        </button>
142        <button role="tab"
143                aria-selected="false"
144                aria-controls="panel-2"
145                id="tab-2">
146          Security
147        </button>
148      </div>
149```
150 
151      **JavaScript Considerations:**
152      - Implement keyboard navigation between tabs
153      - Handle tab activation on Space/Enter
154      - Update aria-selected states
155      - Manage focus when switching tabs
156      - Handle optional features (Home/End, Delete)
157      - Consider implementing automatic activation
158      - Ensure proper focus management
159 
160      **Accessibility Notes:**
161      - Choose between automatic and manual activation
162      - Ensure visual focus indicators are clear
163      - Test with screen readers for proper announcement
164      - Consider implementing skip links for long tab lists
165      - Maintain proper heading structure within panels
166      - Ensure sufficient color contrast for active/inactive states
167 
168metadata:
169  priority: high
170  version: 1.0
171</rule>
172