Bug: calcite-popover - trap focus inside #2133
Comments
AdelheidF
added
bug
|
Follow |
AdelheidF
changed the title
|
(1) and (2) are fixed with the use of the new |
jcfranco
added
the
design
|
@AdelheidF can you put together a codepen that illustrates this bug? Thanks! |
|
https://codepen.io/afreitag/pen/LYjmaWv?editors=1000 Click on the button to open the popover. Wait until focus sits on close button, now tab 4 times, all good. Now tab one more time, the focus should go back to the close button. How can I know that the focus left the list to set it back to the close button? A keyboard-only user would be lost now. |
|
Is this specific to list? Looking at it now it just seems like we don't trap focus inside a popover. That seems like a reasonable thing to have support though. |
not really, |
AdelheidF
changed the title
github-actions
bot
modified the milestones:
Sprint 2022/09/05 - 2022/09/16,
Sprint 2022/09/19 - 2022/09/30
github-actions
bot
modified the milestones:
Sprint 2022/09/19 - 2022/09/30,
Sprint 2022/10/03 - 2022/10/14
benelan
modified the milestones:
Sprint 2022/10/03 - 2022/10/07,
Sprint 2022/10/10 - 2022/10/21
github-actions
bot
modified the milestones:
Sprint 2022/10/10 - 2022/10/21,
Sprint 2022/10/24 - 2022/11/04
|
@jcfranco should we use this npm package for this? https://www.npmjs.com/package/focus-trap We could update the modal to use this package too. |
github-actions
bot
modified the milestones:
Sprint 2022/10/24 - 2022/11/04,
Sprint 2022/11/07 - 2022/11/18
driskull
added
2 - in development
…y. (#5725) * refactor(modal): Update modal to use focus-trap module. * cleanup * cleanup * fix test * cleanup * cleanup * remove `previousActiveElement` internal prop. focus utility handles this already. * set fallbackFocus element. * feat(popover): Add focus-trap to popover. #2133 * cleanup * cleanup * cleanup * add disableFocusTrap prop to popover * review feedback * add spec test * revert changes * add popover tests for setFocus
driskull
added
3 - installed
github-actions
bot
assigned benelan and geospatialem and unassigned driskull and macandcheese
|
Installed and assigned for verification. |
geospatialem
added
4 - verified
|
Verified on
|
All 3 sub-issues here a related, so I added them into the same issue.
(1) (fixed with the use of `calcite-list`)
Add an option to value list to not allow selection of the text, only `action-end`.
This is a lists of values in the filter component, clicking on a value name does not call an action. Only
action-endmatters here.This is a list of detailed information inside a popover. Nothing should happen when you click on the text, only
action-endmatters here as well.(2) (fixed with the use of `calcite-list`)
Navigating in this value list is a bit weird. Initially only the first row, first text then action-end, can be selected. If you then tab again it leaves the list. You need to use the down arrow to navigate inside the list, but the down arrow only works on the text, not on action-end. Same with `calcite-pick-list`.
(3)
Focus gets lost if there if no other focusable item after the value-list when using tab key after
action-endis selected. This is a problem for keyboard only users in the popover case above. How can I catch the focus (or know when the focus leaves value-list) and redirect it back to the close icon of the popover? I triedonBlurbut that didn't work.Scenario:
popover opens with close button on focus. Then I tab my way through the list. After the last focusable item in the list is active and I hit tab the focus gets lost.
New list component #2117
Actual Behavior
Expected Behavior
Reproduction Steps or Sample
Relevant Info
Version:
@esri/calcite-components@<version>The text was updated successfully, but these errors were encountered: