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:

<ul aria-label="Select reviewers">
  <li>
    <div role="presentation" aria-hidden="true">
      <span id="react-aria-1">Suggestions</span>
    </div>
    <ul aria-labelledby="react-aria-1" role="listbox">
      <li
        role="option"
        aria-selected="true"
        aria-labelledby="react-aria-2"
        aria-describedby="react-aria-3 react-aria-4"
      >
        <span>
          <input type="checkbox" tabindex="-1" readonly aria-readonly="false" checked />
        </span>
        <span class="Box-nv15kw-0 iBXgEg">
          <img src="https://github.com/pksjce.png" />
        </span>
        <div data-component="ActionList.Item--DividerContainer">
          <div>
            <span id="react-aria-2">pksjce</span>
            <div id="react-aria-3" title="Pavithra Kodmad">Pavithra Kodmad</div>
          </div>
          <span id="react-aria-4">Recently edited these files</span>
        </div>
      </li>
      <li>....</li>
    </ul>
  </li>
  <li>
    <div role="presentation" aria-hidden="true">
      <span id="react-aria-5">Everyone</span>
    </div>
    <ul aria-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