report(accessibility): make dropdown match ARIA action menu button pattern

[johnemau]

Summary
This improves the accessibility of the report dropdown by adding ARIA attributes and interactive behavior in-line with the WCAG menu button pattern, specifically the navigation menu button.

Screenshot of NVDA speech view + the dropdown

Screenshot of button accessibility tree

Screenshot of menu item accessibility tree

Gif of keyboard interactions

This will meet WCAG success criteria 1.3.1 Info and Relationship and 4.1.2 Name, Role, Value

Related Issues/PRs
#9183

[johnemau]

I think this is a step in the right direction, I just need some project guidance on the best way to implement UI controls (in JS) or try to keep state in the DOM.

[connorjclark]

IDK about the accessibility stuff, but I commented on what I do know about :)

[johnemau]

Quick update

I am working on feedback and will have changes ready for another round of review early next week.

[johnemau]

IDK about the accessibility stuff, but I commented on what I do know about :)

I have implemented the requested feedback, PTAL @connorjclark

[johnemau]

ping @connorjclark, @patrickhulce

[johnemau]

PTAL @paulirish

[patrickhulce]

LGTM, thanks @johnemau!

[connorjclark]

could reorder and fall thru these cases

[johnemau]

Good idea, I will get that in tomorrow.

[johnemau]

I took a closer look at this and was not able to reorder the cases to allow fall thrus, the issue I hit was ArrowUp/Down require a start element and Home/End should not have a start element.

Let me know if I missed something, thanks!

[paulirish]

this impl looks fine in general.

after we land this tomorrow would you be willing to do a small followup which refactors the toolsButton/toolsDropdown into a separate class?

the class could remain here in the same file.. it'd just be nice to separate things a bit, now that this has grown.

cheers.

[johnemau]

this impl looks fine in general.

Thanks for the review!

after we land this tomorrow would you be willing to do a small followup which refactors the toolsButton/toolsDropdown into a separate class?

You got it! I have the refactor started in a branch and will open the PR once this is merged.

[johnemau]

after we land this tomorrow would you be willing to do a small followup which refactors the toolsButton/toolsDropdown into a separate class?

@paulirish, as requested: #9564