Ticket #51870: 51870-commented.diff

src/wp-admin/css/common.css

@@ -279 +279 @@
 a:focus .plugin-icon,
 .wp-person a:focus .gravatar {
         color: #043959;
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
-                /* Only visible in Windows High Contrast mode */
-                outline: 1px solid transparent;
+        box-shadow: 0 0 0 2px #3582c4;
+        /* Only visible in Windows High Contrast mode */
+        outline: 2px solid transparent;
 }
 
 #adminmenu a:focus {
@@ -670 +668 @@
 
 .wrap .page-title-action:focus {
         border-color: #3582c4;
-        box-shadow: 0 0 0 1px #3582c4;
+        box-shadow: 0 0 0 2px #3582c4; // summed to the border this will look like a 3px outline
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;
 }
@@ -844 +842 @@
 }
 
 .tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 .key-labels label {
@@ -1461 +1457 @@
 
 .notice-dismiss:focus {
         outline: none;
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode?
 }
 
 .notice-success,
@@ -1764 +1758 @@
 }
 
 #screen-meta-links .show-settings:focus {
-        border-color: #4f94d4;
-        box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // summed to the border this will look like a 3px outline
+        /* Only visible in Windows High Contrast mode */
+        outline: 2px solid transparent;
 }
 
 #screen-meta-links .show-settings:active {
@@ -2103 +2098 @@
 .postbox .handle-order-higher,
 .postbox .handle-order-lower,
 .postbox .handlediv {
-        width: 36px;
-        height: 36px;
+        width: 1.62rem; // This is also decreasing the target size, not sure we should change it
+        height: 1.62rem; // This is also decreasing the target size, not sure we should change it
         margin: 0;
         padding: 0;
         border: 0;
@@ -3147 +3142 @@
 .postbox .handle-order-higher:focus,
 .postbox .handle-order-lower:focus,
 .postbox .handlediv:focus {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: inset 0 0 0 2px #3582c4;
+        border-radius: 50%; // This is also decreasing the shape, not sure we should change it
         /* Only visible in Windows High Contrast mode */
-        outline: 1px solid transparent;
+        outline: 2px solid transparent;
 }
 
 .postbox .handle-order-higher:focus .order-higher-indicator::before,
@@ -3253 +3247 @@
 }
 [role="treeitem"] .folder-label.focus {
         color: #043959;
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // maybe use inset otherwise the focus style is cut-off
                                   // misses outline for Windows High Contrast Mode
 }
 [role="treeitem"].hover,

src/wp-admin/css/customize-controls.css

@@ -1567 +1567 @@
 
 .customize-control-header .choice:focus {
         outline: none;
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 3px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 .customize-control-header .uploaded div:last-child > .choice {
@@ -2680 +2678 @@
 
 #available-widgets-filter .clear-results:focus,
 #available-menu-items-search .clear-results:focus {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 #available-menu-items-search .search-icon:after,

src/wp-admin/css/customize-nav-menus.css

@@ -271 +271 @@
 .customize-screen-options-toggle:focus,
 #customize-controls .customize-info .customize-help-toggle:focus {
         /* Only visible in Windows High Contrast mode */
-        outline: 1px solid transparent;
+        outline: 2px solid transparent;
 }
 
 .customize-screen-options-toggle:before {
@@ -864 +864 @@
 .menu-delete:focus,
 .menu-item-bar .item-delete:focus:before,
 #available-menu-items .item-add:focus:before {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 

src/wp-admin/css/edit.css

@@ -1293 +1293 @@
 }
 
 div.tabs-panel-active:focus {
-        box-shadow: inset 0 0 0 1px #4f94d4, inset 0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: inset 0 0 0 2px #3582c4;
         outline: 0 none; // misses outline for Windows High Contrast Mode
 }
 

src/wp-admin/css/forms.css

@@ -674 +674 @@
         border-color: #68de7c;
 }
 
+#pass1:focus {
+        box-shadow: 0 0 0 1px; // misses a color?
+}
+
 .pw-weak {
         display: none;
 }

src/wp-admin/css/install.css

@@ -26 +26 @@
 
 a:focus {
         color: #043959;
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 h1, h2 {

src/wp-admin/css/list-tables.css

@@ -261 +261 @@
 }
 
 th .comment-grey-bubble {
    // I see this change improves the size of the link within the table header
    // please comment on the ticket why this is changed and the position change, for history 
-        height: 16px; 
         width: 16px;
+        position: relative;
+        top: 2px;
 }

src/wp-admin/css/login.css

@@ -32 +32 @@
 
 a:focus {
         color: #043959;
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 p {

src/wp-admin/css/media.css

@@ -356 +356 @@
 }
 
 #find-posts-close:focus {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4;
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;
         outline-offset: -2px;
@@ -533 +531 @@
 .media-frame.mode-grid .attachment:focus,
 .media-frame.mode-grid .selected.attachment:focus,
 .media-frame.mode-grid .attachment.details:focus {
-        box-shadow:
-                inset 0 0 2px 3px #f0f0f1,
-                inset 0 0 0 7px #4f94d4;
+        box-shadow: inset 0 0 0 2px #3582c4;
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;
         outline-offset: -6px;

src/wp-admin/css/nav-menus.css

@@ -732 +732 @@
 }
 
 .nav-menus-php .item-edit:focus:before {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 /* Menu editing */

src/wp-admin/css/themes.css

@@ -176 +176 @@
 }
 
 .theme-browser .theme .more-details:focus {
    // this should not be changed, the white and dark grey box-shadows 
    // are meant to make focus style visible on dark and light theme previews
    // misses outline for Windows High Contrast Mode
-        box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
+        box-shadow: 0 0 0 2px #3582c4; 
 }
 
 .theme-browser .theme.focus {
-        border-color: #4f94d4;
-        box-shadow: 0 0 2px rgba(79, 148, 212, 0.8);
+        border-color: #3582c4;
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode

src/wp-admin/css/widgets.css

@@ -336 +336 @@
 }
 
 .sidebar-name .handlediv:focus .toggle-indicator:before {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 .sidebar-name h2,

src/wp-includes/css/buttons.css

@@ -210 +210 @@
 
 .wp-core-ui .button-link:focus {
         color: #043959;
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4;
         /* Only visible in Windows High Contrast mode */
-        outline: 1px solid transparent;
+        outline: 2px solid transparent;
 }
 
 .wp-core-ui .button-link-delete {

src/wp-includes/css/editor.css

@@ -87 +87 @@
 
 .mce-window-head .mce-close:focus .mce-i-remove,
 div.mce-tab:focus {
-        box-shadow: 0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 .mce-window .mce-window-head .mce-dragh {
@@ -635 +634 @@
 
 .mce-menubar .mce-menubtn:focus {
         color: #043959;
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
 }
 
 div.mce-menu .mce-menu-item-sep,
@@ -1131 +1128 @@
 }
 
 .wp-switch-editor:focus {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4;
         outline: none; // misses outline for Windows High Contrast Mode
         color: #1d2327;
 }
@@ -1446 +1441 @@
 
 #wp-link-close:focus {
         outline: none; // this should be removed because outline is redeclared below
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4;
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;
         outline-offset: -2px;

src/wp-includes/css/jquery-ui-dialog.css

@@ -312 +312 @@
 }
 
 .ui-button.ui-dialog-titlebar-close:focus {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4;
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;
         outline-offset: -2px;

src/wp-includes/css/media-views.css

@@ -45 +45 @@
 }
 
 .media-frame a:focus {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4;
         color: #043959;
         /* Only visible in Windows High Contrast mode */
-        outline: 1px solid transparent;
+        outline: 2px solid transparent;
 }
 
 .media-frame a.button {
@@ -649 +647 @@
 }
 
 .media-menu .media-menu-item:focus {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4;
         color: #043959;
         /* Only visible in Windows High Contrast mode */
-        outline: 1px solid transparent;
+        outline: 2px solid transparent;
 }
 
 .media-menu .separator {
@@ -704 +700 @@
 }
 
 .media-router .media-menu-item:focus {
-        box-shadow:
-                0 0 0 1px #4f94d4,
-                0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4;
         color: #043959;
         /* Only visible in Windows High Contrast mode */
-        outline: 1px solid transparent;
+        outline: 2px solid transparent;
 }
 
 .media-router .active,
@@ -2017 +2011 @@
 
 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
         color: #2271b1;
-        border-color: #4f94d4;
-        box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+        border-color: #3582c4;
+        box-shadow: 0 0 0 2px #3582c4; // summed to the border this will look like a 3px outline
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;
 }
@@ -2134 +2128 @@
 }
 
 .mejs-container:focus {
-        outline: 1px solid #4f94d4;
-        box-shadow: 0 0 2px 1px rgba(79, 148, 212, 0.8);
+        outline: 1px solid #3582c4;
+        box-shadow: 0 0 0 2px #3582c4;
 }
 
 .image-details .media-modal {

src/wp-includes/css/wp-embed-template.css

@@ -216 +216 @@
 
 .wp-embed-share-dialog-open:focus .dashicons,
 .wp-embed-share-dialog-close:focus .dashicons {
-        box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8);
+        box-shadow: 0 0 0 2px #3582c4; // misses outline for Windows High Contrast Mode
         border-radius: 100%;
 }