Cursor rule

1---
2description: Sale price component accessibility compliance pattern
3globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
4alwaysApply: false
5---
6# Sale Price Component Accessibility Standards
7 
8Ensures sale price components follow WCAG compliance and provide proper context for screen reader users.
9 
10<rule>
11name: sale_price_accessibility_standards
12description: Enforce sale price component accessibility standards and screen reader context compliance
13filters:
14  - type: file_extension
15    pattern: "\\.(vue|jsx|tsx|html|liquid|php|js|ts)$"
16 
17actions:
18  - type: enforce
19    conditions:
20      # Sale price missing screen reader context
21      - pattern: "(?i)<[^>]*(?:sale|discount|price)[^>]*>.*\\$[0-9]+.*\\$[0-9]+"
22        pattern_negate: "(class.*sr-only|class.*visually-hidden)"
23        message: "Sale price components must include visually hidden text to explain regular and sale prices."
24 
25      # Strike-through price missing context
26      - pattern: "(?i)<[^>]*(?:strike|line-through|text-decoration)[^>]*>.*\\$[0-9]+"
27        pattern_negate: "(Regular price|Original price|Was|Before)"
28        message: "Strike-through prices must include visually hidden context like 'Regular price' or 'Original price'."
29 
30      # Sale price missing context
31      - pattern: "(?i)<[^>]*(?:sale|discount|offer)[^>]*>.*\\$[0-9]+"
32        pattern_negate: "(Sale price|Now|Current price|Discounted price)"
33        message: "Sale prices must include visually hidden context like 'Sale price' or 'Now'."
34 
35      # Missing visually hidden elements for context
36      - pattern: "(?i)<[^>]*class=\"[^\"]*(?:sale|price|discount)[^\"]*\"[^>]*>"
37        pattern_negate: "(sr-only|visually-hidden|screen-reader-only)"
38        message: "Sale price components should include visually hidden elements for screen reader context."
39 
40      # Unnecessary aria-hidden on visible price content
41      - pattern: "(?i)<[^>]*class=\"[^\"]*(?:price|sale|discount)[^\"]*\"[^>]*aria-hidden=\"true\"[^>]*>"
42        message: "Visible price content should not be hidden from screen readers with aria-hidden. Only decorative elements should use aria-hidden."
43 
44  - type: suggest
45    message: |
46      **Sale Price Component Accessibility Best Practices:**
47 
48      **Required Screen Reader Context:**
49      - **Regular Price:** Must include "Regular price" or "Original price" context
50      - **Sale Price:** Must include "Sale price" or "Now" context
51      - **Visual Hiding:** Use visually hidden elements to provide context without affecting visual design
52 
53      **Screen Reader Announcement Requirements:**
54      - Regular price should announce: "Regular price, $X"
55      - Sale price should announce: "Sale price, $Y"
56      - Discount should announce: "X% OFF" (visible badge text is sufficient)
57      - Complete announcement: "Regular price, $45, Sale price, $35, 20% OFF"
58 
59      **Implementation Patterns:**
60 
61      **Basic Sale Price Structure:**
62```html
63      <div class="price-container">
64        <span class="sr-only">Regular price, </span>
65        <span class="regular-price">$45.00</span>
66        <span class="sr-only">Sale price, </span>
67        <span class="sale-price">$35.00</span>
68        <span class="discount-badge">20% OFF</span>
69      </div>
70```
71 
72      **CSS for Visually Hidden Elements:**
73```css
74      .sr-only {
75        position: absolute;
76        width: 1px;
77        height: 1px;
78        padding: 0;
79        margin: -1px;
80        overflow: hidden;
81        clip: rect(0, 0, 0, 0);
82        white-space: nowrap;
83        border: 0;
84      }
85```
86 
87      **Complex Sale Price Examples:**
88 
89      **With Multiple Discounts:**
90```html
91      <div class="price-container">
92        <span class="sr-only">Regular price, </span>
93        <span class="regular-price">$100.00</span>
94        <span class="sr-only">Sale price, </span>
95        <span class="sale-price">$75.00</span>
96        <span class="discount">25% OFF</span>
97        <span class="sr-only">Member price, </span>
98        <span class="member-price">$67.50</span>
99        <span class="savings-amount">Extra 10% OFF</span>
100      </div>
101```
102 
103      **With Currency and Formatting:**
104```html
105      <div class="price-container">
106        <span class="sr-only">Regular price, </span>
107        <span class="regular-price">$1,299.99</span>
108        <span class="sr-only">Sale price, </span>
109        <span class="sale-price">$999.99</span>
110        <span class="savings-amount">Save $300</span>
111      </div>
112```
113 
114      **Button Implementation:**
115```html
116      <!-- Good: Natural button text -->
117      <button class="add-to-cart-btn">
118        Add to Cart
119      </button>
120```
121 
122      **JavaScript Considerations:**
123      - Dynamically update visually hidden context when prices change
124      - Calculate and update discount percentages automatically
125      - Handle currency formatting for different locales
126      - Ensure context is updated when prices are updated via AJAX
127 
128      **Dynamic Price Updates:**
129```javascript
130      function updateSalePrice(regularPrice, salePrice) {
131        const regularElement = document.querySelector('.regular-price');
132        const saleElement = document.querySelector('.sale-price');
133        const discountElement = document.querySelector('.discount');
134 
135        // Calculate discount percentage
136        const discount = Math.round(((regularPrice - salePrice) / regularPrice) * 100);
137 
138        // Update visual elements
139        regularElement.textContent = `$${regularPrice.toFixed(2)}`;
140        saleElement.textContent = `$${salePrice.toFixed(2)}`;
141        discountElement.textContent = `${discount}% OFF`;
142      }
143```
144 
145      **Accessibility Notes:**
146      - Screen reader context should be concise but clear
147      - Avoid redundant information in visual and screen reader content
148      - Test with actual screen readers to ensure proper announcement
149      - Consider using aria-live regions for dynamic price updates
150      - Ensure price information is accessible in product listings and detail pages
151      - Handle cases where sale prices are temporary or time-limited
152      - Provide context for different types of discounts (percentage, fixed amount, member-only)
153      - Do not hide visible price content from screen readers with aria-hidden
154      - Let natural button text serve as the accessible name when sufficient
155 
156      **Common Patterns to Avoid:**
157      - Don't rely solely on visual styling (strike-through, colors) to convey meaning
158      - Don't use generic terms like "price" without context
159      - Don't announce prices without indicating which is regular vs sale
160      - Don't forget to announce discount percentages or savings amounts
161      - Don't use decorative elements without proper screen reader alternatives
162      - Don't hide visible price content with aria-hidden="true"
163      - Don't duplicate discount information in visually hidden text when visible badges are sufficient
164 
165      **Color Contrast Requirements:**
166      - Ensure all text meets WCAG 2.2 contrast requirements (4.5:1 for normal text)
167      - Savings amounts and discount text must be readable against background
168      - Test contrast ratios for all price-related text elements
169      - Use darker colors for better accessibility (e.g., #157347 instead of #28a745)
170 
171metadata:
172  priority: high
173  version: 1.0
174</rule>
175