Web Lab 2: add console accessibility

[fisher-alice]

This PR adds keyboard navigability to console logs in the Web Lab 2 console panel. It also passes a custom icon for the log with aria-hidden: true so that the VoiceOver ignores this decorative icon and reads the message text. If this is not included, the log message is not read out load and instead VO says 'and two more items'.

We should probably update the Alert component so that it accepts an iconAriaHidden. I added that as a TODO in the comment.

Before update

before-update-console.mov

After update

after-update-console.mov

Links

• Jira: https://codedotorg.atlassian.net/browse/AFL-481

Testing story

Tested locally on weblab2 levels with Mac Voiceover.

Deployment strategy

Follow-up work

Privacy

Security

Caching

PR Creation Checklist:

• Tests provide adequate coverage
• Privacy impacts have been documented
• Security impacts have been documented
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Follow-up work items (including potential tech debt) are tracked and linked

[hannahbergam]

I'd still like to use the enter/esc paradigm here so a user doesn't have to tab through all console logs if they're trying to navigate elsewhere!

[fisher-alice]

I'd still like to use the enter/esc paradigm here so a user doesn't have to tab through all console logs if they're trying to navigate elsewhere!

Sounds good! Will update and also log a ticket for the current regression in Enter/Escape in the chat workspace.

[hannahbergam]

I'd still like to use the enter/esc paradigm here so a user doesn't have to tab through all console logs if they're trying to navigate elsewhere!

Sounds good! Will update and also log a ticket for the current regression in Enter/Escape in the chat workspace.

Yay thank you!!