Make SubNav SubMenus accessible using keyboard

[joshfarrant]

Summary

Makes the submenu's arrow icon focusable, activating it (with Space or Enter) will open the submenu. Tabbing to the next or previous item will collapse the submenu. Esc intentionally doesn't close the menu to match the behaviour of the WAI example referenced for this change.

List of notable changes:

• Added useIsChildFocused hook to detect whether a given element has a child which is focused
• Split out SubNavLinkWithSubmenu from SubNavLink component.
  • This is an internal change and doesn't affect the public API of the component. It was done to better separate nav items with and without submenus and remove unnecessary hooks calls from items without submenus.

What should reviewers focus on?

• Ensure that keyboard navigation works as expected
• I'm using an onKeyDown event to detect when Space or Enter are pressed, rather than using onClick. The reason is that I don't want the caret to be clickable, as that would differ from the component's existing behaviour. Using onClick would allow users to click the caret and keep the menu open until they click away. If this is the desired behaviour, I'd be happy to switch to onClick instead, however my concern is that the arrow icon would be quite a small tap target.

Steps to test:

1. Take a look at a story containing a submenu and try navigating using the keyboard.
2. Open the menu by activating the arrow button
3. Test that you can tab forwards and backwards through the dropdown
4. Test that tabbing through the dropdown to the next item closes the dropdown
5. Test that tabbing back to the previous item closes the dropdown

Supporting resources (related issues, external links, etc):

• https://github.com/github/primer/issues/3672
• WAI guidance referenced

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• New visual snapshots have been generated / updated for any UI changes
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After
Export-1722930600800.mp4	Export-1722930428822.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: f1264f9

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

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	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]

🟢 No design token changes found

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

[rezrah]

Looks great 🙌