Loading
Fix info popovers not opening on permission selection forms
What does this MR do and why?
The information popovers next to resources on the fine-grained personal access token creation form, and next to permissions on the custom role creation/edit form, stopped opening. Clicking the icon did nothing, and there was no way to reach the popover with the keyboard either.
Both popovers use triggers="focus". Since @gitlab/ui 136.0.0 (bumped in commit bc7b824b), the vendored bootstrap-vue only opens focus-triggered popovers when the target matches :focus-visible. Clicking the icon focuses it but doesn't set :focus-visible, so mouse users saw nothing. The target gl-icon is a plain svg without tabindex, so keyboard users couldn't focus it at all. The result was that the popovers couldn't be opened by any means. The fix changes the triggers to hover focus, matching the GlPopover default and the shared HelpPopover component, and adds tabindex="0" and an aria-label to the icons so they are keyboard reachable and have an accessible name. Specs were updated to cover the focusable icon and the new triggers.
Screenshots or screen recordings
| State | Screenshot |
|---|---|
| Before: clicking or hovering the icon does nothing (icon is focused, no popover) |  |
| After: hovering the icon shows the popover |  |
| After: tabbing to the icon shows the popover |  |
How to set up and validate locally
- Go to User settings > Personal access tokens and add a new fine-grained token.
- In the resource and permission selector, expand a category (for example Application Security).
- Hover the information icon next to a resource: the description popover should appear.
- Tab to the icon with the keyboard: the popover should also appear.
- Repeat on the custom role form (Settings > Roles and permissions > New role for a group, EE license required): hover or tab to the information icon next to a permission.