ActionList: Correct semantics for Groups

[siddharthkp]

Part of https://github.com/github/primer/issues/447

• ActionList.Group create a ul inside a li
• The title of the Group is used as the label for the ul.
• The section Header is for visual users only. It's hidden for screen readers.
• Group can accept role

This is the generated HTML, formatted for legibility:

<ularia-label="Select reviewers"><li><divrole="presentation" aria-hidden="true"><spanid="react-aria-1">Suggestions</span></div><ularia-labelledby="react-aria-1" role="listbox"><lirole="option"
aria-selected="true"
aria-labelledby="react-aria-2"
aria-describedby="react-aria-3 react-aria-4"
><span><inputtype="checkbox" tabindex="-1" readonlyaria-readonly="false" checked/></span><spanclass="Box-nv15kw-0 iBXgEg"><imgsrc="https://github.com/pksjce.png" /></span><divdata-component="ActionList.Item--DividerContainer"><div><spanid="react-aria-2">pksjce</span><divid="react-aria-3" title="Pavithra Kodmad">Pavithra Kodmad</div></div><spanid="react-aria-4">Recently edited these files</span></div></li><li>....</li></ul></li><li><divrole="presentation" aria-hidden="true"><spanid="react-aria-5">Everyone</span></div><ularia-labelledby="react-aria-5" role="listbox"><li>...</li><li>...</li><li>...</li></ul></li>

Merge checklist

• Added/updated tests, but in a different PR: ActionList: test stories for axe violations #1597
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

[changeset-bot]

🦋 Changeset detected

Latest commit: 75bec0a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	54.44 KB (0%)
dist/browser.umd.js	54.83 KB (0%)

[siddharthkp]

Moved changes over to #1598