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