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

Fix/accordion highlight #3182

Merged
merged 4 commits into from
Jun 24, 2024
Merged

Fix/accordion highlight #3182

merged 4 commits into from
Jun 24, 2024

Conversation

Arukuen
Copy link
Contributor

@Arukuen Arukuen commented May 12, 2024

fixes #3096

  • No outline when clicked, but outline when tabbed for accessibility

Copy link

github-actions bot commented May 12, 2024

🤖 Pull request artifacts

file commit
pr3182-stackable-3182-merge.zip 968c4ab

github-actions bot added a commit that referenced this pull request May 12, 2024
github-actions bot added a commit that referenced this pull request May 16, 2024
Copy link
Contributor

@bfintal bfintal left a comment

Choose a reason for hiding this comment

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

Good solution, just a suggestion for improvement.

Comment on lines 33 to 35
// Prevent text selection while animating
const content = el.querySelector( '.stk-block-accordion__content' )
content.style.userSelect = 'none'
Copy link
Contributor

Choose a reason for hiding this comment

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

It seems that doing this on the content would still make the text highlight. I would recommend doing this on the element itself to prevent this:

Suggested change
// Prevent text selection while animating
const content = el.querySelector( '.stk-block-accordion__content' )
content.style.userSelect = 'none'
// Prevent text selection while animating
el.style.userSelect = 'none'

Comment on lines 61 to 71
if ( window.getSelection ) {
// eslint-disable-next-line @wordpress/no-global-get-selection
const selection = window.getSelection()
if ( selection.removeAllRanges ) {
selection.removeAllRanges()
}
} else if ( document.selection ) {
// For older IE browsers
document.selection.empty()
}
content.style.userSelect = 'auto'
Copy link
Contributor

Choose a reason for hiding this comment

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

I see that you are clearing the selection because the userSelect above was not taking full effect and you can still highlight text when opening an accordion. Applying the style directly on the element fixes things, and now you do not need all of the selection removal code.

Also, to me, if the fix only partially works and you needed to add some selection removal code to compensate is an indicator that there should be a cleaner solution 👍

Suggested change
if ( window.getSelection ) {
// eslint-disable-next-line @wordpress/no-global-get-selection
const selection = window.getSelection()
if ( selection.removeAllRanges ) {
selection.removeAllRanges()
}
} else if ( document.selection ) {
// For older IE browsers
document.selection.empty()
}
content.style.userSelect = 'auto'
el.style.userSelect = 'auto'

github-actions bot added a commit that referenced this pull request May 22, 2024
@bfintal bfintal merged commit b622a45 into develop Jun 24, 2024
1 of 6 checks passed
@bfintal bfintal deleted the fix/accordion-highlight branch June 24, 2024 07:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Accordion block - When expanding accordion, it gets highlighted on frontend
2 participants