Skip to content

fix(ui): make InputToggle keyboard accessible#2751

Open
TheoGrandin74 wants to merge 8 commits into
stagingfrom
claude/slack-session-y63fr5
Open

fix(ui): make InputToggle keyboard accessible#2751
TheoGrandin74 wants to merge 8 commits into
stagingfrom
claude/slack-session-y63fr5

Conversation

@TheoGrandin74

Copy link
Copy Markdown
Contributor

The InputToggle used a hidden checkbox and onClick-only div handlers, so it was not reachable or operable via the keyboard. On the service port settings form this broke Tab navigation: keyboard users could reach the default fields (application port, protocol) but could not focus or toggle the 'Publicly exposed' switch that gates the advanced fields (e.g. port name).

Expose the toggle as a focusable switch (role=switch, aria-checked, tabIndex) with Space/Enter activation and a visible focus outline, while keeping it non-focusable when disabled.

Summary

Issue:

Screenshots / Recordings

Testing

  • Changes tested locally in the relevant Console's pages and Storybooks
  • yarn test or yarn test -u (if you need to regenerate snapshots)
  • yarn format
  • yarn lint

PR Checklist

  • I followed naming, styling, and TypeScript rules (see .cursor/rules)
  • I performed a self-review (diff inspected, dead code removed)
  • I titled the PR using Conventional Commits with a scope when possible (e.g. feat(service): add new Terraform service) - required for semantic-release
  • I only kept necessary comments, written in English (watch for useless AI comments)
  • I involved a designer to validate UI changes if I am not a designer
  • I covered new business logic with tests (unit)
  • I confirmed CI is green (Codecov red can be accepted)
  • I reviewed and executed locally any AI-assisted code

The InputToggle used a hidden checkbox and onClick-only div handlers, so it
was not reachable or operable via the keyboard. On the service port settings
form this broke Tab navigation: keyboard users could reach the default fields
(application port, protocol) but could not focus or toggle the 'Publicly
exposed' switch that gates the advanced fields (e.g. port name).

Expose the toggle as a focusable switch (role=switch, aria-checked,
tabIndex) with Space/Enter activation and a visible focus outline, while
keeping it non-focusable when disabled.
@RemiBonnet

Copy link
Copy Markdown
Member

Qovery Preview

Qovery can create a Preview Environment for this PR.
To trigger its creation, please post a comment with one of the following command.

Command Blueprint environment
/qovery preview cc1de7de-94e5-40f8-8e45-bc8986d9dfec storybook
/qovery preview 28c47145-c8e7-4b9d-8d9e-c65c95b48425 staging
/qovery preview 964984c5-fba6-4371-88d3-a5daf99642ab test-prod
/qovery preview {all|UUID1,UUID2,...} To preview multiple environments

This comment has been generated from Qovery AI 🤖.
Below, a word from its wisdom :

One day they will all understand

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants