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.

Sign up for GitHub

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

Jump to bottom

[Modal / Popover] In Safari, unable to tab through content #6943

Closed
macandcheese opened this issue May 9, 2023 · 5 comments
Closed

[Modal / Popover] In Safari, unable to tab through content #6943

macandcheese opened this issue May 9, 2023 · 5 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality research Issues that require more in-depth research or multiple team members to resolve or make decision.
Milestone
2023 May Priorities

Comments

@macandcheese
Copy link
Contributor

Actual Behavior

Follow up from Teams thread:

In Safari, unable to use Modal and keyboard - cannot advance past the close button or first slotted content item with Tab. In Popover, focus visually is added to the close button but unable to navigate with keyboard Tab / shift tab.

Expected Behavior

I would expect the focus trap to work as expected / as in other browser.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/VwEXGya?editors=100

Reproduction Steps

  1. Open Codepen in Safari
  2. Open modal and Try and tab through content
  3. Notice that after the Tile Select group gains focus, the next focused element is the Browser's search / url bar.
  4. Remove slotted content from Modal - note this still happens, so not specific to any inclusion of particular slotted elements it seems.
  5. Close Modal, Open Popover, note that you can tab through the Focus Trap, but unable to Shift tab (focus lost on page)

Reproduction Version

1.3.1

Relevant Info

Seems to only occur in Safari but worth double checking other browsers.

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

Depends on browser use per product, but potentially high impact. Feel free to re-prioritize.

Esri team

Calcite (design)
@macandcheese macandcheese added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. p - high Issue should be addressed in the current milestone, impacts component or core functionality labels May 9, 2023
@github-actions github-actions bot added impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone Calcite (design) Issues logged by Calcite designers. labels May 9, 2023
@driskull
Copy link
Member

Possibly related to focus-trap/focus-trap#959

@geospatialem geospatialem added the research Issues that require more in-depth research or multiple team members to resolve or make decision. label May 16, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels May 16, 2023
@geospatialem geospatialem added this to the 2023 May Priorities milestone May 16, 2023
@geospatialem
Copy link
Member

Research being conducted to determine next steps needed, or if it is blocked by the focus-trap issue Matt mentioned above.

@driskull
Copy link
Member

I think this is fixed now from focus-trap update. Can you verify?

@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels May 17, 2023
@github-actions github-actions bot assigned geospatialem and unassigned driskull May 17, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem 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 May 22, 2023
@geospatialem
Copy link
Member

Verified in 1.4.0-next.23.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality research Issues that require more in-depth research or multiple team members to resolve or make decision.
Projects
None yet
Milestone
2023 May Priorities
Development

No branches or pull requests
3 participants
@driskull @macandcheese @geospatialem