From 551affde1d01eaa39a677750fb2ef99f447dd39b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 24 Jul 2017 16:34:55 +0200
Subject: [PATCH 1/2] Add focus style to the switch toggle controls, first
 pass.

---
 components/form-toggle/index.js   |  1 +
 components/form-toggle/style.scss | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/form-toggle/index.js b/components/form-toggle/index.js
index c9325205c5449e..db8643b2f8ca2c 100644
--- a/components/form-toggle/index.js
+++ b/components/form-toggle/index.js
@@ -35,6 +35,7 @@ function FormToggle( { className, checked, id, onChange = noop, showHint = true
 					{ checked ? __( 'On' ) : __( 'Off' ) }
 				</span>
 			}
+			<span className="components-form-toggle__thumb"></span>
 		</span>
 	);
 }
diff --git a/components/form-toggle/style.scss b/components/form-toggle/style.scss
index 3b5eddd0cbe216..cc6c9f81d09a30 100644
--- a/components/form-toggle/style.scss
+++ b/components/form-toggle/style.scss
@@ -32,8 +32,7 @@ $toggle-border-width: 2px;
 		}
 	}
 
-	&:after {
-		content: '';
+	&__thumb {
 		display: block;
 		position: absolute;
 		top: $toggle-border-width * 2;
@@ -41,16 +40,26 @@ $toggle-border-width: 2px;
 		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 + &__thumb {
+		background: $dark-gray-500;
+	}
+
 	&.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 ) ) );
 		}
 
+		.components-form-toggle__input:focus + .components-form-toggle__thumb {
+			background-color: $white;
+		}
+
 		&:before {
 			background-color: $blue-medium-500;
 			border: $toggle-border-width solid $blue-medium-500;

From 289e068c278ea1909911bfb28be73e296efc7815 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 25 Jul 2017 15:52:21 +0200
Subject: [PATCH 2/2] Better focus style for the switch toggle controls.

---
 components/form-toggle/index.js   |  3 ++-
 components/form-toggle/style.scss | 33 ++++++++++++++-----------------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/components/form-toggle/index.js b/components/form-toggle/index.js
index db8643b2f8ca2c..1ec8086c7e1dbb 100644
--- a/components/form-toggle/index.js
+++ b/components/form-toggle/index.js
@@ -30,12 +30,13 @@ 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' ) }
 				</span>
 			}
-			<span className="components-form-toggle__thumb"></span>
 		</span>
 	);
 }
diff --git a/components/form-toggle/style.scss b/components/form-toggle/style.scss
index cc6c9f81d09a30..c0284a6d4a8326 100644
--- 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,23 +16,18 @@ $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;
 	}
 
-	&__thumb {
+	.components-form-toggle__thumb {
 		display: block;
 		position: absolute;
 		top: $toggle-border-width * 2;
@@ -45,8 +40,14 @@ $toggle-border-width: 2px;
 		transition: 0.1s transform ease;
 	}
 
-	&__input:focus + &__thumb {
-		background: $dark-gray-500;
+	&__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 {
@@ -56,10 +57,6 @@ $toggle-border-width: 2px;
 			transform: translateX( $toggle-width - ( $toggle-border-width * 4 ) - ( $toggle-height - ( $toggle-border-width * 4 ) ) );
 		}
 
-		.components-form-toggle__input:focus + .components-form-toggle__thumb {
-			background-color: $white;
-		}
-
 		&:before {
 			background-color: $blue-medium-500;
 			border: $toggle-border-width solid $blue-medium-500;