Patch - Update _base.scss (#2444)

* Update _base.scss Clear and simple explanation of the change/update: Updated input elements to be invisible simply by using opacity: 0 and z-index:2 in order for inputs to be selected by Dragon Naturally Speaking adaptive technology voice reader Added fallback to show focus of checkboxes and radio buttons and selection of radio buttons in Windows high contrast mode. The impact on the sponsored department (CRA) for that change/update: Improved accessibility for users of the adaptive technology or visual mode The impact on the public for that change/update: No change for current use cases, but allows easier selection of radio button and checkboxes using Dragon Naturally Speaking, and provides proper focus in high contrast mode when using keyboard and selecting radio buttons * removed test provisional class extension * adding margin so input is nested inside design * Adding documentation and fixing hidden checkbox hover --------- Co-authored-by: Marc-André Garneau <[email protected]>
wet-boew · Nov 27, 2024 · 634ef26 · 634ef26
1 parent cfe811c
commit 634ef26
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 14 deletions.
diff --git a/components/gc-chckbxrdio/_base.scss b/components/gc-chckbxrdio/_base.scss
@@ -38,14 +38,9 @@ fieldset.gc-chckbxrdio {
 
 	input[type="radio"],
 	input[type="checkbox"] {
-		border: 0;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: absolute;
-		width: 1px;
+		margin-left: 10px;
+		opacity: 0;
+		z-index: 2;
 
 		&[disabled] + label {
 			cursor: not-allowed;
@@ -77,6 +72,14 @@ fieldset.gc-chckbxrdio {
 			}
 		}
 
+		&:hover {
+			cursor: pointer;
+
+			+ label::before {
+				@include chckbxrdio-hover;
+			}
+		}
+
 		&:focus + label::before {
 			@include chckbxrdio-focus;
 		}
@@ -150,3 +153,33 @@ fieldset.gc-chckbxrdio {
 		}
 	}
 }
+@media (prefers-contrast: more) {
+	.gc-chckbxrdio {
+		input[type=checkbox] {
+			&:focus+label {
+				&::before {
+					border: 5px double #000;
+				}
+			}
+		}
+		input[type=radio] {
+			&:focus+label {
+				&::before {
+					border: 5px double #000;
+				}
+			}
+		}
+		input[type="radio"] {
+			&:checked {
+				+ {
+					label {
+						&::before {
+							outline: 10px solid #444;
+							outline-offset: -20px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html b/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html
@@ -64,7 +64,7 @@ <h2>How to implement</h2>
 <h2>Evaluation and report</h2>
 <p>There is no evaluation and report available for this component.</p>
 
-<h2>API (Version 1.0)</h2>
+<h2>API (Version 1.0.1)</h2>
 <table class="table table-bordered">
 	<tr>
 		<th>CSS Class</th>
@@ -75,7 +75,7 @@ <h2>API (Version 1.0)</h2>
 	<tr>
 		<td>Version 1.0</td>
 		<td>Version 1.0</td>
-		<td>Version 1.0</td>
+		<td>Version 1.0.1</td>
 		<td>n.a.</td>
 	</tr>
 </table>
@@ -120,7 +120,7 @@ <h4>Variant: Tickbox (<code>.checkbox.gc-chckbxrdio</code>)</h4>
 	&lt;label for="template"&gt;Template&lt;/label&gt;
 &lt;/div&gt;</code></pre>
 
-<h3>Visual rendering (v1.0)</h3>
+<h3>Visual rendering (v1.0.1)</h3>
 <h4>Default</h4>
 <dl>
 	<dt>Check box and radio</dt>
@@ -161,6 +161,13 @@ <h4>Tickbox</h4>
 <details>
 	<summary>Version notes</summary>
 	<dl class="dl-horizontal">
+		<dt>Version 1.0.1</dt>
+		<dd>
+			<ul>
+				<li>Fixed radio buttons UI for users leveraging the high-contrast feature. Note: High-contrast functionality is not considered as essential component behavior (not included in the API).</li>
+				<li>Fixed display of hidden inputs so that they are accessible through Dragon Naturally Speak.</li>
+			</ul>
+		</dd>
 		<dt>Version 1.0</dt>
 		<dd>
 			<ul>

diff --git a/components/gc-chckbxrdio/gc-chckbxrdio-doc-fr.html b/components/gc-chckbxrdio/gc-chckbxrdio-doc-fr.html
@@ -64,7 +64,7 @@ <h2>Exemples pratiques</h2>
 <h2>Évaluation et rapport</h2>
 <p>Il n'y a pas d'évaluation et de rapport disponible pour ce composant.</p>
 
-<h2>API (Version 1.0)</h2>
+<h2>API (Version 1.0.1)</h2>
 <table class="table table-bordered">
 	<tr>
 		<th>Classe CSS</th>
@@ -75,7 +75,7 @@ <h2>API (Version 1.0)</h2>
 	<tr>
 		<td>Version 1.0</td>
 		<td>Version 1.0</td>
-		<td>Version 1.0</td>
+		<td>Version 1.0.1</td>
 		<td>s.o.</td>
 	</tr>
 </table>
@@ -117,7 +117,7 @@ <h4>Variation&nbsp;: Tickbox (<code>.checkbox.gc-chckbxrdio</code>)</h4>
 	&lt;label for="gabarit"&gt;Gabarit&lt;/label&gt;
 &lt;/div&gt;</code></pre>
 
-<h3>Rendu visuel (v1.0)</h3>
+<h3>Rendu visuel (v1.0.1)</h3>
 <h4>Base</h4>
 <dl>
 	<dt>Cases à cocher et boutons radio</dt>
@@ -158,6 +158,13 @@ <h4 lang="en">Tickbox</h4>
 <details>
 	<summary>Notes sur les versions</summary>
 	<dl class="dl-horizontal">
+		<dt>Version 1.0.1</dt>
+		<dd>
+			<ul>
+				<li>Support de la fonctionnalité de contraste élevé pour les boutons radios. Note: la fonctionnalité de contraste élevé n'est pas considérée comme comportement essentiel de la composante (n'est pas inclut dans l'API).</li>
+				<li>Les boutons radios et cases à cocher invisibles sont maintenant accessibles via Dragon Naturally Speak.</li>
+			</ul>
+		</dd>
 		<dt>Version 1.0</dt>
 		<dd>
 			<ul>