Forced-colors problems with admin theme's sidebar toggle button

IMO the normal-state color for the icon in forced-colors (when not hovered / focused) should also be corrected here.

Currently, the color is semantically incorrect. It should have the same color as other buttons so that it can be quickly identified as a button.

The change for this is could should be in the same area of CSS that controls the hover / focus color, and it can be easily tested while testing the hover / focus states.

Here's a screenshot of the node edit form in Edge page colors (Night Sky option). The toggle button is white, but should be yellow.

From a quick test in devtools, I think the fix is to use ButtonText for the forced-colors background color.

@mherchel could you clarify on @kentr's point in #3 about the ButtonText

It makes sense to me, but I'm not sure if this is what you're agreeing with. Sometimes when issues are this close together it could well be a caching issue.

Tested this issue and learned something new (the manipulation in the rendering tab of Console dev).

Before:

After:

So looks good!

In #3, I was referring to the normal state (default state, when not hovered / focused).

Though, using ButtonText for the hover / focus states is probably the right move.

In my testing of the MR, the button doesn't match the others in its normal state.

@mgifford, do you agree that in the default state, the color of the button in forced-colors should match the color of other (normal) buttons in forced-colors?

I don't care if it's done here or in #3619154: Accessibility fixes for Admin theme's toggle control, but IMO it's important (edit: not minor, like the rest of #3619154: Accessibility fixes for Admin theme's toggle control). I thought it would be easier to change and test here along with the hover / focus.

The screenshot in #3 disappeared. Uploading it again here, with an "after" screenshot using the same Edge Page Colors settings.

Before (in normal / default state, per #3):

After (in normal / default state, per #3):

Will restore the screenshot in #3.

Note:

IME, using forced-colors emulation in devtools doesn't give the full picture because some system colors don't show themselves.

The screenshots in #8 appear to corroborate that. To me, the buttons look the same color (black) as text and arbitrary borders.

You can really see this by comparing the CSS Color Module page in devtools emulation versus Edge page colors.

Pretty sure it goes by role, not by element type.

The role of that input shows as "button" in the accessibility tab in Edge:

The ButtonText system-color is yellow on the CSS color module page:

The yellow ckeditor buttons in the previous screenshot are button elements.

It's the same with the the Expand sidebar button, and the button element example on MDN.

Expand sidebar button:

Button element example on MDN, with all styles removed from the demo:

With the MR, the hover / focus states (which use ButtonText) are yellow.

Hover state:

When I inspect that element (the ::before element) in devtools, the background color in the normal state is var(--admin-color-icon) even in forced-colors mode. It should be ButtonText.

The patch currently uses: background: buttonText; which seems like the best practice from:
https://polypane.app/blog/forced-colors-explained-a-practical-guide/

Differentiating semantically between buttons and links is good, and the use of LinkText can do that, but these are buttons.

Now possibly we should be using ButtonFace or ButtonBorder

    @media (forced-colors: active) {
      &::before {
        background: ButtonFace;
      }
    }

Some other links.

• https://horizon.servicenow.com/guidelines/accessibility/forced-colors
• https://accessibility.huit.harvard.edu/news/2026/05/deep-dive-contrast-t...
• https://www.htmhell.dev/adventcalendar/2024/5/

This is all still quite new:
https://drafts.csswg.org/css-color/#css-system-colors

Whether it is buttonText or buttonFace (or even if it were linkText) in many ways doesn't matter in terms of the barrier associated with this. It is visible in forced colors mode from what I've been able to tell.

So with this patch, the button isn't disappearing. But I think it should be a button not a link with the role button.

@mgifford, changing it to a button instead of a link with role="button" is part of #3619154: Accessibility fixes for Admin theme's toggle control.

@mherchel, thanks for testing so thoroughly!

@mgifford's "Toggle-with-patch" video in #17 shows that the toggle button isn't ButtonText in its default state (it is ButtonText when the button is focused at ~00:01).

If the the toggle button was ButtonText, it would be yellow in the video because Edge Page Colors with the Night Sky theme maps ButtonText to yellow.

This distinct semantic coloring of buttons isn't visible with devtools forced-colors emulation, except by inspecting the element's styles. In the inspector, it can be seen in the computed background color of the ::before psuedo-element.

I had also done testing to be 1000% certain; I modified the MR locally as part of that.

@mgifford and I discussed in Slack, and he said he'd like it fixed here instead of another issue (it was formerly part of #3619154: Accessibility fixes for Admin theme's toggle control).

So, I updated the MR with my test code to shortcut past more back and forth. Feel free to tweak it.

Here are before / after screenshots with the MR as it was and with the addition. I added the vanilla button to the DOM (<button>This is my button</button>) to show that it's also yellow.

Before:

After:

Since I can't review this now...

@mgifford, do you want to review the MR again in MS Edge Page Colors Night Sky theme? If not, maybe @f0ns can.

Sorry I can't retest this, I don't run MS Edge unless there is another way.

This is great. Thanks for updating the patch @KentR and catching the visual difference in how the toggle is displayed.

@f0ns I love Edge in that it is at least one possible filter from Google knowing everything about me (while still using Chrome). Also some great accessibility enhancements like the voice in Reader Mode. That said, you can always check out:
https://cssence.com/2024/forced-colors-mode-strategies/

For Chrome and FF instructions.

Committed/pushed to main and 11.x, thanks!