- Added SVG icon with hover animation to external links in index.html and dashboard/index.html
- Updated web_dashboard.py template to include the same icon and animation for consistency
- Added 'Open' button with icon to Telegram Bot status in web_dashboard.py
- Documented new UX pattern in .jules/palette.md
This change improves usability by clearly indicating which links open in a new tab and providing a subtle motion cue on hover.
- Adds a "Copy" button to "Fly.io App" and "Telegram Bot" status items in `index.html` and `dashboard/index.html`.
- Updates `scripts/web_dashboard.py` to include these status rows with the same copy functionality, ensuring consistency across all dashboard views.
- Implements visual feedback (icon changes to checkmark) and accessibility support (aria-labels) for the copy action.
- Uses inline SVG icons to avoid external dependencies.
- Verified with Playwright and existing tests.
- Replaced #667eea with #4f46e5 to meet WCAG AA contrast standards.
- Updated hover color to #4338ca.
- Added aria-label to Service Worker update button.
- Updated manifest.json theme color.
- Add .toast CSS to index.html and dashboard/index.html
- Add toast HTML structure (role="alert")
- Replace window.confirm() with toast show/hide logic
- Improve accessibility and UX for app updates
Wrapped emojis in <span> tags with role="img" and aria-label to improve accessibility for screen readers. This ensures icons are announced correctly (e.g., "Rocket", "Chart") rather than as characters or ignored.
Affected files:
- index.html
- dashboard/index.html
- offline.html
- sw-inspector.html
- Add `.btn:focus-visible` styles for better keyboard navigation visibility.
- Add `rel="noopener noreferrer"` and `aria-label` to external links for security and accessibility.
- Add `role="button"` to placeholder links (`href="#"`) for semantic correctness.
- Replace blocking `alert()` with a non-blocking button text change ("Coming Soon! 🚧") for better UX.
- Apply changes to both `index.html` and `dashboard/index.html`.
This commit copies `dashboard/index.html` to `index.html` (root) and `docs/index.html` to ensure that the GitHub Pages site loads correctly regardless of the source configuration (Root, Docs, or Custom Workflow). It also adds `.nojekyll` to prevent Jekyll processing issues.