ActionList: Better label & description for Item

[siddharthkp]

Change base after #1517 is merged
Part of https://github.com/github/primer/issues/447

• Bring inline description to be part of label.
• Block description is describedby

This is the generated HTML, formatted for legibility:

<ul>
  <li aria-labelledby="react-aria-1 react-aria-2">
    <span><img src="https://github.com/pksjce.png"/></span>
    <div data-component="ActionList.Item--DividerContainer">
      <div>
        <span id="react-aria-1">pksjce</span>
        <div id="react-aria-2" title="Pavithra Kodmad">Pavithra Kodmad</div>
      </div>
    </div>
  </li>
  <li>...</li>
  <li role="separator"></li>
  <li aria-labelledby="react-aria-3 " aria-describedby="react-aria-4">
    <span><span class="label-circle"></span></span>
    <div data-component="ActionList.Item--DividerContainer">
      <span id="react-aria-3">blocked</span>
      <span id="react-aria-4">
        Someone or something is preventing this from moving forward
      </span>
    </div>
  </li>
  <li>...</li>
</ul>

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: 08e944c

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.42 KB (0%)
dist/browser.umd.js	54.81 KB (0%)

[siddharthkp]

Moved to #1599