Skip to content

[UEPR-477] Focus video on tutorial library choice with keyboard#579

Open
adzhindzhi wants to merge 7 commits into
scratchfoundation:release/UEPR-297-accessibility-improvementsfrom
adzhindzhi:task/uepr-477-tips-library-return-focus-inconsistency-fix
Open

[UEPR-477] Focus video on tutorial library choice with keyboard#579
adzhindzhi wants to merge 7 commits into
scratchfoundation:release/UEPR-297-accessibility-improvementsfrom
adzhindzhi:task/uepr-477-tips-library-return-focus-inconsistency-fix

Conversation

@adzhindzhi
Copy link
Copy Markdown
Contributor

Resolves

Proposed Changes

Utilize the Wistia queue and JS API onReady function to focus the video when ready

Reason for Changes

Wistia API loads asynchronously making the video not present in the DOM on initial load when we try to focus it. This causes inconsistencies accessibility-wise, because users are unable to play the video the first time it loads.

@adzhindzhi adzhindzhi requested a review from Copilot May 21, 2026 13:42
@adzhindzhi adzhindzhi requested a review from a team as a code owner May 21, 2026 13:42
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

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 improves keyboard accessibility for tutorial videos by focusing the Wistia player once it has fully loaded (accounting for Wistia’s asynchronous embed/API load), and removes the prior card-container focus approach.

Changes:

  • Register a Wistia _wq onReady callback in VideoStep to focus the player when ready.
  • Clear focus-related wiring on the cards overlay (remove tabIndex, ref, and the useEffect-based focusing).
  • Update Jest snapshots to reflect the DOM attribute changes.

Reviewed changes

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

File Description
packages/scratch-gui/src/components/cards/cards.jsx Adds Wistia _wq onReady focus behavior; removes previous Cards-level focus logic and related attributes.
packages/scratch-gui/test/unit/components/snapshots/cards.test.jsx.snap Updates snapshots for removal of tabindex="-1" on the overlay container.

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

Comment thread packages/scratch-gui/src/components/cards/cards.jsx Outdated
Comment thread packages/scratch-gui/src/components/cards/cards.jsx
Comment thread packages/scratch-gui/src/components/cards/cards.jsx
Comment thread packages/scratch-gui/src/components/cards/cards.jsx
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