From c0f87a212b0ad25c18ac5bf8c2e9b1cb780f1a14 Mon Sep 17 00:00:00 2001
From: Chris Van Patten <hello@chrisvanpatten.com>
Date: Mon, 15 Oct 2018 16:23:32 -0400
Subject: [PATCH] Enforce text color on inline boundaries to ensure contrast
 (#10623)

* Enforce text color on inline boundaries to ensure contrast. Fixes #9508

* Darker blue link for WCAG AA contrast
---
 .../src/components/rich-text/style.scss       | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/components/rich-text/style.scss b/packages/editor/src/components/rich-text/style.scss
index 91adef2a785bb..d474ac3af4211 100644
--- a/packages/editor/src/components/rich-text/style.scss
+++ b/packages/editor/src/components/rich-text/style.scss
@@ -25,14 +25,6 @@
 		color: $blue-medium-700;
 	}
 
-	&:focus a[data-mce-selected] {
-		padding: 0 2px;
-		margin: 0 -2px;
-		border-radius: 2px;
-		box-shadow: 0 0 0 1px $blue-medium-100;
-		background: $blue-medium-100;
-	}
-
 	code {
 		padding: 2px;
 		border-radius: 2px;
@@ -46,11 +38,9 @@
 		}
 	}
 
-	&:focus code[data-mce-selected] {
-		background: $light-gray-400;
-	}
-
+	// Style TinyMCE inline boundaries on select inline text elements.
 	&:focus {
+		a,
 		b,
 		i,
 		strong,
@@ -65,8 +55,27 @@
 				border-radius: 2px;
 				box-shadow: 0 0 0 1px $light-gray-400;
 				background: $light-gray-400;
+
+				// Enforce a dark text color so active inline boundaries
+				// are always readable.
+				// See https://github.com/WordPress/gutenberg/issues/9508
+				color: $dark-gray-900;
 			}
 		}
+
+		// Link inline boundaries get special colors.
+		a[data-mce-selected] {
+			box-shadow: 0 0 0 1px $blue-medium-100;
+			background: $blue-medium-100;
+			color: $blue-medium-900;
+		}
+
+		// <code> inline boundaries need special treatment because their
+		// un-selected style is already padded.
+		code[data-mce-selected] {
+			background: $light-gray-400;
+			box-shadow: 0 0 0 1px $light-gray-400;
+		}
 	}
 
 	img {