Use a pseudo element to prevent inspector tab width from changing when selected #9793
Conversation
chrisvanpatten
added
[Type] Enhancement
|
It might also be good to get an accessibility review on this; I think the pseudo element will be invisible to screen readers (which is desired!) since there's an aria-label, but I don't have access to a screen reader environment at the moment unfortunately. |
|
This is DAMN clever. I didn't even notice the little jump until now, and now I want it gone. I love this, from a design point of view, 👍 👍. Have you tested in IE11? If it doesn't work there you can use |
jasmussen
added
the
[Focus] Accessibility (a11y)
|
Per this document CSS content is sometimes read by screen readers, so I went ahead and added Will give a more thorough test to IE11 later for safety, but the technique definitely works; we use it in production on one of our recent client projects which is IE11 compatible. |
| > | ||
| { __( 'Document' ) } | ||
| </button> | ||
| <button | ||
| onClick={ openBlockSettings } | ||
| className={ `edit-post-sidebar__panel-tab ${ sidebarName === 'edit-post/block' ? 'is-active' : '' }` } | ||
| aria-label={ __( 'Block settings' ) } | ||
| data-label={ ( | ||
| 1 === count ? |
There was a problem hiding this comment.
This is a bit of a gnarly expression to put in a prop… plus it'd be better if we stored this in a variable and then just output it here and below. I'll make that tweak and push the change though. 😄
| @@ -17,6 +17,18 @@ | |||
| color: $dark-gray-900; | |||
| @include square-style__neutral; | |||
|
|
|||
| // This pseudo-element "duplicates" the tab label and sets the text to bold. | |||
| // This ensures that the tab doesn't change width when selected. | |||
There was a problem hiding this comment.
Good description; I'll add a link to this PR (just in case git blame eventually doesn't lead someone back to here) for context.
|
Thanks @tofumatt! 🚢 |
This is a very small tweak, but it's one of those little things that makes me crazy ;-)
It adds a pseudo element to the inspector tabs, with the content set to match the tab label. The psuedo-element is bolded, so the width of the tab is always the same. It's sort of hard to explain in text so here's an example:
Before:
After:
And to help make it a bit clearer what's happening under-the-hood, here's how it looks if the pseudo element is visible (it's the 2nd line of labels):
That second label is pre-bolded, so when the focus changes and the visible label changes to bold, the width is unchanged.
There's probably a better way to have the data attribute on the JS side (on the Block tab in particular, since there's some logic around selected block count that I just duplicated) but I'm not sure what's most appropriate there.