Accessibility: Add Landmark navigation

[akirk]

This adds macro keyboard navigation between the sections of Element Web, so you can cycle through these items:

• Space Panel: active space
• Room Search
• Room List: active room
• Message Composer

Fixes element-hq/element-web#22674

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

Signed-off-by: Alex Kirk <[email protected]>

---

This PR currently has none of the required changelog labels.

A reviewer can add one of: T-Deprecation, T-Enhancement, T-Defect, T-Task to indicate what type of change this is, or add Type: [enhancement/defect/task] to the description and I'll add them for you.

[t3chguy]

I think we should ignore sonarcloud because any new code with low coverage is in onKeyDown and that path is sufficiently tested by the playwright test.

Fine, the playwright test looks comprehensive

[t3chguy]

Suggested change

	const landmarkToDOMElementMap = {
	const landmarkToDomElementMap = {

Sorry being pedantic: https://www.approxion.com/capital-offenses-how-to-handle-abbreviations-in-camelcase/

[t3chguy]

Suggested change

	const landmarkToDOMElementMap = {
	const landmarkToDOMElementMap: Record<Landmark, () => Element | null | undefined> = {

this type will prevent us forgetting to add an entry if we add to the enum

[MidhunSureshR]

0961cae and 1d8ab2a

[t3chguy]

Code looks great now, testing it on Netlify looks like the focus outline isn't showing up though which makes it really difficult to use

Screen.Recording.2024-07-16.at.15.25.23.mov

[MidhunSureshR]

hmm.. it shows up in firefox but not in chromium

[MidhunSureshR]

@t3chguy

This is a chrome issue; from https://blog.chromium.org/2020/09/giving-users-and-developers-more.html:

Because mouse users may frequently use keyboard shortcuts, Chrome's implementation will bypass "keyboard mode" if a meta key (such as command, control, etc.) is pressed. For example, if a user who was previously using a mouse pressed a keyboard shortcut which shows a settings dialog, :focus-visible would not match on the focused element in the settings dialog.

focusVisible option should fix this in the future.

I'm partial to merging this as is but also happy to write a focusWithIndicator helper if needed.

[t3chguy]

That makes a lot of sense, could you add focusVisible anyway, as a best effort

[t3chguy]

Can you add this type in global.d.ts instead to avoid needing to type cast and to get the benefit in all files? As an overload for the HTMLElement::focus method

[MidhunSureshR]

done, d1085b7

[t3chguy]

It might need to be optional focusVisible?: boolean but CI will show

[t3chguy]