From 634ef26af935b29fc1a76b51febc85e97485816e Mon Sep 17 00:00:00 2001
From: Christopher-O <christopher.oakes@cra-arc.gc.ca>
Date: Wed, 27 Nov 2024 09:19:37 -0700
Subject: [PATCH] Patch - Update _base.scss (#2444)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <marcandre.garneau@servicecanada.gc.ca>
---
 components/gc-chckbxrdio/_base.scss           | 49 ++++++++++++++++---
 .../gc-chckbxrdio/gc-chckbxrdio-doc-en.html   | 13 +++--
 .../gc-chckbxrdio/gc-chckbxrdio-doc-fr.html   | 13 +++--
 3 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/components/gc-chckbxrdio/_base.scss b/components/gc-chckbxrdio/_base.scss
index cdabbe5573..8a809790d7 100644
--- 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
index 2ab87eb2fb..cf661af8d2 100644
--- 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
index f82d9e3a59..ed5c46bdf4 100644
--- 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>