Refactor the Settings button CSS.

[afercia]

Fixes #14474.

This PR seeks to solve a Firefox / NVDA bug where changes to the Settings button aria-expanded state are not announced because of the CSS pseudo-element used for styling. For more details, please see the related issue #14474.

I've opted to just remove the CSS pseudo element and re-implement the styling by other means.

Worth nothing the .is-toggled:hover state didn't work as intended, not even on master. I had to use !important to override a pile of :not() selectors used in the icon-button. Adding one more :not() there didn't seem to me the best option.

The CSS should replicate the current styling. Do feel free to change it if desired, but please don't use a CSS pseudo-element 🙂

/Cc @jasmussen

Screenshot (for comparison, see the GIF on the issue):

[jasmussen]

Nice.

Tab, hover, focus, look good.

There's a small subtle change with the selected state that we should fix. The radius is off, and there's some shimminess around the corners. I've zoomed in these so it's visible.

Before:

After:

Two ways to fix this.

1. Remove the inset box shadow you added, and add padding: 7px to the toggled button instead. This keeps it 34px, which makes it more closely match the preview/publish buttons heights, which is why we initially made the toggled button 34px tall.

2. Remove the inset box shadow you added, and accept that it is now 36px like the other icon buttons in the menu. We might want to compensate by making the preview and publish buttons taller, to match.

To accomlpish 2, you'd need to find the spot in the code that compiles into this:

.edit-post-header .components-button.editor-post-save-draft, .edit-post-header .components-button.editor-post-switch-to-draft, .edit-post-header .components-button.editor-post-preview, .edit-post-header .components-button.editor-post-publish-button, .edit-post-header .components-button.editor-post-publish-panel__toggle {
    margin: 2px;
    height: 33px;
    line-height: 32px;
    font-size: 13px;
}

And change the height to 36, and line-height to 35. That would make it look like this:

But that's sort of a big change. Since we mean to revisit buttons and their focus states across WordPress, perhaps it's best to go with option 1 for now?

[afercia]

Curious that a solid box-shadow doesn't fully cover the background. Yep I'd go with padding: 7px and margin 1px.

[afercia]

Done.

[jasmussen]

A bit busy today so can't review, but putting it in a milestone because the changes look good at a code glance.

[kjellr]

Thanks, @afercia! These changes look good. It's unfortunate to have to use an !important override all those button :not()'s, but I think it's more or less fine to do it in this specific case.

I noticed that the height of this button — and all the other toolbar buttons — are different from the height of the text buttons, but seems like that's always been the case, so we can think about that separately: