diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss index cd8bef2a02c76..2dccb17998f5b 100644 --- a/src/wp-admin/css/colors/_mixins.scss +++ b/src/wp-admin/css/colors/_mixins.scss @@ -26,7 +26,7 @@ 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px tokens.$white; /* Visible in Windows High Contrast mode */ - outline: 1px solid transparent; + outline: 2px solid transparent; } &:active { @@ -74,7 +74,8 @@ border-color: var(--wp-admin-theme-color); color: var(--wp-admin-theme-color); box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); - outline: 1px solid transparent; + /* Visible in Windows High Contrast mode */ + outline: 2px solid transparent; } &:active { @@ -113,7 +114,8 @@ border-color: var(--wp-admin-theme-color); color: tokens.$gray-900; box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); - outline: 1px solid transparent; + /* Visible in Windows High Contrast mode */ + outline: 2px solid transparent; } &:active { diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 8824a31bb8cad..608fe0f75a05d 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2947,7 +2947,8 @@ div.action-links { #plugin-information-tabs a:active, #plugin-information-tabs a:focus { - outline: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } #plugin-information-content { diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 2ace16f733004..90d8cf6e63cab 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -359,6 +359,8 @@ input[type="radio"].disabled:checked::before { border-color: var(--wp-admin-theme-color); color: #1e1e1e; box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .wp-core-ui select:active { @@ -379,15 +381,14 @@ input[type="radio"].disabled:checked::before { transform: none; } -.wp-core-ui select[aria-disabled="true"] { - cursor: default; +@media all and (forced-colors: active) and (prefers-color-scheme: dark) { + .wp-core-ui select { + background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E); + } } -/* Reset Firefox inner outline that appears on :focus. */ -/* This ruleset overrides the color change on :focus thus needs to be after select:focus. */ -.wp-core-ui select:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #0a4b78; +.wp-core-ui select[aria-disabled="true"] { + cursor: default; } /* Remove background focus style from IE11 while keeping focus style available on option elements. */ diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index a04dca590aacd..2c59593f4392b 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -502,7 +502,8 @@ body.js .theme-browser.search-loading { .theme-overlay .theme-header .right:focus, .theme-overlay .theme-header .left:focus { box-shadow: none; - outline: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .theme-overlay .theme-header .left.disabled, diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index c609cc9832e7f..eab5e89c3a996 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -683,6 +683,8 @@ html:lang(he-il) .rtl #wpadminbar * { background-color: rgba(255, 255, 255, 0.9); cursor: text; border: 0; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } #wpadminbar #adminbarsearch .adminbar-button {