Horizon update to main

.cursor/prompts/fix-accesibility-issue.md

@@ -0,0 +1,90 @@
+# Fix Accessibility Issue
+
+Analyze and fix accessibility issues in web applications, following the standard GitHub issue workflow with accessibility-specific considerations.
+
+## Usage
+
+```
+Fix accessibility issue in [COMPONENT_NAME] or Fix GitHub accessibility issue #[NUMBER]
+```
+
+## Accessibility Rules Reference
+
+**IMPORTANT**: Use the `fetch_rules` tool to access specific accessibility rules for components you're working on:
+
+- `accordion-accessibility`: Accordion component ARIA patterns
+- `breadcrumb-accessibility`: Breadcrumb navigation patterns
+- `carousel-accessibility`: Carousel/slider ARIA compliance
+- `cart-drawer-accessibility`: Cart drawer accessibility patterns
+- `color-swatch-accessibility`: Color swatch component patterns
+- `combobox-accessibility`: Combobox/dropdown ARIA patterns
+- `disclosure-accessibility`: Disclosure/collapsible content patterns
+- `dropdown-navigation-accessibility`: Navigation dropdown patterns
+- `modal-accessibility`: Modal/dialog ARIA Dialog Pattern
+- `product-card-accessibility`: Product card accessibility patterns
+- `product-filter-accessibility`: Product filtering interface patterns
+- `sale-price-accessibility`: Sale price display patterns
+- `slider-accessibility`: Slider/range input patterns
+- `switch-accessibility`: Toggle switch patterns
+- `tab-accessibility`: Tab interface patterns
+- `tooltip-accessibility`: Tooltip accessibility patterns
+
+Always fetch and follow the relevant rule(s) for the component you're fixing.
+
+## Base Workflow
+
+**Follow the complete workflow from `fix-github-issue` command**, including:
+
+- Testing requirements (full test suite with `--reporter=line`)
+- Commit standards (one-liner messages only)
+- Test failure handling and selector updates
+- Force push safety with `--force-with-lease`
+- Write down learnings as a last step
+
+## Accessibility-Specific Principles
+
+### Critical Implementation Rules
+
+- **Role must be on the element that contains the items** - not the wrapper
+- **Screen readers need direct parent-child relationship** between role and items
+- **Test with actual screen readers**, not just markup validation
+- **Fetch specific component rules** before implementing fixes
+
+### Testing Requirements
+
+In addition to standard testing requirements:
+
+- **Update page object models** when changing roles (e.g., `navigation` → `menubar`)
+- **Test with screen readers** to verify actual behavior, not just markup
+- **Verify individual items are recognized**, not just containers
+- **Test focus states thoroughly** by navigating away and back to components
+
+### Focus Management Best Practices
+
+- **Consistent focus behavior** across all interaction methods (keyboard vs mouse)
+- **Focus state bugs are subtle** - may look correct but behave wrong on subsequent interactions
+- **Reset focus state properly** when closing dropdowns/menus with ESC vs selection
+- **Centralize focus management logic** to avoid duplication and inconsistency
+
+### Performance Considerations
+
+- **Complex keyboard navigation can introduce lag** - balance functionality with performance
+- **Test on slower devices** to ensure accessibility JavaScript doesn't impact UX
+- **Consider simpler solutions first** before implementing custom keyboard handling
+
+### Implementation Guidelines
+
+- **Fetch and follow existing rules** for the component type you're working on
+- **Search for existing ARIA patterns** in the codebase first
+- **Make minimal changes** that improve accessibility
+- **Focus on semantic correctness** over visual changes
+- **Ensure backward compatibility**
+- **Don't over-engineer** - native browser behavior often suffices
+- **Use `aria-labelledby`** when referencing existing visible text instead of duplicating with `aria-label`
+
+### Code Quality Standards
+
+- **Avoid duplicate logic** between keyboard and mouse interaction handlers
+- **Single responsibility principle** - separate ARIA state management from focus management
+- **Centralize common patterns** like focus reset and state management
+- **Refactor when you find redundancy** in accessibility implementations

.cursor/prompts/fix-breaking-changes.md

@@ -0,0 +1,246 @@
+# Breaking Changes Fix Command
+
+## Command: Fix Shopify Theme Breaking Changes
+
+### Prerequisites
+
+- `breaking-changes.md` file exists in project root with fix instructions
+- Modify files in the `templates/` folder and `config/settings_data.json`
+- Use scripts when possible, clean up temporary files afterward
+
+### Step-by-Step Process
+
+1. **Analyze Breaking Changes Documentation**
+
+   - Read the `breaking-changes.md` file to understand what needs to be fixed
+   - Identify the specific changes required based on the documentation
+
+   **Look for:**
+
+   - Settings that need to be removed
+   - Block types that need to be changed
+   - Property values that need to be updated
+   - Context changes (e.g., `closest.product` vs explicit settings)
+
+2. **Create Adaptable Fix Script Template**
+   Create `scripts/fix-breaking-changes.js` and customize the `applyFixes` function based on breaking-changes.md:
+
+   ```javascript
+   #!/usr/bin/env node
+   const fs = require('fs');
+   const path = require('path');
+   const templatesDir = './templates';
+   const configFile = './config/settings_data.json';
+
+   // ========================================
+   // CUSTOMIZE THIS SECTION BASED ON breaking-changes.md
+   // ========================================
+   function applyFixes(obj) {
+     if (typeof obj !== 'object' || obj === null) return obj;
+     if (Array.isArray(obj)) return obj.map(applyFixes);
+
+     const result = { ...obj };
+
+     // ADD YOUR BREAKING CHANGE FIXES HERE
+     // Examples based on common patterns:
+
+     // 1. Remove specific settings (adapt key/value as needed)
+     if (result.settings) {
+       // Example: Remove closest.product/collection references
+       // if (result.settings.product === "{{ closest.product }}") delete result.settings.product;
+       // if (result.settings.collection === "{{ closest.collection }}") delete result.settings.collection;
+       // Example: Remove deprecated settings
+       // delete result.settings.deprecated_setting;
+     }
+
+     // 2. Update block types (adapt old/new types as needed)
+     // Example: Change block types in specific contexts
+     // if (result.type === 'old-block-type') result.type = 'new-block-type';
+
+     // 3. Update setting values (adapt property/old/new values as needed)
+     // if (result.settings && result.settings.some_property === 'old-value') {
+     //   result.settings.some_property = 'new-value';
+     // }
+
+     // 4. Rename properties (adapt old/new property names as needed)
+     // if (result.old_property_name) {
+     //   result.new_property_name = result.old_property_name;
+     //   delete result.old_property_name;
+     // }
+
+     // Recursively process nested objects
+     for (const key in result) {
+       if (typeof result[key] === 'object' && result[key] !== null) {
+         result[key] = applyFixes(result[key]);
+       }
+     }
+
+     return result;
+   }
+   // ========================================
+   // END CUSTOMIZATION SECTION
+   // ========================================
+
+   function processTemplateFile(filePath) {
+     try {
+       console.log(`Processing ${filePath}...`);
+       const content = fs.readFileSync(filePath, 'utf8');
+
+       // Preserve comment headers
+       const commentMatch = content.match(/^(\/\*[\s\S]*?\*\/)\s*/);
+       const comment = commentMatch ? commentMatch[1] : '';
+       const jsonContent = commentMatch ? content.slice(commentMatch[0].length) : content;
+
+       // Parse and apply fixes
+       const data = JSON.parse(jsonContent);
+       const processedData = applyFixes(data);
+
+       // Write back with preserved formatting
+       const updatedJsonContent = JSON.stringify(processedData, null, 2);
+       const updatedContent = comment ? comment + '\n' + updatedJsonContent : updatedJsonContent;
+
+       fs.writeFileSync(filePath, updatedContent);
+       console.log(`✓ Updated ${filePath}`);
+     } catch (error) {
+       console.error(`Error processing ${filePath}:`, error.message);
+     }
+   }
+
+   function processConfigFile(filePath) {
+     try {
+       console.log(`Processing ${filePath}...`);
+       const content = fs.readFileSync(filePath, 'utf8');
+       const data = JSON.parse(content);
+       const processedData = applyFixes(data);
+
+       const updatedContent = JSON.stringify(processedData, null, 2);
+       fs.writeFileSync(filePath, updatedContent);
+       console.log(`✓ Updated ${filePath}`);
+     } catch (error) {
+       console.error(`Error processing ${filePath}:`, error.message);
+     }
+   }
+
+   function main() {
+     console.log('🔧 Fixing breaking changes in template files and config...\n');
+
+     // Process template files
+     const files = fs.readdirSync(templatesDir);
+     const jsonFiles = files.filter((file) => file.endsWith('.json'));
+
+     if (jsonFiles.length > 0) {
+       console.log(`Found ${jsonFiles.length} template files to process:\n`);
+       jsonFiles.forEach((file) => {
+         const filePath = path.join(templatesDir, file);
+         processTemplateFile(filePath);
+       });
+     } else {
+       console.log('No JSON template files found.');
+     }
+
+     // Process config file
+     if (fs.existsSync(configFile)) {
+       console.log(`\nProcessing config file: ${configFile}`);
+       processConfigFile(configFile);
+     } else {
+       console.log(`\nConfig file not found: ${configFile}`);
+     }
+
+     console.log('\n✅ All template files and config have been processed!');
+     console.log('Next: Run theme check to verify fixes');
+   }
+
+   if (require.main === module) main();
+   ```
+
+3. **Customize the Fix Script**
+   Based on your `breaking-changes.md` analysis, uncomment and modify the relevant fix patterns in the `applyFixes` function.
+
+   **Common Fix Patterns:**
+
+   - **Settings Removal**: `if (result.settings.key === 'value') delete result.settings.key;`
+   - **Block Type Changes**: `if (result.type === 'old-type') result.type = 'new-type';`
+   - **Value Updates**: `if (result.settings.prop === 'old') result.settings.prop = 'new';`
+   - **Property Renaming**: `result.newName = result.oldName; delete result.oldName;`
+
+4. **Execute Fix Script**
+
+   ```bash
+   node fix-breaking-changes.js
+   ```
+
+5. **Verify Fixes**
+
+   ```bash
+   shopify theme check --fail-level error
+   ```
+
+6. **Review and Iterate**
+   If theme check still shows errors:
+
+   - Analyze remaining issues
+   - Update the `applyFixes` function
+   - Re-run the script
+   - Verify again
+
+7. **Handle Issues Outside Templates and Config**
+   If theme check still fails after template and config fixes, some issues may require changes outside the `templates/` folder and `config/settings_data.json`.
+
+   **STOP HERE** and:
+
+   - Run theme check again to capture remaining errors
+   - Analyze which files outside `templates/` and `config/` need changes
+   - Identify what specific changes are required
+
+   **Create a summary report:**
+
+   - List which files outside `templates/` and `config/` need changes
+   - Document what specific changes are required
+   - Note that these fixes require manual intervention
+   - Examples of files that might need fixes:
+     - `sections/*.liquid`
+     - `blocks/*.liquid`
+     - `snippets/*.liquid`
+     - `assets/*.js` or `assets/*.css`
+     - Schema files in `schemas/`
+
+   **Report format:**
+
+   🚫 BREAKING CHANGES REQUIRING MANUAL FIXES OUTSIDE TEMPLATES/ AND CONFIG/
+
+   The following issues cannot be resolved by modifying templates/ and config/ only:
+
+   1. [File path] - [Description of required change]
+   2. [File path] - [Description of required change]
+
+   These require manual review and fixes in non-template and non-config files.
+
+8. **Clean Up**
+
+   ```bash
+   rm scripts/fix-breaking-changes.js
+   # Keep remaining-issues.txt if there are unresolved issues
+   ```
+
+### Expected Outcome
+
+- All breaking changes in template files and config are fixed
+- Theme check passes with no errors
+- Template files and config follow new architecture requirements
+- Temporary files are cleaned up
+
+### Framework Benefits
+
+- **Adaptable**: Easily customizable for any breaking change type
+- **Reusable**: Same process works for future releases
+- **Safe**: Preserves JSON formatting and comment headers
+- **Comprehensive**: Handles nested objects and arrays recursively
+- **Targeted**: Modifies both templates and config as required
+
+### Notes for Future Use
+
+1. **Always start** by thoroughly reading `breaking-changes.md`
+2. **Identify patterns** in the breaking changes (settings removal, type changes, etc.)
+3. **Use the template** and customize the `applyFixes` function accordingly
+4. **Test incrementally** - run theme check after each fix type
+5. **Document your fixes** in the script comments for future reference