Identify selected buttons (.active in button groups) in Windows High Contrast Mode

[sabernhardt]

Buttons within groups do not distinguish which buttons are selected in Windows High Contrast Mode.

This includes:

• custom options in Permalink Settings
• alignment options in the Image details dialog (when replacing an image within a post in classic editor)

Adds a transparent pseudo-element on active buttons. In Windows High Contrast mode, this shows a thin border on three sides and a thicker border on the bottom.

Using a pseudo-element reduces the chance of confusion with the focus outline, and it does not change the border (and button height) for other users.

Trac 65153

## Screenshots

Screenshots using:

• Windows 11
• Aquatic contrast theme plus Dark mode
• Chrome 147.0.7727.102

### Permalinks options, showing focus outline on selected post name button

Before

With patch (this also shows hover style on post_id button)

### Alignment options

The 'None' button is selected.

#### Selected None button has focus outline

Before

With patch

#### Unselected Left button has focus outline

Before

With patch

## Use of AI Tools

none

[sabernhardt]

Before patch: alignment options in the Image details dialog do not show that 'None' is selected

What are your thoughts on applying a 3px border to all four sides, rather than just the bottom?

What are your thoughts on applying a 3px border to all four sides, rather than just the bottom?

That could be better. I also considered a border only on the bottom.

The ​hover state is the same as the default state:

Thanks for the suggestion.Personally, I believe the third approach is the best. I find it particularly intuitive compared to the other two, especially when the active button is in focus. The focus color does not conflict with the button's default outline.

[manhar]

Agreed with @wildworks — the third approach feels the most natural. Tested it in Windows High Contrast Mode and the active button state is clearly distinguishable without conflicting with the focus outline. The teal border works well for indicating the selected state.

[joedolson]

I have some preference for using the first approach, since it would meet WCAG 2.4.13, but it's not required, so I'm willing to bend on that.

[joedolson]

In 62467:

Administration: Fix button active states in high contrast mode.

Adds CSS to distinguish button selected or active states in Windows High Contrast Mode.

Props sabernhardt, wildworks, manhar, joedolson.
Fixes #65153.

[joedolson]

Reopening for backport to 7.0 branch.

[wildworks]

The approach using pseudo-elements might not have been the best, as the pseudo-elements get overridden when the button with the dashicon changes to an active state.

<button  class="button-primary button dashicons dashicons-admin-generic active">Button</button>

/* Only visible in Windows High Contrast mode */
.wp-core-ui .button.active:before {
    content: "";
}


/* This CSS will be overridden. */
.dashicons-admin-generic:before {
    content: "\f111";
}

For example, activate the "Publoish setting" button in Customizer. The dashicon will disappear.

By the way, the issue reported here should have been occurring previously, so I don't think it needs to be backported to 7.0.1.

[wildworks]

Customizer: Style for an active Publish Settings button

[sabernhardt]

Switching the new pseudo-element from :before to :after could be a quick fix, at least for the Customizer Publish Settings button.

Or might you prefer another way to style the buttons, perhaps with the (forced-colors: active) media query?

[wildworks]

Replying to sabernhardt:

Switching the new pseudo-element from :before to :after could be a quick fix, at least for the Customizer Publish Settings button.

At its core, it should be safe as there shouldn't be any cases where the .active class and the ::after pseudo-element are used simultaneously. However, third-party developers might have implemented such a combination on their own.

.wp-core-ui .button.active.my-plugin::after {
    content: "Content";
}

Or might you prefer another way to style the buttons, perhaps with the (forced-colors: active) media query?

I'm concerned that the forced-colors media query is not being used at all in the core. Is there any particular reason for this?

[sabernhardt]

::after pseudo-element

Lowering the specificity to :where(.wp-core-ui .button.active)::after could decrease the chance of collision with plugins, but that still has the potential to break plugins' CSS.

I'm concerned that the forced-colors media query is not being used at all in the core. Is there any particular reason for this?

Limiting the scope to only high contrast mode seemed necessary. I did not like editing either the border or the outline of the button itself.

• Changing an .active button's border width affects its overall dimensions.
• Using outline for the selected state can lead to confusion with the focus outline.

I'll add another PR to consider a transparent outline with a negative offset, where the outline width increases on focus. It is not particularly intuitive, but it should be an improvement compared to previous releases.

• Reverts r62467 to remove pseudo-element.
• Adds a transparent outline to the .active buttons, with a negative outline offset.
• Increases the width of the outline for the focus state.

Trac 65153

Use of AI Tools: none

[joedolson]

In 62567:

Administration: Fix selected/active buttons in High Contrast Mode.

Follow up to [62467]. Replaces original fix, which turned out to be insufficient. Replaces pseudo-elements with more standard outlines, shifted in scale for visibility.

Props sabernhardt, wildworks, apermo, joedolson.
Fixes #65153.

Committed in r62567