Loading
Make cascading setting lock message keyboard accessible
What does this MR do and why?
This MR makes the cascading settings lock message reachable from the keyboard. On Duo settings pages, this message holds a link to the parent group where the setting (for example, flows) is enforced or can be changed. Before this change, keyboard and screen reader users could not reach that link.
References
- Resolves #631268 (closed)
- Follow-up: #631463
- Pajamas popover story: https://design-system-pages-2b622b.gitlab.io/storybook/?path=/story/base-popover--text-links
Screenshots or screen recordings
| Before | After |
|---|---|
The After screenshot shows keyboard focus on the group link inside the popover.
How to set up and validate locally
- In a parent group, go to Settings > GitLab Duo > Configuration, for example http://gdk.test:3000/groups/gitlab-duo/-/settings/gitlab_duo. Turn off Allow flow execution and enforce it for subgroups and projects.
- Open a project in that group at
/<group>/<project>/edit#js-gitlab-duo-settings, for example http://gdk.test:3000/gitlab-duo/test/edit#js-gitlab-duo-settings. - Press Tab until the lock icon next to Allow flow execution has focus. The popover opens.
- Press Tab again. Focus moves to the group link inside the popover. Press Enter to follow it.
- Press Shift+Tab to go back to the lock icon, or Tab to leave. The popover closes when focus leaves both.
Testing done
Verified in GDK: the steps above work, and moving the mouse from the lock icon into the popover keeps it open.
- Jest:
spec/frontend/cascading_settings(34 tests) pass. - RSpec: the namespaces, projects, and EE group settings helper specs, and the resource access token view spec (323 examples) pass.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Vanessa Otto