Skip to content

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

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.

Sign up for GitHub

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
kbangelov wants to merge 3 commits into
base: release/UEPR-297-accessibility-improvements
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
11de356
fix: always focuses directly on the video play button now
kbangelov May 14, 2026
0fcc899
chore: delete obsolete line of code
kbangelov May 14, 2026
a3c98ea
chore: update snapshot
kbangelov May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 18 additions & 10 deletions packages/scratch-gui/src/components/cards/cards.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ class VideoStep extends React.Component {
className={`wistia_embed wistia_async_${this.props.video}`}
id="video-div"
style={{height: `257px`, width: `466px`}}
ref={this.props.videoRef}
>
 
</div>
Expand All @@ -146,7 +147,8 @@ class VideoStep extends React.Component {

VideoStep.propTypes = {
expanded: PropTypes.bool.isRequired,
video: PropTypes.string.isRequired
video: PropTypes.string.isRequired,
videoRef: PropTypes.shape({current: PropTypes.instanceOf(Element)})
};

const ImageStep = ({title, image}) => (<Fragment>
Expand Down Expand Up @@ -354,18 +356,25 @@ const Cards = props => {

if (activeDeckId === null) return;

const cardRef = useRef(null);
const videoRef = useRef(null);

useEffect(() => {
// Only focus if there’s an actual tutorial step (image/video)
// Only focus in the presence of a video on the card
const steps = content[activeDeckId]?.steps;
const isTutorialStep = steps?.[step]?.video;

if (isTutorialStep && cardRef.current) {
// Defer focus to next animation frame for layout stability
requestAnimationFrame(() => {
cardRef.current.focus();
});
if (isTutorialStep) {
// Need the custom focus delay because of the conflict between this logic
// and refocusing the button that opened the library (tutorials in this case)
const FOCUS_DELAY = 500;

const focusVideo = () => {
const target = videoRef.current &&
videoRef.current.querySelector('.w-big-play-button');
if (target) target.focus();
};
requestAnimationFrame(focusVideo);
setTimeout(focusVideo, FOCUS_DELAY);
}
}, [activeDeckId, step, content]);

Expand Down Expand Up @@ -400,8 +409,6 @@ const Cards = props => {
top: `${menuBarHeight}px`,
left: `${-cardHorizontalDragOffset}px`
}}
ref={cardRef}
tabIndex={-1}
>
<Draggable
bounds="parent"
Expand Down Expand Up @@ -443,6 +450,7 @@ const Cards = props => {
dragging={dragging}
expanded={expanded}
video={translateVideo(steps[step].video, locale)}
videoRef={videoRef}
/>
) : (
<ImageStep
Expand Down
2 changes: 0 additions & 2 deletions packages/scratch-gui/test/unit/components/__snapshots__/cards.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
exports[`Cards component showVideos=false shows the title image/name instead of video step 1`] = `
<div
style="width: 1824px; height: 977px; top: 48px; left: -400px;"
tabindex="-1"
>
<div
class="react-draggable"
Expand Down Expand Up @@ -52,7 +51,6 @@ exports[`Cards component showVideos=false shows the title image/name instead of
exports[`Cards component showVideos=true shows the video step 1`] = `
<div
style="width: 1824px; height: 977px; top: 48px; left: -400px;"
tabindex="-1"
>
<div
class="react-draggable"
Expand Down
Loading