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

[Accordion] In Safari, multiple Accordion Item elements can be visibly focused, and buggy animation #8784

Closed
2 of 6 tasks
macandcheese opened this issue Feb 20, 2024 · 6 comments
Closed
2 of 6 tasks

[Accordion] In Safari, multiple Accordion Item elements can be visibly focused, and buggy animation #8784

macandcheese opened this issue Feb 20, 2024 · 6 comments
Assignees
@geospatialem @DitwanP
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. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2024-08-27 - Aug ...

Comments

@macandcheese
Copy link
Contributor

Check existing issues

Actual Behavior

In Safari, multiple Accordion Item components can remain visibly focused:
Screenshot 2024-02-20 at 10 31 30 AM

Additionally, there is a "size wiggle" and slow animation in Safari. We should just remove any focus transition here to match other components:

Screen.Recording.2024-02-20.at.10.32.56.AM.mov

Expected Behavior

I'd expect only one to be visible focused at once.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/accordion/

Reproduction Steps

  1. Open the component documentation page in Safari
  2. Interact with the sample and see the above behavior

Reproduction Version

2.5.1

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

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. labels Feb 20, 2024
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Feb 20, 2024
@macandcheese
Copy link
Contributor Author

Seems similar to #8617

@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Mar 19, 2024
@geospatialem geospatialem added this to the 2024-08-27 - Aug Release milestone Apr 3, 2024
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Apr 3, 2024
@jcfranco
Copy link
Member

@macandcheese I wasn't able to reproduce this in Safari 17.5 (19618.2.12.11.6). Do you have any more info on how to reproduce?

@macandcheese
Copy link
Contributor Author

Recorded this in Version 17.5 (19618.2.12.11.6) just now - definitely something wonky going on - some clicks don't apply visual focus - subsequent tab / click does in fact focus at times and you can reach the state in the original issue after a bit....

Screen.Recording.2024-07-31.at.9.16.43.AM.mov

@jcfranco
Copy link
Member

jcfranco commented Aug 2, 2024

Thanks for the vid. I think I know what's going on. 🕵️❕

@jcfranco jcfranco self-assigned this Aug 2, 2024
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Aug 2, 2024
@jcfranco jcfranco mentioned this issue Aug 2, 2024
Merged
jcfranco added a commit that referenced this issue Aug 7, 2024
@jcfranco
fix(accordion-item): align focus styles across browsers (#9944)
2e29b42 
**Related Issue:** #8784

## Summary

Update focus styles so that they target the focusable element instead of
the host, which does not use tabindex currently.
@jcfranco jcfranco 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 7, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco Aug 7, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 7, 2024

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Aug 7, 2024

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

@DitwanP DitwanP closed this as completed Aug 7, 2024
@DitwanP DitwanP removed the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label Aug 7, 2024
@DitwanP DitwanP added the 4 - verified Issues that have been released and confirmed resolved. label Aug 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

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. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2024-08-27 - Aug Release
Development

No branches or pull requests
4 participants
@jcfranco @macandcheese @geospatialem @DitwanP