Added default focus and hover states to accordion header#71937
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR!
The changes look good to me, but personally, I would like to respect the browser's default outline as much as possible and remove the offset as well.
What do you think of the following approach?
.wp-block-accordion-header__toggle {
// ...
&:not(:focus-visible) {
outline: none;
}
&:hover .wp-block-accordion-header__toggle-title {
text-decoration: underline;
}
}
t-hamano
added
[Type] Bug
|
@t-hamano Makes sense to me. I cleared all the styles from toggle that would customize outline |
…1937) * Added default focus and hover states to accordion header * Update focus style. Removed outline offset * Update focus style. Remove the outline styles that look 'custom' Co-authored-by: n2erjo00 <n2erjo00@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org>
2 participants
What?
Closes #71777
This PR adds default hover and focus states to accordion header
Why?
Hover and focus states are important parts of accessibility
How?
-webkit-focus-ring-colorto color the outline ring usecurrentColorTesting Instructions
/wp-admin/admin.php?page=gutenberg-experimentsTesting Instructions for Keyboard
Screenshots or screencast