-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Popover support for trigger events such as click (Enter
) and hover (:focus
)
#6298
Comments
Hello, Could you please clarify what is the approximate time for having this feature in the Calcite release? Thank you. |
Thanks for re-pinging this issue, @Anastasiia-Boleiko. It looks like the description was removed with one of our automations so this one got lost in the shuttle. We'll be taking a look/sign-off on design in the near future. |
Check into the autofocus on hover with dropdown for accessibility considerations. |
The functionality looks okay when animations are disabled (Windows) or reduced (Mac) when coupled with other elements on the page and focus shifts on hover. There do not appear to be any accessibility concerns in scoping with the request. |
Yeah that might be weird if a dialog role (popover) is automatically opened and focused when a reference element is hovered. |
I'm not sure this is a valid use case. When hovering or focusing a reference element and having the popover automatically open it would automatically focus and trap on the popover. I don't think that is a good experience when someone is tabbing through the document to have their focus automatically taken away. |
@driskull I understand your concerns. However, have you considered whether the following user interface is a valid use case?
P.s.: Click does not work in this case since it activates the tool. Also, in case, a popover has auto-close property, I would consider having no trap. This means that when the popover is opened and there are no interactive elements inside, or the user has focused the last interactive element within the popover, pressing "Tab" moves the focus to the next interactive element outside of the popover. In this example, when the popover is open, the user should be able to move on to the next interactive element, such as "Button 2," without having to close the popover. What is your opinion on this? |
I'm not sure if thats a valid use case, its hard to say since that comparison is adobe photoshop and not a web browser.
I think in this case a tooltip would work, right? |
I think we could enhance the tooltip to have arrow key support to select focusable elements. We would just not promote this approach because there are currently no a11y guidelines for this. However, it would work for both mouse and keyboard users if we do this. We could still keep our doc guidelines that no interactive elements should be in a tooltip but if they are we can make them work. Would this work? |
I think yes, this should work. Thanks a lot for your response!👍 |
…thin a tooltip (#9914) **Related Issue:** #6298 ## Summary - Allows placing interactive elements in tooltip elements with the following caveats - It should be advised against placing interactive elements within a tooltip because there is no a11y guidelines for accessing interactive elements within a tooltip role. Ideally a popover should be used for interactive elements. - No focus trapping or focus will be brought to interactive elements within the tooltip. - You can tab to a focusable element within a tooltip if the tooltip with the focusable element is the next focusable element within the DOM order. Otherwise, you could listen for the tooltip to be open and focus on the first interactive element if you wanted to do so. - add test - add story
Installed and assigned for verification. |
🍡 Verified on |
Description
The ArcGIS Urban team needs the following kinds of non-modal components (using tooltips/popovers):
tooltip
popover
:hover
(and:focus
) only and contains more complex content →popover
(refer to the acceptance criteria below)Acceptance Criteria
Open popover with different types of trigger events like in
type
indropdown
with the following options:Use case screenshots:
Relevant Info
Would be similar in functionality to the
type
in Dropdown.Accessibility and documentation around its accessibility will need to be considered to ensure the popover contents are provided to assistive technologies. In the [following example] the popover contents are only provided to assistive technologies when in focus (not while hovered, which could be provided via an
aria-live
prop.Which Component
popover
Example Use Case
The following Codepen serves as a hacky example but disables the focus trap using the
focusTrapDisabled
property, which is the expected behavior for assistive technologies. It also still includes the ability toopen
the component with a click orEnter
key event.Esri team
ArcGIS Urban
The text was updated successfully, but these errors were encountered: