a11y: Apply focus style to revision items

WordPress · Dec 14, 2023 · 7758fdf · 7758fdf
1 parent 2fb3c57
commit 7758fdf
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -13,8 +13,6 @@
 
 .edit-site-global-styles-screen-revisions__revision-item {
 	position: relative;
-	padding-left: $grid-unit-20;
-	overflow: hidden;
 	cursor: pointer;
 
 	&:hover {
@@ -40,9 +38,20 @@
 		left: $grid-unit-20 + 1; // So the circle is centered on the line.
 		transform: translate(-50%, -50%);
 		z-index: 1;
+
+		// This border serves as a background color in Windows High Contrast mode.
+		border: 4px solid transparent;
 	}
-	&.is-selected::before {
-		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	&.is-selected {
+		border-radius: $radius-block-ui;
+
+		// Only visible in Windows High Contrast mode.
+		outline: 3px solid transparent;
+		outline-offset: -2px;
+
+		&::before {
+			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		}
 	}
 
 	&::after {
@@ -66,12 +75,10 @@
 		width: 100%;
 		height: auto;
 		display: block;
-		padding: $grid-unit-15 $grid-unit-15 $grid-unit-10 $grid-unit-30;
-		&:focus,
-		&:active {
-			outline: 0;
-			box-shadow: none;
-		}
+		padding: $grid-unit-15 $grid-unit-15 $grid-unit-10 $grid-unit-50;
+		z-index: 1;
+		position: relative;
+		outline-offset: -2px;
 	}
 }