Action list a11y

[camertron]

Description

This PR addresses accessibility feedback for the NavList and ActionList components as identified in https://github.com/github/primer/issues/1120. Namely it:

1. renders much clearer markup. Several unnecessary <ul>s have been removed and separators are now <div>s instead of <li>s
2. adjusts a number of roles
3. allows customizing the heading level
4. adds aria-labelledby to sub-list <ul>s. If a heading and an aria-label are both provided, an error is now raised.
5. renames Section -> Group to align better with the React implementation
6. removes the show_on_hover attribute from ActionList and NavList items, as only showing buttons on hover is not an accessible pattern The show_on_hover option has been left in. We will address it (if necessary) in a future PR.
7. ensures sub-lists collapse when the user presses escape
8. updates the NavList's trailing action preview so that the buttons actually do something
9. ensures NavLists are wrapped with the <nav> tag

Integration

Does this change require any updates to code in production?

Yes. Since the sections slot has been renamed to groups, any place in dotcom where we're calling with_section will need to change to with_group. In addition, we will need to remove aria-labels from any section/group that also contains a header.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews

[changeset-bot]

🦋 Changeset detected

Latest commit: 7372a32

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-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

[lindseywild]

This is awesome 🤩 Just a few suggestions!

[langermank]

Looks great @camertron !