[Accessibility]: Code Insights — context menu doesn't announce items within menu

[vovakulikov]

Audit type

Screen reader navigation

User journey audit issue

https://github.com/sourcegraph/sourcegraph/issues/33502

Problem description

If you open the code insight context menu (three-dot menu) on the dashboard page screen reader doesn't announce the focused item, and therefore, you can't figure out on which item you're currently focused.

UPDATED: we do not focus the first item menu and because of this voice-over navigation doesn't work properly (in a standard screen reader way)

Expected behaviour

Screen reader should announce available (not disabled) and focused items in the context menu.

Additional details

I'm tagging frontend platform team because we use MenuButton component for this means which is part of the wildcard. It seems if it doesn't work for code insights it shouldn't work for all other places in the app and we should fix it on the wildcard level.

Assigning labels

• Please give this issue an estimate by applying a label like estimate/Xd, where X is the estimated number of days it will take to complete.
• If this issue is specific to a specific Sourcegraph product, please assign the appropriate team label to this issue.
• If this issue will require input from designers in order to complete, please assign the label needs-design.
• If you are confident that this issue should be fixed by GitStart, please assign the label gitstart.

Owner

I'm unsure who should work on this issue or if it needs more clarification. I will let the Frontend Platform team triage this.

/cc @taylorsperry @muratsu

[vovakulikov]

It turned out that this issue doesn't violate anything from A standard; keyboard navigation is still working as expected, but because we don't focus the first menu item when we open the menu screen, reader navigation doesn't work as it's expected (shift + control + option + arrow doesn't jump to the first element neither control + option + arrow does) but just arrow down works and voice over actually reads all items as it should.

We do not focus the first item by default because it's a reach UI issue; with the custom popover element internal reach UI logic doesn't work as it should and their internal state machine just doesn't fall within the expected state properly.

So I propose to skip this issue for now and return to this when we have another problem with the Menu component. A possible solution here might be just forking reach ui menu UI component and fix it on our side.

[leonore]

@vovakulikov can you find the PR that closed this and close the issue?