🎨 Palette: [a11y] Accessible Disabled State for Watchlist Add Button#300
Conversation
- Replaced native `disabled` attribute with `aria-disabled` on the Add button in `WatchlistManager` to maintain keyboard focus and swallow pointer events less often. - Updated styling to use `aria-disabled:` Tailwind variants. - Added dynamic `title` and `aria-label` attributes to explicitly inform screen-reader and visual hover users why the button might be unavailable (e.g. requires a 6-character hex code). - Re-routed action checks to the `onClick` handler. Co-authored-by: d3mocide <136547209+d3mocide@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
- fix(frontend): remove unused useId import in ListeningPost (lint gate) - chore(packaging): add PEP 517 build-system + setuptools py-modules to backend/api, aviation_poller, gdelt_pulse, js8call pyproject.toml so local CI editable installs resolve flat-layout discovery errors - chore(deps): bump asyncpg in space_pulse 0.30.0 -> 0.31.0 for Python 3.12 wheel compatibility in local CI - chore(.gitignore): exclude *.egg-info/ artifacts generated by pip install -e - docs(changelog): populate Unreleased with all PRs since v1.0.11 (PRs #284-#300) including Sentinel SSRF/DNS rebinding fix, Bolt orbital pass loop optimization, and 8 Palette a11y fixes
1 participant
💡 What: Refactored the 'Add' button in the Global Watchlist manager to use
aria-disabledinstead of the native HTMLdisabledattribute. Also attached dynamic, state-awaretitleandaria-labeltooltips to explain when and why the button is unavailable.🎯 Why: Using native
disabledcompletely removes the button from the tab order and frequently swallows pointer events, making it impossible for keyboard users and screen-readers to even focus on the button to find out why they can't add an aircraft. Furthermore, users were previously left guessing why the Add button wasn't working if they typed only 5 characters of an ICAO hex.📸 Before/After: Visually unchanged (Tailwind's
aria-disabledmatches thedisabledstyles perfectly). Behaviorally, hovering over the disabled button now displays a helpful native tooltip ("Requires 6-character hex code") instead of nothing.♿ Accessibility: The element remains focusable when disabled so screen-readers can navigate to it and announce its state and dynamically generated
aria-labelreason.PR created automatically by Jules for task 6467418498224659055 started by @d3mocide