chore(ui): Migrate templates to MD3 and fix keyboard navigation #304 #305

Merged

imAsparky merged 2 commits from issue-304 into main

2025-11-22 21:11:42 +00:00

imAsparky commented

2025-11-22 21:09:07 +00:00

(Migrated from github.com)

Templates:

Refactor elevation system to comply with Material Design 3
Update surface layering: dropdown, search input, and list containers
Remove opacity from "More" indicator for consistency
Add focus ring to dropdown toggle button for accessibility

Keyboard Navigation Fixes:

Add scroll-into-view for arrow key navigation (prevents page scroll)
Auto-focus first tag when pressing Enter without prior navigation
Auto-focus search input on dropdown open (desktop/non-touch devices)
Replace screen-width detection with touch detection for better UX
- Fixes auto-focus on small desktop windows (<768px)
- Prevents unwanted keyboard popup on mobile/tablet devices

Technical Changes:

Alpine.js: Add hasVirtualKeyboard and shouldAutoFocus computed properties
Alpine.js: Enhance navigateDown(), navigateUp(), selectFocused()
Template: Add x-ref and x-init to search input for auto-focus

closes #304

Templates: - Refactor elevation system to comply with Material Design 3 - Update surface layering: dropdown, search input, and list containers - Remove opacity from "More" indicator for consistency - Add focus ring to dropdown toggle button for accessibility Keyboard Navigation Fixes: - Add scroll-into-view for arrow key navigation (prevents page scroll) - Auto-focus first tag when pressing Enter without prior navigation - Auto-focus search input on dropdown open (desktop/non-touch devices) - Replace screen-width detection with touch detection for better UX - Fixes auto-focus on small desktop windows (<768px) - Prevents unwanted keyboard popup on mobile/tablet devices Technical Changes: - Alpine.js: Add hasVirtualKeyboard and shouldAutoFocus computed properties - Alpine.js: Enhance navigateDown(), navigateUp(), selectFocused() - Template: Add x-ref and x-init to search input for auto-focus closes #304

github-actions[bot] commented

2025-11-22 21:10:34 +00:00

(Migrated from github.com)

Code Coverage Report

Summary

Overall Coverage: 69.4%
Minimum Required: 50%
Status: ✅ PASSED

Report generated on 2025-11-22 21:10:34 UTC

Package Details

Package	Coverage
tag_me.utils	🟢 78.6%
tag_me.views	🟢 72.5%
tag_me.models	🟢 66.4%
tag_me.templatetags	🟢 63.4%
tag_me	🟢 63.2%
tag_me.forms	🟢 60.8%

# Code Coverage Report ![Code Coverage](https://img.shields.io/badge/coverage-69.4%25-yellow) ## Summary - **Overall Coverage**: 69.4% - **Minimum Required**: 50% - **Status**: ✅ PASSED *Report generated on 2025-11-22 21:10:34 UTC* ## Package Details | Package | Coverage | |---------|-----------| | tag_me.utils | 🟢 78.6% | | tag_me.views | 🟢 72.5% | | tag_me.models | 🟢 66.4% | | tag_me.templatetags | 🟢 63.4% | | tag_me | 🟢 63.2% | | tag_me.forms | 🟢 60.8% |