updated comparison tables

w3c · Feb 10, 2025 · 9b6a195 · 9b6a195
1 parent ecda398
commit 9b6a195
Showing 1 changed file with 50 additions and 12 deletions.
diff --git a/content/practices/color-settings/color-settings-practice.html b/content/practices/color-settings/color-settings-practice.html
@@ -918,20 +918,66 @@ <h4 id="compare-switch-examples">Comparing Switch Examples</h4>
 
 
        <table class="data">
-          <caption>Switch Examples using Current Color and Systems Colors</caption>
+          <caption>Switch Label</caption>
           <thead>
             <tr>
               <th rowspan="2">Example</th>
               <th colspan="2">Span</th>
-              <th colspan="2">SVG Rect</th>
-              <th colspan="2">SVG Circle Off</th>
-              <th colspan="2">SVG Circle On</th>
             </tr>
             <tr>
               <th>Background-Color</th>
               <th>Color</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>button[role="switch"]</code></td>
+              <td>Opacity 0</td>
+              <td>CurrentColor</td>
+            </tr>
+            <tr>
+              <td><code>div[role="switch"]</code></td>
+              <td>ButtonFace</td>
+              <td>ButtonText</td>
+            </tr>
+          </tbody>
+        </table>
+
+       <table class="data">
+          <caption>Focus Ring</caption>
+          <thead>
+            <tr>
+              <th rowspan="2">Example</th>
+              <th colspan="2">SVG Rect</th>
+            </tr>
+            <tr>
               <th>Stroke</th>
               <th>Fill</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>button[role="switch"]</code></td>
+              <td>Opacity 0</td>
+              <td>CurrentColor</td>
+            </tr>
+            <tr>
+              <td><code>div[role="switch"]</code></td>
+              <td>ButtonBorder</td>
+              <td>ButtonFace</td>
+            </tr>
+          </tbody>
+        </table>
+
+       <table class="data">
+          <caption>On/Off Switch Positions</caption>
+          <thead>
+            <tr>
+              <th rowspan="2">Example</th>
+              <th colspan="2">SVG Circle Off</th>
+              <th colspan="2">SVG Circle On</th>
+            </tr>
+            <tr>
               <th>Stroke</th>
               <th>Fill</th>
               <th>Stroke</th>
@@ -941,21 +987,13 @@ <h4 id="compare-switch-examples">Comparing Switch Examples</h4>
           <tbody>
             <tr>
               <td><code>button[role="switch"]</code></td>
-              <td>Opacity 0</td>
-              <td>CurrentColor</td>
-              <td>Opacity 0</td>
-              <td>CurrentColor</td>
               <td>CurrentColor</td>
               <td>CurrentColor</td>
               <td>CurrentColor</td>
               <td>CurrentColor</td>
             </tr>
             <tr>
               <td><code>div[role="switch"]</code></td>
-              <td>ButtonFace</td>
-              <td>ButtonText</td>
-              <td>ButtonBorder</td>
-              <td>ButtonFace</td>
               <td>ButtonText</td>
               <td>GrayText</td>
               <td>ButtonText</td>