Merge pull request #1988 from WordPress/update/switch-toggle-focus-style

Add focus style to the switch toggle controls
WordPress · Jul 25, 2017 · 1c7aaf8 · 1c7aaf8
2 parents b935bbf + 289e068
commit 1c7aaf8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/components/form-toggle/index.js b/components/form-toggle/index.js
@@ -30,6 +30,8 @@ function FormToggle( { className, checked, id, onChange = noop, showHint = true
 				checked={ checked }
 				onChange={ onChange }
 			/>
+			<span className="components-form-toggle__track"></span>
+			<span className="components-form-toggle__thumb"></span>
 			{ showHint &&
 				<span className="components-form-toggle__hint" aria-hidden>
 					{ checked ? __( 'On' ) : __( 'Off' ) }

diff --git a/components/form-toggle/style.scss b/components/form-toggle/style.scss
@@ -5,7 +5,7 @@ $toggle-border-width: 2px;
 .components-form-toggle {
 	position: relative;
 
-	&:before {
+	.components-form-toggle__track {
 		content: '';
 		display: inline-block;
 		vertical-align: top;
@@ -16,38 +16,44 @@ $toggle-border-width: 2px;
 		height: $toggle-height;
 		border-radius: $toggle-height / 2;
 		transition: 0.2s background ease;
-
-		.components-form-toggle.is-checked & {
-			background-color: $blue-medium-400;
-			border: $toggle-border-width solid $blue-medium-400;
-		}
 	}
 
-	&:hover:before {
+	&:hover .components-form-toggle__track {
 		background-color: $light-gray-500;
+	}
 
-		.components-form-toggle.is-checked & {
-			background-color: $blue-medium-500;
-			border: $toggle-border-width solid $blue-medium-500;
-		}
+	&.is-checked .components-form-toggle__track {
+		background-color: $blue-medium-400;
+		border: $toggle-border-width solid $blue-medium-400;
 	}
 
-	&:after {
-		content: '';
+	.components-form-toggle__thumb {
 		display: block;
 		position: absolute;
 		top: $toggle-border-width * 2;
 		left: $toggle-border-width * 2;
 		width: $toggle-height - ( $toggle-border-width * 4 );
 		height: $toggle-height - ( $toggle-border-width * 4 );
 		border-radius: 50%;
-		background: $dark-gray-500;
+		border: 2px solid $dark-gray-500;
+		background: $white;
 		transition: 0.1s transform ease;
 	}
 
+	&__input:focus {
+		& + .components-form-toggle__track {
+			box-shadow: 0 0 0 1px $white, 0 0 0 2px $blue-medium-400, 0 0 2px 2px $blue-medium-400;
+
+			 & + .components-form-toggle__thumb {
+				 border-width: 5px;
+			 }
+		}
+	}
+
 	&.is-checked {
-		&:after {
-			background-color: $white;
+		.components-form-toggle__thumb {
+			border: 2px solid $white;
+			background-color: $blue-medium-500;
 			transform: translateX( $toggle-width - ( $toggle-border-width * 4 ) - ( $toggle-height - ( $toggle-border-width * 4 ) ) );
 		}