fix(dropdown): improve accessibility

[Westbrook]

Description

Update the accessibility tree of the Dropdown pattern and its derivative components (ActionMenu and SplitButton) as well as the Menu pattern that they leverage internally.

Preview available: https://5f6e5921adb59e0095ccb7c2--spectrum-web-components.netlify.app/

This does:

• correct the focus target of open "dropdowns" to ensure that VO (macOS, iOS) enters/announces their content correctly
• moves from using :focus to [focused] to ensure transient visual state
• matches tests to these patterns
• updates to the latest aXe-core release
  • adjust usage of role="group" as per its updated rules
• populates MenuItems with ids when missing
• differentiates functionality between options and menuitems
• uses div elements over buttons in <sp-menu-item>

This does NOT:

• use the role=combobox pattern
  • will follow up in the area when we have better information on making this x-browser compliant and a path to supporting the requirement of a textfield as a child of this role
• handle moving backward in the tab order in iOS and leaving the overlay
• applying size and count attributes

Related Issue

fixes #764
refs #292
fixes #908

Motivation and Context

Components should be accessible x-browser, x-context, etc.

How Has This Been Tested?

• aXe-core unit testing
• manually review with macOS and iOS VO features
• visual regressions

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[adixon-adobe]

A couple of questions that might lead to a few more changes. Overall looks great!

[adixon-adobe]

Why did you need this change -- is this just a code style choice, or is there something subtle I'm missing?

[Westbrook]

Just style, I had removed this check at one point and then re-added it not knowing the style changed. There may be some slight amount of type security outside of the TS space in the small fraction of time this.menuItems === undefined, but I don't know enough V8/timing to confirm.

[adixon-adobe]

Hadn't realized this extended from ActionButton -- neat. Whenever something like a core render method is overridden I try to think about maintainability. Since the only difference is the tag name, is that something you could parameterize?

[Westbrook]

We could make the source render method more composable so that we only have to override part of it:

protected render(): TemplateResult {
    return this.isAnchor ?  this.renderAnchor : this.renderButton;
}
protected get renderAnchor() {}
protected get renderButton() {}

That's probably nicer system wide, I'll take swing at it.

[Westbrook]

@adixon-adobe this has been updated. It's got a couple of settings and changes that it would be good to have in #912 to speed/stabilize the CI process while we lock down the docs/visual regression cache. Let me know if you see any other good suggestions herein!

[adixon-adobe]

Looks good -- thanks!