Web Lab 2: add console accessibility

[fisher-alice]

This PR adds keyboard navigability to console logs in the Web Lab 2 console panel - the implementation is similar to the pattern used in the chat workspace.

• a user navigates to the console panel and 'Console output: press Enter to navigate logs, Escape to exit' is announced (aria-label),
• after pressing 'Enter', the focus goes to the most recent (last) log,
• the user can use tab/shift-tab, to navigate through the logs and an announcement is made if the log is first, last or the only log entry,
• once reaching the first or last log, they will loop around,
• the user can press 'Escape' to exit out of console navigation mode.

Note that in the chat workspace, a user doesn't have to press 'Exit' to exit out of workspace, so a ticket is logged for this: https://codedotorg.atlassian.net/browse/SL-1600

This PR 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

With multiple logs with MacOS VO:

multiple-logs.mov

With only one log with MacOS VO:

one-log.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!!

[hannahbergam]

One tiny wording idea but yay the screencast looks awesome! Thank you!

[hannahbergam]

Is it okay if we switch this to 'oldest'?