Improve Quest keyboard navigation and accessibility - #25
Open
JoeArmani wants to merge 6 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Improves Quest participant keyboard navigation and accessibility by removing non-native focus-management hacks (notably the Windows-specific focus helper), restoring native focus/arrow-key behavior for form controls, and adding explicit keyboard semantics for popover help controls. The PR also strengthens coverage with new/updated integration and Playwright contracts, plus updated documentation for keyboard-only testing.
Changes:
- Removes the
#srFocusHelper-based focus-moving behavior and shifts the.screen-reader-focuselement to programmatic-only focus (tabindex="-1"), with improved modal/focus-timer safety. - Switches Bootstrap popovers to manual trigger with explicit pointer/keyboard handlers and lifecycle disposal across navigation/sequential renders.
- Adds/updates extensive unit/integration/e2e coverage (keyboard navigation, popover behavior, forced-colors/focus-visible styling) and documents the keyboard command guide.
Reviewed changes
Copilot reviewed 42 out of 45 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tests/unit/buildGrid.spec.js | Updates unit coverage for grid markup (ensures removed focus helper is absent). |
| tests/setup/jsdom.js | Enhances Bootstrap stubs used by jsdom tests (instance helpers + toggle). |
| tests/README.md | Clarifies Windows lane purpose and keyboard/manual a11y docs references. |
| tests/knownDefects/runtime.spec.js | Adds characterized failing contracts for standalone textarea reset behavior. |
| tests/knownDefects/registry.js | Updates known-defect registry (adds textarea reset, refines a11y defect metadata). |
| tests/integration/questionProcessor.spec.js | Asserts popover trigger is manual in rendered markup. |
| tests/integration/questionnaireHelpers.spec.js | Aligns Bootstrap breakpoint expectation (575.98px). |
| tests/integration/eventHandlers.spec.js | Adds delegated event-handling contracts for native keys and manual popover toggling. |
| tests/integration/authoredMarkupFidelity.spec.js | New integration contract for rich/authored markup stability across navigation/edits. |
| tests/integration/accessibilityBuilder.spec.js | Updates accessibility builder tests to reflect programmatic-only focus target and announcement behavior. |
| tests/integration/accessibilityBehavior.spec.js | Shifts behavior tests to “keep native focus” patterns and modal-close focus restoration. |
| tests/harness/participant.js | Adds runtime snapshot diagnostics (basePath + processor summary). |
| tests/fixtures/canonical/unansweredModals.txt | New canonical fixture to distinguish soft vs hard unanswered dialogs. |
| tests/e2e/windowsEnvironment.spec.js | Reframes Windows UA lane as parity checks; validates native focus order behavior. |
| tests/e2e/visual.spec.js | Adds visual regression coverage for keyboard focus visibility on list/grid choices. |
| tests/e2e/support/test.js | Tightens Firefox deprecation-warning regex; removes now-unneeded CSS asset routing. |
| tests/e2e/responsive.spec.js | Adds breakpoint-boundary and mobile keyboard-focus/state alignment contracts. |
| tests/e2e/productionMarkupFidelity.spec.js | New corpus-backed contracts for production intro/response markup fidelity. |
| tests/e2e/productionCompoundForms.spec.js | Strengthens compound-form accessible-context characterization across production modules. |
| tests/e2e/popoverAccessibility.spec.js | Expands popover accessibility coverage (keyboard/pointer semantics, disposal, nested-in-label safety). |
| tests/e2e/participantControls.spec.js | Updates controls tests (waits for harness readiness; validates local basePath behavior). |
| tests/e2e/knownDefects.spec.js | Refactors known-defects suite focus; adds hover-contrast characterization. |
| tests/e2e/keyboardNavigation.spec.js | New, comprehensive keyboard navigation contract suite. |
| tests/e2e/gridDeepCoverageKnownDefects.spec.js | Removes grid focus-helper known-defect suite (helper no longer used). |
| tests/e2e/gridDeepCoverage.spec.js | Extends deep grid coverage to include Back restoration + focus target expectations. |
| tests/e2e/corpusFullRender.spec.js | Uses harness runtime snapshot for processor diagnostics instead of importing stateManager. |
| tests/e2e/accessibilityLifecycleKnownDefects.spec.js | Refocuses lifecycle tests on announcement races; removes Windows focus-helper regression case. |
| tests/e2e/accessibility.spec.js | Adds role/name/state assertions, unanswered modal distinctions, submit focus restoration, and dialog focus race contract. |
| tests/corpus/productionMarkupEdgeCases.spec.js | New unit-level corpus edge-case characterization for popups/breaks/QoL compound rendering. |
| Style1.css | Replaces display:none inputs with visually-hidden-but-focusable inputs; adds focus-visible + forced-colors styling. |
| questionProcessor.js | Updates popover markup to data-bs-trigger="manual". |
| questionnaire.js | Removes Windows-only tabstop hacks; adds manual popover initialization/handlers + disposal; adjusts breakpoint helper. |
| Quest.css | Adds focus-visible styling for popover help controls (including forced-colors). |
| playwright.config.js | Forces non-Windows UA for desktop/phone/tablet projects while keeping a dedicated Windows-UA lane. |
| main.js | Adds sequential-render popover disposal; refines basePath resolution for local vs CDN. |
| eventHandlers.js | Removes Up/Down key traps and Windows focus-management; adds pointer-vs-keyboard “Other” focus behavior and submit focus restoration. |
| docs/keyboardNavigation.md | New keyboard-only command guide and tester expectations. |
| docs/accessibilityManualTest.md | Updates manual protocol notes and references keyboard navigation guide; refines JAWS guidance. |
| Default.css | Aligns grid spacing with removed focus-helper node; fixes focus indicator clipping; updates breakpoint + forced-colors focus/selected styling. |
| buildGrid.js | Removes the #srFocusHelper element from grid markup. |
| ActiveLogic.css | Mirrors Default.css grid spacing/focus/breakpoint/forced-colors adjustments; adds legend clearance for inserted focus target. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related: episphere/connect#1587
Keyboard navigation and accessibility updates:
•Used browser-standardized implementations
•Added to regression testing suite