Wrap devops table help icon with `gl-button`
What does this MR do and why?
As @psjakubowska mentioned here, the tooltip attached to the icon makes the SVG focusable. This MR resolves this by wrapping the icon with gl-button. This also follows the Pajamas guideline for icon with tooltip.
References
Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Before | After |
|---|---|
| Screen_Recording_2025-01-24_at_9.43.00_AM | Screen_Recording_2025-01-24_at_10.09.43_AM |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Go to Admin Area
- Select Analytics / DevOps Reports
- Switch to any of the tabs, other than overview
- Mouseover ?
I confirmed:
-
✅ the icon is now tappable with keyboard -
✅ in the developer console, help text is rendering as aria label for the button -
✅ voiceover is getting proper text
Resolves #511832