Cursor rule

1---
2description: Slider component accessibility compliance pattern
3globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
4alwaysApply: false
5---
6# Slider Component Accessibility Standards
7 
8Ensures slider components follow WCAG compliance and WAI-ARIA Slider Pattern specifications.
9 
10<rule>
11name: slider_accessibility_standards
12description: Enforce slider component accessibility standards and WAI-ARIA Slider 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      # Slider role requirement
21      - pattern: "(?i)<(div|input)[^>]*(?:slider|range)[^>]*>"
22        pattern_negate: "role=\"slider\""
23        message: "Slider controls must have role='slider' attribute."
24 
25      # aria-valuenow requirement
26      - pattern: "(?i)<[^>]*role=\"slider\"[^>]*>"
27        pattern_negate: "aria-valuenow=\"[0-9.-]+\""
28        message: "Slider elements must have aria-valuenow attribute set to the current value."
29 
30      # aria-valuemin requirement
31      - pattern: "(?i)<[^>]*role=\"slider\"[^>]*>"
32        pattern_negate: "aria-valuemin=\"[0-9.-]+\""
33        message: "Slider elements must have aria-valuemin attribute set to the minimum allowed value."
34 
35      # aria-valuemax requirement
36      - pattern: "(?i)<[^>]*role=\"slider\"[^>]*>"
37        pattern_negate: "aria-valuemax=\"[0-9.-]+\""
38        message: "Slider elements must have aria-valuemax attribute set to the maximum allowed value."
39 
40      # Missing keyboard event handlers
41      - pattern: "(?i)<[^>]*role=\"slider\"[^>]*>"
42        pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown)"
43        message: "Slider elements should handle keyboard events (Arrow keys, Home, End, Page Up/Down)."
44 
45      # Missing label
46      - pattern: "(?i)<[^>]*role=\"slider\"[^>]*>"
47        pattern_negate: "(aria-labelledby|aria-label)"
48        message: "Slider elements must have either aria-labelledby or aria-label for accessibility."
49 
50  - type: suggest
51    message: |
52      **Slider Component Accessibility Best Practices:**
53 
54      **Required ARIA Attributes:**
55      - **role='slider':** Set on the slider control element
56      - **aria-valuenow:** Current value of the slider
57      - **aria-valuemin:** Minimum allowed value
58      - **aria-valuemax:** Maximum allowed value
59      - **aria-valuetext:** (Optional) User-friendly text representation of the value
60      - **aria-orientation:** (Optional) 'vertical' for vertical sliders, defaults to 'horizontal'
61      - **aria-labelledby:** Reference to visible label, OR
62      - **aria-label:** Descriptive label if no visible label exists
63 
64      **Keyboard Interaction Requirements:**
65      - **Right/Up Arrow:** Increase value by one step
66      - **Left/Down Arrow:** Decrease value by one step
67      - **Home:** Set to minimum value
68      - **End:** Set to maximum value
69      - **Page Up:** (Optional) Increase by larger step
70      - **Page Down:** (Optional) Decrease by larger step
71 
72      **Implementation Example:**
73```html
74      <div class="slider-container">
75        <label id="slider-label" for="slider">Select a value:</label>
76        <div class="slider-wrapper">
77          <div role="slider"
78               id="slider"
79               tabindex="0"
80               aria-labelledby="slider-label"
81               aria-valuemin="0"
82               aria-valuemax="100"
83               aria-valuenow="50"
84               aria-valuetext="50%">
85            <div class="slider-track">
86              <div class="slider-fill" style="width: 50%"></div>
87              <div class="slider-thumb" style="left: 50%"></div>
88            </div>
89          </div>
90          <div class="slider-value" aria-hidden="true">50%</div>
91        </div>
92      </div>
93 
94      <script>
95        const slider = document.querySelector('[role="slider"]');
96        const thumb = slider.querySelector('.slider-thumb');
97        const fill = slider.querySelector('.slider-fill');
98        const valueDisplay = document.querySelector('.slider-value');
99 
100        const min = parseInt(slider.getAttribute('aria-valuemin'));
101        const max = parseInt(slider.getAttribute('aria-valuemax'));
102        const step = 1; // Define step value
103 
104        function updateSlider(value) {
105          // Ensure value is within bounds
106          value = Math.max(min, Math.min(max, value));
107 
108          // Update ARIA attributes
109          slider.setAttribute('aria-valuenow', value);
110          slider.setAttribute('aria-valuetext', `${value}%`);
111 
112          // Update visual elements
113          thumb.style.left = `${value}%`;
114          fill.style.width = `${value}%`;
115          valueDisplay.textContent = `${value}%`;
116        }
117 
118        // Keyboard interaction
119        slider.addEventListener('keydown', (event) => {
120          let newValue = parseInt(slider.getAttribute('aria-valuenow'));
121 
122          switch(event.key) {
123            case 'ArrowRight':
124            case 'ArrowUp':
125              newValue += step;
126              break;
127            case 'ArrowLeft':
128            case 'ArrowDown':
129              newValue -= step;
130              break;
131            case 'Home':
132              newValue = min;
133              break;
134            case 'End':
135              newValue = max;
136              break;
137            case 'PageUp':
138              newValue += step * 10; // Larger step
139              break;
140            case 'PageDown':
141              newValue -= step * 10; // Larger step
142              break;
143            default:
144              return;
145          }
146 
147          event.preventDefault();
148          updateSlider(newValue);
149        });
150      </script>
151```
152 
153      **JavaScript Considerations:**
154      - Implement all required keyboard interactions
155      - Update ARIA attributes dynamically
156      - Ensure values stay within min/max bounds
157      - Provide visual feedback for value changes
158      - Handle both mouse and touch interactions
159      - Consider implementing smooth animations
160      - Support both horizontal and vertical orientations
161 
162      **Accessibility Notes:**
163      - Ensure proper focus management
164      - Provide clear visual focus indicators
165      - Support high contrast mode
166      - Test with screen readers
167      - Consider touch target sizes
168      - Provide visual feedback for interactions
169      - Support both mouse and keyboard users
170      - Consider adding value announcements for screen readers
171 
172metadata:
173  priority: high
174  version: 1.0
175</rule>
176