disclosure examples: Support high contrast for graphics in Codepen by using current color in SVTG in CSS content (pull#1648)

spectranaut · mcking65 · web-flow · commit 5d2e58c59726 · 2020-12-22T16:38:11.000-08:00
Co-authored-by: Matt King &lt;a11yThinker@Gmail.com&gt;
diff --git a/examples/disclosure/css/disclosure-faq.css b/examples/disclosure/css/disclosure-faq.css
@@ -41,11 +41,11 @@ dl.faq button:active {
 }
 
 dl.faq button[aria-expanded="false"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill=' %23034575' stroke= '%23034575' /%3E%3C/svg%3E%0A");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
   padding-right: 0.35em;
 }
 
 dl.faq button[aria-expanded="true"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='%23034575' stroke= '%23034575' /%3E%3C/svg%3E ");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
   padding-right: 0.35em;
 }
diff --git a/examples/disclosure/css/disclosure-img-long-description.css b/examples/disclosure/css/disclosure-img-long-description.css
@@ -29,12 +29,12 @@ figure button:active {
 }
 
 figure button[aria-expanded="false"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill=' %23034575' stroke= '%23034575' /%3E%3C/svg%3E%0A");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
   padding-right: 0.25em;
 }
 
 figure button[aria-expanded="true"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='%23034575' stroke= '%23034575' /%3E%3C/svg%3E ");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
   padding-right: 0.25em;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -41,11 +41,11 @@ dl.faq button:active {`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`dl.faq button[aria-expanded="false"]::before {`
`44`		`- content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill=' %23034575' stroke= '%23034575' /%3E%3C/svg%3E%0A");`
	`44`	`+ content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");`
`45`	`45`	`padding-right: 0.35em;`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`dl.faq button[aria-expanded="true"]::before {`
`49`		`- content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='%23034575' stroke= '%23034575' /%3E%3C/svg%3E ");`
	`49`	`+ content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");`
`50`	`50`	`padding-right: 0.35em;`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,12 +29,12 @@ figure button:active {`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`figure button[aria-expanded="false"]::before {`
`32`		`- content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill=' %23034575' stroke= '%23034575' /%3E%3C/svg%3E%0A");`
	`32`	`+ content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");`
`33`	`33`	`padding-right: 0.25em;`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`figure button[aria-expanded="true"]::before {`
`37`		`- content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='%23034575' stroke= '%23034575' /%3E%3C/svg%3E ");`
	`37`	`+ content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");`
`38`	`38`	`padding-right: 0.25em;`
`39`	`39`	`}`
`40`	`40`