fix: add focus styles for radio and checkbox buttons

Financial-Times · Oct 23, 2024 · c59bf40 · c59bf40
1 parent b500d2a
commit c59bf40
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/components/o3-form/src/css/components/checkbox.css b/components/o3-form/src/css/components/checkbox.css
@@ -106,6 +106,23 @@
 	&.o3-form-input-error:indeterminate + label::after {
 		background-color: var(--o3-color-use-case-error);
 	}
+
+	&:focus + label::before {
+		box-shadow: var(--o3-focus-use-case-ring-inner),
+			var(--03-focus-use-case-ring-outer);
+		outline: 3px solid transparent; /* For Windows high contrast mode. */
+	}
+
+	@supports selector(:focus-visible) {
+		&:focus + label::before {
+			box-shadow: unset;
+		}
+		&:focus-visible + label::before {
+			box-shadow: var(--o3-focus-use-case-ring-inner),
+				var(--o3-focus-use-case-ring-outer);
+			outline: 3px solid transparent; /* For Windows high contrast mode. */
+		}
+	}
 }
 
 .o3-form-input-checkbox__label {
@@ -115,9 +132,4 @@
 	line-height: var(--o3-typography-use-case-body-small-line-height);
 	font-weight: var(--o3-typography-use-case-body-small-font-weight);
 	color: var(--o3-color-use-case-body-text);
-
-	&:focus-visible {
-		padding: var(--o3-spacing-5xs);
-		margin: calc(-1 * var(--o3-spacing-5xs)) 0 calc(-1 * var(--o3-spacing-5xs)) calc(-1 * var(--o3-spacing-5xs));
-	}
 }
diff --git a/components/o3-form/src/css/components/radio-button.css b/components/o3-form/src/css/components/radio-button.css
@@ -74,6 +74,21 @@
 	&.o3-form-input-error:checked + label::after {
 		background-color: var(--o3-color-use-case-error);
 	}
+
+	&:focus + label::before {
+		box-shadow: var(--o3-focus-use-case-ring-inner), var(--03-focus-use-case-ring-outer);
+		outline: 3px solid transparent; /* For Windows high contrast mode. */
+	}
+
+	@supports selector(:focus-visible) {
+		&:focus + label::before {
+			box-shadow: unset;
+		}
+		&:focus-visible + label::before {
+			box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
+			outline: 3px solid transparent; /* For Windows high contrast mode. */
+		}
+	}
 }
 
 .o3-form-input-radio-button__label {