Skip to content

Fix keyboard navigation for various settings #3474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

yugalkaushik
Copy link
Contributor

@yugalkaushik yugalkaushik commented May 4, 2025

Fixes #3448

Changes:

  • Improved keyboard navigation across all preference settings.
  • Ensured that disabled radio buttons remain focusable via keyboard for accessibility .
  • Fixed inconsistent focus ring color and thickness between theme selection and other settings.
  • Increased the overall size of the Preferences component slightly to prevent partial button visibility and reduce unnecessary scrolling.
general.setting.mp4

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • has no test errors (npm run test)
  • is from a uniquely-named feature branch and is up to date with the develop branch.
  • is descriptively named and links to an issue number, i.e. Fixes #123

@yugalkaushik
Copy link
Contributor Author

@Jatin24062005 Can you review this PR please.

@Jatin24062005
Copy link
Contributor

@yugalkaushik I’ve reviewed your pull request and tested it on my machine. I noticed a couple of issues: the keyboard navigation currently allows focusing only on enabled buttons, but it should also allow navigation to disabled buttons like Similar to the High Contrast and Dark theme options. Additionally, the focus border appears slightly thicker than the standard one, which creates inconsistency in the UI. Please look into these issues and make the necessary adjustments.

@yugalkaushik
Copy link
Contributor Author

yugalkaushik commented May 10, 2025

  1. I’ve tried many different approaches, but keyboard navigation only works for enabled buttons because the On and Off options share the same name, which is essential for proper radio button functionality but can be selected using left and right arrow keys. In contrast, the theme buttons use different name attributes, so they behave like separate buttons, allowing focus on other states.

  2. Fixed inconsistent focus ring color when navigating with the keyboard.

  3. The original size of the Preferences component was not practical, as only half of some buttons were visible and required scrolling. So, I slightly increased the overall size for better usability.

    Before:
    Screenshot 2025-05-10 154454
    After:
    Screenshot 2025-05-10 154250

@yugalkaushik
Copy link
Contributor Author

@raclim can you please review.

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.

Accessibility focus border missing on Settings components.
2 participants