feat(ui): Add focus trigger to QuestionTooltip
#78836
Draft
+41
−10
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
Scope: Frontend
❌ 1 Tests Failed:
View the top 1 failed tests by shortest run time
To view individual test run time comparison to the main branch, go to the Test Analytics Dashboard |
| @@ -61,4 +65,11 @@ const QuestionIconContainer = styled('span')<Pick<QuestionProps, 'size' | 'class | |||
| } | |||
| `; | |||
|
|
|||
| const TooltipTriggerButton = styled(Button)` | |||
There was a problem hiding this comment.
Already discussed in slack, but yeah, let's not use our button and just use a regular button element here. So we don't have to override styles (and instead apply styles)
afaik there's nothing we would want from our button component.
We should also give it a proper aria-label then too.
Really all of the usages of this component should pass some kind of label prop so we can indicate to the screen reader that this button will tell you more.
There was a problem hiding this comment.
I think if we were to do this right, then the Tooltip component should ensure that whatever the trigger is, it is focusable. We could ensure this in different ways, but since tooltips are tied to a html trigger element, providing a tab index would probably be a good idea. The downside here is that this would require the children to implement the full html interface (something we pretty much never do, but should)
Rough example
function Tooltip(){
return cloneElement(children, {tabIndex})
}
// implement full interface and pass it to the dom node
interface ButtonProps extends HTMLButtonProps {}
function Button(props){
return <Buttton {...props}/>
}
|
This pull request has gone three weeks without activity. In another week, I will close it. But! If you comment or otherwise update it, I will reset the clock, and if you add the label "A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀 |
|
This pull request has gone three weeks without activity. In another week, I will close it. But! If you comment or otherwise update it, I will reset the clock, and if you add the label "A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
QuestionTooltiphas an unpleasant A11y downside, in which it doesn't appear on keyboard focus because it doesn't receive keyboard focus. This PR wraps it in an invisible button which receives focus, and makes it possible to see the tooltip while navigating with a keyboard.The problem is, I'm a little wary of using
Button. I want the focus state from it (the border including the animation) but it has a lot of styling I had to override. Is there a better way to achieve this? I could rip those styles out, but I didn't like that, either.Also, it would probably be nice to use React ARIA's
Tooltipbut one thing at a time.e.g.,
