Link style button in a Viz Picker -> Popover #3547
-
|
hi! I'm working on an Overview page for Warehouses in Segment, and ran into this pattern that I wanted to double-check is accessible within a Viz Picker:
It's a link-style button that initiates a popover. The PM is hoping it can be initiated on viz picker hover instead of number/button click. I'm also exploring a version that removes the sparkline chart and adds in the popover data, since there isn't a ton more within the popover that couldn't just be contained in the viz picker itself, but that's TBD. thank youuu, |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 7 replies
-
|
Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary. Hi Colleen, Based on the Paste documentation, a Popover must be triggered by an explicit user action, such as clicking a button. It's not recommended to trigger it on hover as it might not be accessible for all users. Here's the relevant excerpt from the Accessibility section: * A Popover must be triggered by an explicit user action, e.g., clicking a button.As for the idea of removing the sparkline chart and adding the popover data directly into the viz picker, it's important to remember that the information in a Popover should never be essential to task completion. If the information is crucial, it might be better to include it directly in the viz picker. Here's the relevant excerpt from the Composition notes: Use a Popover to present supplemental information with interactive elements, like an [Anchor](/components/anchor). Information in a Popover should never be essential to task completion.I hope this helps! Let me know if you have any other questions. Best, Here are some similar discussions:
|
Beta Was this translation helpful? Give feedback.
-
|
Small additional note: Popover shouldn't be triggered by hover because it contains a focusable element(s). |
Beta Was this translation helpful? Give feedback.
-
|
thank you thank you! |
Beta Was this translation helpful? Give feedback.
-
|
hi @serifluous! We received feedback during testing today that a hover state or popover is expected to explain what the numbers are referring to within the pipeline card. Since the card is selected on click, I don't think we can use a popover, but wondering if we can use a tooltip?
|
Beta Was this translation helpful? Give feedback.
-
|
Can you share a Figma file that shows all the different tooltips / pieces of content that need to be triggered in this layout? I'm assuming there's more stuff that needs to be shown, and why "<0.01% events failed" can't be just text in the card itself. |
Beta Was this translation helpful? Give feedback.
-
|
I will also say that the card itself, because it contains different, hierarchical content, isn't focusable. Both tooltips and popovers need a focusable trigger. |
Beta Was this translation helpful? Give feedback.
-
|
Yep, here's a link to some further design exploration. As far as I know, all info in that first example with the popover needs to be shown, but I can ask Emma/Peter to confirm. |
Beta Was this translation helpful? Give feedback.
-
|
I guess my question is, what is wrong with the first screenshot posted as part of the initial discussion starter? It has a way to select the step with the visual picker, it has the trigger to launch the popover with additional information. You can add additional interaction on top of that, for example opening the popover over on mouse enter and closing it on mouse leave. I suspect it'll be annoying, but it's possible by hooking (pun intended) into the state hook popover provides. You cater for keyboard accessibility and quick look mouse users. |
Beta Was this translation helpful? Give feedback.
-
|
First screenshot definitely works - @serifluous and @nkrantz had recommended looking at using Box primitive instead of the visual picker, so I started exploring that path. Box feels a little cleaner for this type of journey-type component, but both solutions could work. Plus, the more i looked at this component, the more I felt like we could just surface everything a user would want to see in the card itself and get rid of the need for a popover altogether:
|
Beta Was this translation helpful? Give feedback.
Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.
Hi Colleen,
Based on the Paste documentation, a Popover must be triggered by an explicit user action, such as clicking a button. It's not recommended to trigger it on hover as it might not be accessible for all users.
Here's the relevant excerpt from the Accessibility section:
* A Popover must be triggered by an explicit user action, e.g., clicking a button.As for the idea of removing the sparkline chart and adding the popover data directly into the viz picker, it's important to remember that the information in a Popover should neve…