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><liaria-labelledby="react-aria-1 react-aria-2"><span><imgsrc="https://github.com/pksjce.png"/></span><divdata-component="ActionList.Item--DividerContainer"><div><spanid="react-aria-1">pksjce</span><divid="react-aria-2" title="Pavithra Kodmad">Pavithra Kodmad</div></div></div></li><li>...</li><lirole="separator"></li><liaria-labelledby="react-aria-3 " aria-describedby="react-aria-4"><span><spanclass="label-circle"></span></span><divdata-component="ActionList.Item--DividerContainer"><spanid="react-aria-3">blocked</span><spanid="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: 2be0740

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%)