Skip to content

Fix/tabs nvda double announcement#108

Open
joshsadam wants to merge 3 commits into
mainfrom
fix/tabs-nvda-double-announcement
Open

Fix/tabs nvda double announcement#108
joshsadam wants to merge 3 commits into
mainfrom
fix/tabs-nvda-double-announcement

Conversation

@joshsadam

@joshsadam joshsadam commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

What does this PR do and why?

  • Fixes duplicate NVDA announcements when moving between tabs with arrow keys.
  • Batches tab selection updates and avoids re-applying state on turbo:render.

Screenshots or screen recordings

  • N/A (accessibility behavior change; validate with NVDA Speech Viewer)

How to set up and validate locally

  1. Run pnpm test test/javascript/controllers/tabs_controller.test.js
  2. Open a tabs demo in Lookbook and arrow through tabs with NVDA Speech Viewer open
  3. Confirm each tab is announced once
  4. Iterate through the tabs a couple times to make sure

PR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

@joshsadam joshsadam added bug Something isn't working accessibility labels Jul 7, 2026
@joshsadam joshsadam self-assigned this Jul 7, 2026
@joshsadam joshsadam requested a review from Copilot July 9, 2026 18:02

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the pathogen--tabs Stimulus controller to prevent duplicate NVDA announcements during arrow-key tab navigation by batching/deferring certain DOM updates, and adds regression tests to validate the new behavior.

Changes:

  • Batch tab attribute updates (including temporarily stripping/restoring aria-controls) and defer panel visibility updates during keyboard navigation.
  • Avoid re-applying tab selection state when the DOM is already in-sync (including on turbo:render).
  • Add tests covering deferred panel visibility and avoiding redundant aria-selected mutations; update generated Tailwind CSS output.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
test/javascript/controllers/tabs_controller.test.js Adds tests for deferred panel updates during keyboard navigation and for skipping redundant aria-selected updates (including on turbo:render).
app/assets/stylesheets/pathogen_view_components.css Updates generated Tailwind CSS output/version and color token definitions.
app/assets/javascripts/pathogen_view_components/tabs_controller.js Refactors tab/panel selection logic to batch ARIA updates, defer panel visibility, and skip redundant state application to avoid NVDA double announcements.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread app/assets/javascripts/pathogen_view_components/tabs_controller.js Outdated
Comment thread app/assets/javascripts/pathogen_view_components/tabs_controller.js
joshsadam added 3 commits July 9, 2026 13:18
…kens

- Updated Tailwind CSS from v4.3.1 to v4.3.2.
- Added new blue color tokens: --color-blue-50, --color-blue-100, --color-blue-200, and --color-blue-900.
@joshsadam joshsadam force-pushed the fix/tabs-nvda-double-announcement branch from 67160da to 1898e79 Compare July 9, 2026 18:18
@joshsadam joshsadam requested a review from ChrisHuynh333 July 9, 2026 18:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants