[css-color-4][css-color-5] Make color swatches open via the keyboard as well, closes #7687

Author: LeaVerou

css-color-4/Overview.bs

@@ -133,13 +133,15 @@ div.example>a.self-link::before {
 
 <script>
 document.addEventListener("DOMContentLoaded", ()=>{
-	[...document.querySelectorAll(".swatch")].forEach(e=>{
+	for (let e of document.querySelectorAll(".swatch")) {
+		e.tabIndex = "0";
 		const swatchColor = getComputedStyle(e).getPropertyValue("--color");
-		if(!CSS.supports('color', swatchColor)) {
+
+		if (!CSS.supports('color', swatchColor)) {
 			e.style.background = "repeating-linear-gradient(135deg, red 0, red 4px, white 4px, white 8px)";
 			e.setAttribute("title", "Your browser does not recognize this color value, so we can't preview it.");
 		}
-	});
+	}
 });
 </script>
 
@@ -3458,7 +3460,7 @@ Specifying Predefined Colors: the ''color()'' function</h3>
 	These are not invalid and are retained for intermediate computations;
 	instead, for display, they are
 	<a>css gamut mapped</a> using a relative colorimetric intent
-	which brings the values 
+	which brings the values
 	(in the display color space)
 	within the range 0/0% to 1/100%
 	at actual-value time.
@@ -4390,15 +4392,15 @@ Color Space for Interpolation</h3>
 <h3 id="interpolation-missing">
 Interpolating with Missing Components</h3>
 
-	In the course of converting the two colors 
+	In the course of converting the two colors
 	to the [=interpolation color space=],
 	any [=missing components=]
 	will be replaced with the value 0.
 
 	Thus, the first stage in interpolating two colors
 	is to classify any [=missing components=]
 	in the input colors,
-	and compare them to the components of the 
+	and compare them to the components of the
 	[=interpolation color space=].
 	If any analogous [=missing components=] are found,
 	they will be <strong>carried forward</strong>

css-color-4/style.css

@@ -14,10 +14,12 @@
 	border: 2px solid red;
 }
 
-.swatch:hover {
+.swatch:hover,
+.swatch:focus {
 	transform: scale(3);
 	border-radius: 2px;
 	transition: .4s;
+	z-index: 2;
 }
 
 table.gamuts tr>td {

css-color-5/Overview.bs

@@ -51,6 +51,20 @@ spec:css-color-4; type:value; text:srgb
 	}
 </style>
 
+<script>
+document.addEventListener("DOMContentLoaded", ()=>{
+	for (let e of document.querySelectorAll(".swatch")) {
+		e.tabIndex = "0";
+		const swatchColor = getComputedStyle(e).getPropertyValue("--color");
+
+		if (!CSS.supports('color', swatchColor)) {
+			e.style.background = "repeating-linear-gradient(135deg, red 0, red 4px, white 4px, white 8px)";
+			e.setAttribute("title", "Your browser does not recognize this color value, so we can't preview it.");
+		}
+	}
+});
+</script>
+
 Introduction {#intro}
 =====================
 
@@ -238,10 +252,10 @@ and a percentage of 100% returns the same color converted to the specified color
 
 	<figure id="fig-LCH-peru-goldenrod">
 		<object data="images/CH-mixing.svg"  width=480 height=480>
-			<p>A mixture of two colours, and the mixed output. 
-				We are looking down the CIE L axis onto the ab plane. 
-				There are two axes, labelled <em>a</em> and <em>b</em> 
-				which cross at the origin, 
+			<p>A mixture of two colours, and the mixed output.
+				We are looking down the CIE L axis onto the ab plane.
+				There are two axes, labelled <em>a</em> and <em>b</em>
+				which cross at the origin,
 				which is in the centre of the plot.</p>
 		</object>
 		<figcaption>Mixtures of peru and palegoldenrod in CIE LCH.
@@ -280,10 +294,10 @@ and a percentage of 100% returns the same color converted to the specified color
 
 	<figure id="fig-LCH-teal-olive">
 		<object data="images/CH-mixing3.svg"  width=500 height=500>
-			<p>A mixture of two colours, and the mixed output. 
-				We are looking down the CIE L axis onto the ab plane. 
-				There are two axes, labelled <em>a</em> and <em>b</em> 
-				which cross at the origin, 
+			<p>A mixture of two colours, and the mixed output.
+				We are looking down the CIE L axis onto the ab plane.
+				There are two axes, labelled <em>a</em> and <em>b</em>
+				which cross at the origin,
 				which is in the centre of the plot.
 			</p>
 		</object>

css-color-5/style.css

@@ -27,10 +27,12 @@
 	font: bold .3em/1.2 sans-serif;
 }
 
-.swatch:hover {
+.swatch:hover,
+.swatch:focus {
 	transform: scale(3);
 	border-radius: 2px;
 	transition: .4s;
+	z-index: 2;
 }
 
 table.gamuts tr:hover {