Improve keyboard and screen reader access on Organization Access

Tim Rizzirequested to merge
634605-org-access-wcag into master

What does this MR do and why?

Organization Access must meet WCAG 2.1 AA before the flag rollout (#629714). This MR fixes what an audit found on the overview and Artifact Registry pages, the invite modal, the role drawer and the remove modal:

  • Focus: the role drawer moves focus to its title when it opens, and back to the button that opened it when it closes. GlDrawer does neither. If that button is gone after a re-render, focus moves to the members list.
  • Escape: Escape from the member picker's input closes the invite modal. GlTokenSelector stops every keydown, so GlModal never saw it. A typed search with suggestions open is cleared first. A second Escape closes the modal.
  • Names: the drawer is labeled by its title. Both tables have screen-reader captions. Role buttons read "Artifact Admin, role details for Sam", and row menus read "Actions for Sam".
  • Coverage: new axe feature spec for both pages, the modals and the drawer.

References

Screenshots or screen recordings

Not available. The changes are focus behavior and accessible names, which jest and the axe feature spec cover. The browser specs need this branch's assets, so CI is the check.

How to set up and validate locally

  1. Enable the flag: Feature.enable(:organization_access_ui).
  2. Visit /o/<org>/-/access/artifact-registry.
  3. Open the role drawer from a role button. Focus lands on the drawer title. Press Escape or select Close. Focus returns to the role button.
  4. Open Invite members, type a search, and press Escape. The search clears and the modal stays open. Press Escape again. The modal closes.
  5. Run axe DevTools on both pages and on each modal and drawer.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

🤖 Generated with Claude Code

Edited by Tim Rizzi

Merge request reports