Cursor rule

1---
2description: Tooltip component accessibility compliance pattern
3globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
4alwaysApply: false
5---
6# Tooltip Component Accessibility Standards
7 
8Ensures tooltip components follow WCAG compliance and WAI-ARIA Tooltip Pattern specifications.
9 
10<rule>
11name: tooltip_accessibility_standards
12description: Enforce tooltip component accessibility standards and WAI-ARIA Tooltip 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      # Tooltip trigger role requirement
21      - pattern: "(?i)<button[^>]*(?:tooltip|info|help)[^>]*>"
22        pattern_negate: "role=\"button\""
23        message: "Tooltip trigger buttons should have role='button' (or use native button element which has implicit role)."
24 
25      # Tooltip trigger missing aria-expanded
26      - pattern: "(?i)<button[^>]*(?:tooltip|info|help)[^>]*>"
27        pattern_negate: "aria-expanded=\"(true|false)\""
28        message: "Tooltip trigger buttons must have aria-expanded attribute set to 'true' or 'false'."
29 
30      # Tooltip trigger missing aria-controls
31      - pattern: "(?i)<button[^>]*(?:tooltip|info|help)[^>]*>"
32        pattern_negate: "aria-controls=\"[^\"]+\""
33        message: "Tooltip trigger buttons must have aria-controls attribute referencing the ID of the associated tooltip."
34 
35      # Tooltip container missing role
36      - pattern: "(?i)<(div|span)[^>]*(?:tooltip|info|help)[^>]*>"
37        pattern_negate: "role=\"tooltip\""
38        message: "Tooltip containers must have role='tooltip' attribute."
39 
40      # Tooltip missing proper identification
41      - pattern: "(?i)<[^>]*role=\"tooltip\"[^>]*>"
42        pattern_negate: "id=\"[^\"]+\""
43        message: "Tooltip containers must have unique ID attributes for aria-controls reference."
44 
45      # Missing keyboard event handlers
46      - pattern: "(?i)<button[^>]*(?:tooltip|info|help)[^>]*>"
47        pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown)"
48        message: "Tooltip trigger buttons should handle keyboard events (Enter, Space, Escape)."
49 
50  - type: suggest
51    message: |
52      **Tooltip Component Accessibility Best Practices:**
53 
54      **Required ARIA Attributes:**
55      - **role='button':** Set on tooltip trigger elements (or use native button)
56      - **role='tooltip':** Set on tooltip container elements
57      - **aria-expanded:** 'true' if tooltip is visible, 'false' if hidden
58      - **aria-controls:** Reference to the ID of the associated tooltip content
59 
60      **Interaction Patterns:**
61 
62      **Mouse Hover Interaction:**
63      - Show tooltip on activator mouse hover
64      - Hide tooltip on activator mouse leave
65      - Keep tooltip visible when hovering over tooltip container
66      - No click required for hover interaction
67 
68      **Mouse Click Interaction:**
69      - Show tooltip on activator mouse hover
70      - Hide tooltip on activator mouse click
71      - Show tooltip again on activator mouse click
72      - Toggle behavior for click interaction
73 
74      **Keyboard Interaction:**
75      - Show tooltip on Enter or Space keypress
76      - Hide tooltip on Escape keypress
77      - Focus management should be handled appropriately
78 
79      **Mobile/Touch Interaction:**
80      - Show tooltip on activator click/touch
81      - Hide tooltip on activator or document click/touch
82      - No hover events on touch devices
83 
84      **DOM Structure Requirements:**
85      - Tooltip content must be a sibling to the trigger element
86      - Tooltip should be positioned after the trigger in DOM order
87      - Use CSS positioning for visual placement
88      - Ensure tooltip is visible in the viewport
89 
90      **Implementation Patterns:**
91 
92      **Basic Tooltip Structure:**
93```html
94      <div class="tooltip-wrapper">
95        <button class="tooltip-trigger"
96                role="button"
97                aria-expanded="false"
98                aria-controls="tooltip-1">
99          Trigger Text
100        </button>
101        <div id="tooltip-1"
102             role="tooltip">
103          Tooltip content
104        </div>
105      </div>
106```
107 
108      **JavaScript Considerations:**
109      - Implement proper event listeners for each interaction type
110      - Handle touch device detection
111      - Manage focus and blur events
112      - Ensure proper event cleanup
113      - Handle viewport positioning
114      - Implement proper event delegation for document clicks
115      - Track click state to prevent hover interference
116      - Handle state transitions between interaction types
117      - Maintain tooltip visibility when hovering over tooltip content
118 
119      **Accessibility Notes:**
120      - Tooltips should not contain interactive elements
121      - Consider using native title attribute for simple tooltips
122      - Ensure tooltip content is accessible to screen readers
123      - Test with screen readers to ensure proper announcement
124      - Consider using aria-live regions for dynamic content
125 
126metadata:
127  priority: high
128  version: 1.0
129</rule>
130