Skip to content
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

Closed
2 of 3 tasks
geospatialem opened this issue Jan 17, 2023 · 16 comments
Closed
2 of 3 tasks
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Urban Issues logged by ArcGIS Urban team members. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. p - low Issue is non core or affecting less that 10% of people using the library ready for dev Issues ready for development implementation. spike complete Issues that have a research spike completed and dev work can proceed

Comments

@geospatialem
Copy link
Member

geospatialem commented Jan 17, 2023

Description

The ArcGIS Urban team needs the following kinds of non-modal components (using tooltips/popovers):

  • Displays on hover (and on focus for keyboard accessibility compliance) and contains a simple text → tooltip
  • Displays on click (and on Enter key press, for accessibility compliance as well) contains more complex content such as links, Checkbox, Input Date Picker, Button etc. → popover
  • Displays on :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 in dropdown with the following options:

  • Click and the Enter key or
  • Hover and when focused
    • If this option is selected there should be a way that the click and enter key events do not toggle the component's open prop.

Use case screenshots:

image

image

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 to open the component with a click or Enter key event.

Esri team

ArcGIS Urban

@geospatialem geospatialem added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. ArcGIS Urban Issues logged by ArcGIS Urban team members. labels Jan 17, 2023
@Anastasiia-Boleiko
Copy link

Hello,

Could you please clarify what is the approximate time for having this feature in the Calcite release?

Thank you.

@geospatialem geospatialem added the design Issues that need design consultation prior to development. label Jun 30, 2023
@geospatialem
Copy link
Member Author

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.

@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation. labels Jul 6, 2023
@github-actions github-actions bot added needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed design Issues that need design consultation prior to development. labels Jul 6, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jul 6, 2023

cc @geospatialem, @brittneytewks

@geospatialem
Copy link
Member Author

Check into the autofocus on hover with dropdown for accessibility considerations.

@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Jul 6, 2023
@geospatialem
Copy link
Member Author

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.

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jul 26, 2023
@driskull
Copy link
Member

Check into the autofocus on hover with dropdown for accessibility considerations.

Yeah that might be weird if a dialog role (popover) is automatically opened and focused when a reference element is hovered.

@driskull
Copy link
Member

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.

@Anastasiia-Boleiko
Copy link

I'm not sure this is a valid use case.

@driskull I understand your concerns. However, have you considered whether the following user interface is a valid use case?
image
When user focuses a tool button:

  • a popover with help info and a link is displayed
  • the focus is moved to the More how link (the first component in the popover)
  • and there is no focus trap.
    Under the focus trap, in this case, I mean allowing a user to use "Tab" key to navigate to the next interactive element, which is the next tool button in this specific 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?

@driskull
Copy link
Member

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.

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.

I think in this case a tooltip would work, right?

@geospatialem geospatialem added the spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. label Sep 28, 2023
@driskull
Copy link
Member

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?

@Anastasiia-Boleiko
Copy link

I think yes, this should work. Thanks a lot for your response!👍

@geospatialem geospatialem added the spike complete Issues that have a research spike completed and dev work can proceed label Nov 22, 2023
@github-actions github-actions bot added needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels Nov 22, 2023
@github-actions github-actions bot removed this from the 2023 December Priorities milestone Nov 22, 2023
Copy link
Contributor

cc @geospatialem, @brittneytewks

@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library and removed p - medium Issue is non core or affecting less that 60% of people using the library labels Nov 22, 2023
@brittneytewks brittneytewks added the design Issues that need design consultation prior to development. label Dec 11, 2023
@geospatialem geospatialem added this to the 2024-08-27 - Aug Release milestone Jan 10, 2024
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jan 10, 2024
@driskull driskull self-assigned this Jul 30, 2024
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Jul 30, 2024
driskull added a commit that referenced this issue Aug 5, 2024
…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
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Aug 5, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Aug 5, 2024
Copy link
Contributor

github-actions bot commented Aug 5, 2024

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Aug 6, 2024

🍡 Verified on 2.12.0-next.6
https://codepen.io/Ditwan-Price/pen/QWXgrJX?editors=100

@DitwanP DitwanP closed this as completed Aug 6, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Aug 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Urban Issues logged by ArcGIS Urban team members. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. p - low Issue is non core or affecting less that 10% of people using the library ready for dev Issues ready for development implementation. spike complete Issues that have a research spike completed and dev work can proceed
Projects
None yet
Development

No branches or pull requests

6 participants