Make project visibility icon keyboard focusable
What does this MR do and why?
Make project visibility icon keyboard focusable - this allows the tooltip content to be accessed through a keyboard alone and for screen reader users.
Changelog: changed
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 |
|---|---|
|
Not focusable |
|
|
Not focusable |
|
|
Not focusable |
|
|
Not focusable |
|
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
visibility_level_content is used in lots of places, here's all the spots I could find it. Note: there are multiple components that show the icon and tooltip for visibility, changes here won't fix everywhere in the product.
- Go to a page that uses this helper
- Personal project https://127.0.0.1:3000/root/
- Project detail page https://127.0.0.1:3000/flightjs/Flight
- Explore projects http://127.0.0.1:3000/explore/projects
- Your work > Projects http://127.0.0.1:3000/
- Tab to focus the icon and see the tooltip
- Check with a screen reader to see the title and description
Closes #511822 https://gitlab.com/gitlab-org/gitlab/-/issues/511866 https://gitlab.com/gitlab-org/gitlab/-/issues/511846 https://gitlab.com/gitlab-org/gitlab/-/issues/511793 https://gitlab.com/gitlab-org/gitlab/-/issues/511749 https://gitlab.com/gitlab-org/gitlab/-/issues/511667