[UEPR-477] Tips Library - Focus after item select#449
Conversation
| useEffect(() => { | ||
| // Only focus if there’s an actual tutorial step (image/video) | ||
| const steps = content[activeDeckId]?.steps; | ||
| const isTutorialStep = steps?.[step]?.video || steps?.[step]?.image; |
There was a problem hiding this comment.
What feels a bit odd in the current implementation is that if the tutorial starts with anything other than a video, there's nothing actionable on the card. So even if it's focused, pressing Tab just takes you back to the beginning.
It might make sense to only make the card focusable when there's actually a video to play. I can't think of any other actionable elements on it right now. Ideally, users should also be able to navigate between steps or close the tutorial modal via keyboard, but that's outside the scope of this task. What do you think?
There was a problem hiding this comment.
So just without the image then? I agree.
KManolov3
left a comment
There was a problem hiding this comment.
It doesn't feel very intuitive that I need to tab several times when selecting a tutorial with a video, before the focus moves to the play button. But we can address this separately in a PR for the Card component
Resolves
https://scratchfoundation.atlassian.net/browse/UEPR-477
Proposed Changes
Made tutorials get focused after being selected. The focus return logic for the tutorials button was pretty much already there.
Reason for Changes
Part of accessibility initiative for Scratch.