Abstract out aria-activedescendant handling

Description

Abstract out the implementation of aria-activedescendant handling implemented in gitlab-org/gitlab-ui#3159 (closed) to allow simplified re-use in a number of UI components.

The aria-activedescendant property provides a method of managing focus for assistive technologies on interactive elements when they contain multiple focusable descendants, such as menus, grids, and toolbars. Instead of the screen reader moving focus between owned elements, aria-activedescendant can be used on container elements to refer to the currently active element, informing assistive technology users of the currently active element when focused.

Full aria spec here.

Why?

Before aria-activedescendant After aria-activedescendant

Focus leaves the input to navigate to an option. The user cannot continue to type into the input unless they navigate back to it.

CleanShot_2025-04-15_at_13.49.55

Focus remains on the input throughout keyboard navigation of the related list. This allows the user to refine search terms without navigating back to the input.

CleanShot_2025-04-15_at_12.04.22

Checklist

Make sure the following are completed before closing the issue:

  1. Assign the correct component label to this issue.
  2. Create an MR with the additions or updates needed.
  3. Be sure to get your MR reviewed by a FE/UX Foundations designer.
  4. When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
  5. When applicable, create an MR in Pajamas to update the component status.
  6. When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  7. When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  8. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review.
  9. 🎉 Congrats, you made it! You can now close this issue.
Edited by Ian Gloude