Cursor rule

1---
2description: Breadcrumb component accessibility compliance pattern
3globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
4alwaysApply: false
5---
6# Breadcrumb Accessibility
7 
8Ensures breadcrumb components follow WCAG compliance and WAI-ARIA Breadcrumb Pattern specifications.
9 
10<rule>
11name: breadcrumb_accessibility_standards
12description: Enforce breadcrumb component accessibility standards and WAI-ARIA Breadcrumb 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      # Navigation landmark requirement
21      - pattern: "(?i)<nav[^>]*(?:breadcrumb|navigation)[^>]*>"
22        pattern_negate: "(aria-label|aria-labelledby)=\"[^\"]+\""
23        message: "Breadcrumb navigation must have aria-label or aria-labelledby attribute."
24 
25      # Current page aria-current requirement
26      - pattern: "(?i)<[^>]*(?:breadcrumb.*current|current.*breadcrumb)[^>]*>"
27        pattern_negate: "aria-current=\"page\""
28        message: "Current page in breadcrumb must have aria-current='page' attribute."
29 
30      # List structure requirement
31      - pattern: "(?i)<nav[^>]*(?:breadcrumb|navigation)[^>]*>"
32        pattern_negate: "<ol[^>]*>"
33        message: "Breadcrumb navigation should use ordered list (ol) for proper structure."
34 
35  - type: suggest
36    message: |
37      **Breadcrumb Component Accessibility Best Practices:**
38 
39      **Required ARIA Attributes:**
40      - **aria-label/aria-labelledby:** On navigation element to describe the breadcrumb trail
41      - **aria-current="page":** On the current page link or element
42      - **role="navigation":** Implicit on nav element, but can be explicit if needed
43 
44      **Structure Requirements:**
45      - Use `<nav>` element as container
46      - Use ordered list (`<ol>`) for breadcrumb items
47      - Use list items (`<li>`) for each breadcrumb level
48      - Current page should be the last item in the list
49      - Use appropriate heading level for the breadcrumb container
50 
51      **Implementation Patterns:**
52 
53      **Basic Breadcrumb:**
54```html
55      <nav aria-label="Breadcrumb">
56        <ol class="breadcrumb">
57          <li class="breadcrumb-item">
58            <a href="/">Home</a>
59          </li>
60          <li class="breadcrumb-item">
61            <a href="/products">Products</a>
62          </li>
63          <li class="breadcrumb-item" aria-current="page">
64            <a href="/products/electronics">Electronics</a>
65          </li>
66        </ol>
67      </nav>
68```
69 
70      **With aria-labelledby:**
71```html
72      <nav aria-labelledby="breadcrumb-heading">
73        <h2 id="breadcrumb-heading" class="visually-hidden">Breadcrumb Navigation</h2>
74        <ol class="breadcrumb">
75          <li class="breadcrumb-item">
76            <a href="/">Home</a>
77          </li>
78          <li class="breadcrumb-item" aria-current="page">
79            <span>Current Page</span>
80          </li>
81        </ol>
82      </nav>
83```
84 
85      **Accessibility Notes:**
86      - Navigation landmark helps screen readers identify the breadcrumb trail
87      - Ordered list provides semantic structure for the navigation hierarchy
88      - aria-current helps users identify their current location
89      - Consider using visually-hidden text for better screen reader context
90      - Ensure sufficient color contrast for all breadcrumb elements
91      - Maintain clear visual separation between items
92      - Use clear, descriptive labels for each level
93 
94      **Testing Checklist:**
95      - Verify navigation landmark is present and properly labeled
96      - Confirm ordered list structure is used
97      - Check aria-current is present on current page
98      - Test with screen readers to ensure proper announcement
99      - Verify visual hierarchy is clear and consistent
100      - Ensure all links are keyboard accessible
101      - Check color contrast meets WCAG requirements
102 
103metadata:
104  priority: high
105  version: 1.0
106</rule>
107