Browse Source

Docs: Resolved a11y contrast issues in the 'Chat with mentions' example.

Aleksander Nowodzinski 6 years ago
parent
commit
c8d5cdd318

+ 6 - 2
packages/ckeditor5-mention/docs/_snippets/examples/chat-with-mentions.html

@@ -134,12 +134,16 @@
 		margin-left: .5em;
 	}
 
-	.ck-mentions .mention__item.ck-on .mention__item__user-name {
+	.ck-mentions .mention__item.ck-on span {
 		color: var(--ck-color-base-background);
 	}
 
 	.ck-mentions .mention__item .mention__item__full-name {
-		color: hsl(0, 0%, 67%);
+		color: hsl(0, 0%, 45%);
+	}
+
+	.ck-mentions .mention__item:hover .mention__item__full-name {
+		color: hsl(0, 0%, 40%);
 	}
 
 	/* ---- Chat editor content styles ----------------------------------------------------------- */

+ 6 - 2
packages/ckeditor5-mention/docs/examples/chat-with-mentions.md

@@ -156,12 +156,16 @@ The HTML code of the application is listed below:
 		margin-left: .5em;
 	}
 
-	.ck-mentions .mention__item.ck-on .mention__item__user-name {
+	.ck-mentions .mention__item.ck-on span {
 		color: var(--ck-color-base-background);
 	}
 
 	.ck-mentions .mention__item .mention__item__full-name {
-		color: hsl(0, 0%, 67%);
+		color: hsl(0, 0%, 45%);
+	}
+
+	.ck-mentions .mention__item:hover .mention__item__full-name {
+		color: hsl(0, 0%, 40%);
 	}
 
 	/* ---- Chat editor content styles ----------------------------------------------------------- */