Screenreader updates

[breville]

This makes some updates to the screenreader support in AI for Oceans:

• Rather than have the screenreader treat the Guide background (which spans the entire tutorial area, as it's used for dimming the visuals and absorbing mouse clicks) as a button which gets highlighted by the screenreader when the Guide gets focus, instead just focus on and highlight the Guide box itself.
  • Rather than add new hidden text for the screenreader, we can use existing hidden text which is actually in the right place place since it's used to make sure that the Guide's box is rendered at the correct dimensions. (The typing text is what appears in the same location.)
  • No longer rely on :visible-focus styling to highlight the Guide, because we can now rely on the screenreader to show its highlight there instead.
    • This way, there's no longer a white border around the first Guide to appear even when there is no screenreader.
• Ensure that this version of the Guide that the screenreader uses can also be manually tabbed to.
  • Ensure that the :visible-focus from manually tabbing to this Guide can be seen, as a visible outline.
• No longer allow the user to manually tab to button elements that should not be accessible when the Guide is modal (which is most of the time, though not always). Their parent tree in the DOM is now marked as inert.
• Make a small fix to the updated toggle buttons in the pond so that the icons appear properly at all browser sizes.

This was primarily tested on Chrome 145 on macOS 26.3 with VoiceOver.

Slightly disappointed that role="text' didn't seem to solve the constant description of these elements as groups.

Video

oceans-voice-over-2.mov

[hannahbergam]

This works for me! Thanks for including the video!