Initial focus

[breville]

#411 did great work in enabling a screenreader to read what's shown in the Guide. An interesting side-effect was that the initial call to .focus() was applying the :focus-visible psuedo-class, leading to a white border around the initial Guide for all users, even though subsequent calls to .focus() applied the :focus psuedo-class which didn't.

It turns out we can provide a newer but now fairly-well supported parameter to .focus() to apply the latter behaviour all the time. This way, the white border doesn't show around that initial guide, a return to its original appearance.

[hannahbergam]

Thanks for doing more research into this! Would you be able to add a screen recording of keyboard nav + screen reader here too for posterity?

[breville]

Thanks for doing more research into this! Would you be able to add a screen recording of keyboard nav + screen reader here too for posterity?

Good idea, @hannahbergam. Here is a recording from initial load of a level. I just press Enter a few times to move through the Guide, and then press tab a few times, followed by shift-tab a few times, to find the "Not Fish" and "Fish" buttons. This is Chrome 145 on macOS 26.3 with VoiceOver. My understanding is that the change in this PR doesn't change the existing behavior, only that border appearance.

oceans-voice-over-0.mov

[hannahbergam]

Thanks for doing more research into this! Would you be able to add a screen recording of keyboard nav + screen reader here too for posterity?

Good idea, @hannahbergam. Here is a recording from initial load of a level. I just press Enter a few times to move through the Guide, and then press tab a few times, followed by shift-tab a few times, to find the "Not Fish" and "Fish" buttons. This is Chrome 145 on macOS 26.3 with VoiceOver. My understanding is that the change in this PR doesn't change the existing behavior, only that border appearance.

oceans-voice-over-0.mov

My concern now is that visible focus has been removed entirely, for keyboard and mouse users alike. The focus-visible class is what ensures a component selected via keyboard has a focus outline. In this case that is important because the guide is blocking any other keyboard actions and must be dismissed before moving forward.

[breville]

Thanks for doing more research into this! Would you be able to add a screen recording of keyboard nav + screen reader here too for posterity?

Good idea, @hannahbergam. Here is a recording from initial load of a level. I just press Enter a few times to move through the Guide, and then press tab a few times, followed by shift-tab a few times, to find the "Not Fish" and "Fish" buttons. This is Chrome 145 on macOS 26.3 with VoiceOver. My understanding is that the change in this PR doesn't change the existing behavior, only that border appearance.
oceans-voice-over-0.mov

My concern now is that visible focus has been removed entirely, for keyboard and mouse users alike. The focus-visible class is what ensures a component selected via keyboard has a focus outline. In this case that is important because the guide is blocking any other keyboard actions and must be dismissed before moving forward.

Oh, great observation. I dug a little deeper and have begun a slightly different approach in #420. Curious for your thoughts there!