Improve settings tab accessibility

[jonmartin721]

Summary

• convert settings navigation to a proper vertical tablist and tabpanel pattern
• add keyboard navigation for arrows, Home, and End with roving tabindex
• replace the synthetic accessibility test with coverage of the shipped settings UI

Testing

• eslint on changed files
• tsc --noEmit -p jsconfig.json
• jest tests/accessibility.test.js --runInBand

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the accessibility of the settings tab by implementing standard WAI-ARIA tablist and tabpanel patterns. This change provides a more robust and navigable experience for all users, particularly those relying on keyboard navigation and screen readers. The underlying test infrastructure has also been updated to ensure these accessibility improvements are thoroughly validated against the actual user interface.

Highlights

• Improved Settings Tab Accessibility: The settings navigation has been converted to a proper vertical tablist and tabpanel pattern, enhancing semantic structure and screen reader compatibility.
• Enhanced Keyboard Navigation: Keyboard navigation has been implemented for the settings tabs, allowing users to navigate with arrow keys, Home, and End keys, utilizing a roving tabindex for improved usability.
• Updated Accessibility Testing: The accessibility test suite has been refactored to directly cover the shipped settings UI, replacing previous synthetic accessibility tests with more realistic validation.

Changelog

• options/options.css
  • Removed gap property from .tab-navigation and introduced a new .tab-list class to manage spacing for tab buttons.
  • Added color: inherit; and text-decoration: none; to .setup-step.clickable for better styling consistency.
  • Implemented a focus-visible outline for .setup-step.clickable elements to improve keyboard focus indication.
• options/options.html
  • Refactored the tab navigation structure to conform to WAI-ARIA tablist and tabpanel patterns, including adding role="tablist", role="tab", aria-selected, aria-controls, aria-labelledby, tabindex, and hidden attributes.
  • Converted div.setup-step.clickable elements into a tags with href attributes to improve semantic linking and accessibility.
• options/options.js
  • Updated the setupTabNavigation function to manage tabIndex and hidden attributes for tab buttons and panels, respectively, supporting roving tabindex.
  • Added event listeners for keyboard navigation (ArrowUp, ArrowDown, Home, End) to tab buttons, enabling accessible tab switching.
  • Modified the click handler for .setup-step.clickable elements to prevent default behavior and ensure focus is correctly managed when switching tabs.
  • Exported setupTabNavigation for use in external test files.
• tests/accessibility.test.js
  • Rewrote the accessibility test file to load the actual options.html content, replacing the previous synthetic DOM mocking.
  • Added new tests to verify the correct implementation of WAI-ARIA tablist and tabpanel relationships.
  • Included tests for roving tabindex behavior and keyboard navigation (Arrow keys, Home, End) within the settings tabs.
  • Verified that setup-step links correctly switch tabs and maintain keyboard focus.

Activity

• Eslint checks were performed on changed files to ensure code quality.
• TypeScript compilation (tsc --noEmit -p jsconfig.json) was run to verify type correctness.
• Jest tests for accessibility (jest tests/accessibility.test.js --runInBand) were executed to validate the new accessibility features.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[sentry]

Codecov Report

❌ Patch coverage is 87.87879% with 4 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
options/options.js	87.87%	4 Missing ⚠️

📢 Thoughts on this report? Let us know!

[gemini-code-assist]

Code Review

This pull request significantly improves the accessibility of the settings page by implementing a proper ARIA tablist/tabpanel pattern, complete with keyboard navigation and roving tabindex. The use of semantic HTML has also been improved, and the test suite has been updated to provide excellent coverage for these new features. Overall, this is a high-quality contribution. I have one suggestion to simplify the code by removing a redundant mechanism for controlling panel visibility.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 20332dbda1

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Restore mobile tab layout for wrapped tab buttons

The new .tab-list wrapper is always forced to flex-direction: column, but the mobile breakpoint only updates .tab-navigation to a row layout; since all tab buttons now sit inside .tab-list, they stay vertically stacked on narrow screens instead of using the previous horizontal tab strip, which makes settings navigation significantly harder on mobile-width viewports. Add a mobile override for .tab-list so it follows the responsive row behavior.

Useful? React with 👍 / 👎.

[jonmartin721]

Added a mobile override for .tab-list so the tab strip switches back to a horizontal, scrollable layout on narrow screens.

[jonmartin721]

Follow-up pushed in 10bdced: restored the mobile tab-strip behavior by switching .tab-list to a horizontal layout at the mobile breakpoint, and simplified tabpanel visibility to rely on hidden instead of toggling both hidden and an active class.