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

fix(accordion): disable focus on collapsed accordion item content #4320

Merged
merged 8 commits into from
Oct 17, 2019
Merged

fix(accordion): disable focus on collapsed accordion item content #4320

merged 8 commits into from
Oct 17, 2019

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Oct 14, 2019 •
edited
Loading

Closes #3429

This PR disallows accordion item content to receive focus when the panel is collapsed. This sets display none on accordion content when the panel is collapsed.

Alternatively, we can refactor our hidden mixin (or each consumer of this mixin) to account for the situation where a typically visible input needs to inherit a hidden visibility rule

Changelog

New

  • animations to preserve transitions when expanding and collapsing accordion items

Changed

Testing / Reviewing

Add a Toggle or Checkbox to an accordion item and tab through the accordion. The toggle should not receive focus while the panel is collapsed

@emyarod emyarod requested a review from a team as a code owner October 14, 2019 15:46
@ghost ghost requested review from dakahn and joshblack October 14, 2019 15:46
@netlify
Copy link

netlify bot commented Oct 14, 2019 •
edited
Loading

Deploy preview for the-carbon-components ready!

Built with commit 042e0b9

https://deploy-preview-4320--the-carbon-components.netlify.com

@joshblack
Copy link
Contributor

@emyarod is the linked issue the right one?

@netlify
Copy link

netlify bot commented Oct 14, 2019 •
edited
Loading

Deploy preview for carbon-elements ready!

Built with commit 042e0b9

https://deploy-preview-4320--carbon-elements.netlify.com

@joshblack
Copy link
Contributor

Is this a use-case where the hidden attribute could come into play?

@emyarod emyarod force-pushed the 3429-accordion-retains-tab-stops-when-collapsed branch from 0bf8465 to f60e2e6 Compare October 14, 2019 16:22
@netlify
Copy link

netlify bot commented Oct 14, 2019

Deploy preview for carbon-components-react failed.

Built with commit 0bf8465

https://app.netlify.com/sites/carbon-components-react/deploys/5da4986aebc9460007a6b666

@emyarod
Copy link
Member Author

emyarod commented Oct 14, 2019

sure the approach with hidden would be identical, the only difference is instead of setting CSS display value we would set the hidden attribute. is one more preferable over the other?

@netlify
Copy link

netlify bot commented Oct 14, 2019 •
edited
Loading

Deploy preview for carbon-components-react ready!

Built with commit 042e0b9

https://deploy-preview-4320--carbon-components-react.netlify.com

@asudoh asudoh requested a review from a team October 14, 2019 21:39
@ghost ghost requested review from designertyler and removed request for a team October 14, 2019 21:40
asudoh
asudoh approved these changes Oct 14, 2019
View reviewed changes
Copy link
Contributor

@asudoh asudoh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 - Thanks @emyarod!

@emyarod emyarod force-pushed the 3429-accordion-retains-tab-stops-when-collapsed branch from f60e2e6 to 32e6cec Compare October 16, 2019 19:46
@asudoh
Copy link
Contributor

asudoh commented Oct 17, 2019

@joshblack Would you want to answer the question from @emyarod? Thanks!

@emyarod emyarod force-pushed the 3429-accordion-retains-tab-stops-when-collapsed branch from 32e6cec to 329ecba Compare October 17, 2019 14:10
@joshblack
Copy link
Contributor

I think you're good as-is! Thanks @emyarod 😄

@asudoh asudoh merged commit cad9e46 into carbon-design-system:master Oct 17, 2019
@emyarod emyarod deleted the 3429-accordion-retains-tab-stops-when-collapsed branch October 18, 2019 12:54
@abbeyhrt abbeyhrt mentioned this pull request Oct 23, 2019
Closed
@jendowns jendowns mentioned this pull request Oct 24, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@joshblack joshblack joshblack left review comments

@asudoh asudoh asudoh approved these changes

@designertyler designertyler designertyler approved these changes

@dakahn dakahn dakahn approved these changes

Assignees
No one assigned
Labels
status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Accordion content retains tab stops for many items (Toggle is one example)
5 participants
@emyarod @joshblack @asudoh @designertyler @dakahn