Improve keyboard navigation for disabled suggestion button with tooltip message
<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=221173) </details> <!--IssueSummary end--> The following discussion from !33357 should be addressed: - [ ] @markrian started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33357#note_358665787): (+1 comment) > **thought**: I understand this wrapper element is [necessary](https://bootstrap-vue.org/docs/components/tooltip#disabled-elements) for the case that the button is disabled. > > When the button is _not_ disabled, however, this wrapper element makes the keyboard navigation awkward, since you first tab to the wrapper element, _then_ to the button: > > ![suggestion](/uploads/bf83be76f0deaa7a536b0d183a63ab98/suggestion.webm) > > The only way I can think of to handle this is to conditionally wrap the button based on whether it's disabled or not, but that would mean duplicating the button markup in the template, which isn't great. > > I don't really have a suggestion here, just wanted to let you know in case you have an idea :shrug:
issue