From 229d3c3bd5bea3bf80598726d5ecd6eb486e7e5a Mon Sep 17 00:00:00 2001
From: Dalin Akrasi <Dalin.Akrasi@hee.nhs.uk>
Date: Tue, 10 Sep 2024 19:49:28 +0100
Subject: [PATCH 1/2] Expose input errors to screen reader

---
 .../Components/DateInput/Default.cshtml       | 54 ++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml
index 426e572..2f3d61c 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml
@@ -54,12 +54,13 @@
                            id="@Model.DayId"
                            name="@Model.DayId"
                            value="@Model.DayValue"
-                           type="number"
+                           type="text"
                            pattern="[0-9]*"
                            min="1"
                            max="31"
                            step="1"
-                           inputmode="numeric" />
+                           inputmode="numeric"
+                           aria-describedby="date-error" aria-invalid="false" />
                 </div>
             </div>
             <div class="nhsuk-date-input__item">
@@ -69,12 +70,13 @@
                            id="@Model.MonthId"
                            name="@Model.MonthId"
                            value="@Model.MonthValue"
-                           type="number"
+                           type="text"
                            pattern="[0-9]*"
                            min="1"
                            max="12"
                            step="1"
-                           inputmode="numeric" />
+                           inputmode="numeric"
+                           aria-describedby="date-error" aria-invalid="false" />
                 </div>
             </div>
             <div class="nhsuk-date-input__item">
@@ -84,14 +86,54 @@
                            id="@Model.YearId"
                            name="@Model.YearId"
                            value="@Model.YearValue"
-                           type="number"
+                           type="text"
                            pattern="[0-9]*"
                            min="1900"
                            max="9999"
                            step="1"
-                           inputmode="numeric" />
+                           inputmode="numeric"
+                           aria-describedby="date-error" aria-invalid="false" />
                 </div>
             </div>
+            <span id="date-error" class="error-message--margin-bottom-1 nhsuk-error-message" aria-live="polite" style="visibility: hidden;">
+            </span>
         </div>
     </fieldset>
+    <script>
+        const fields = [@Model.DayId, @Model.MonthId, @Model.YearId];
+
+        const errorElement = document.getElementById('date-error');
+        for (let field of fields) {
+            console.log('id: ', field.id)
+            const inputElement = document.getElementById(field.id);
+            console.log('el: ', inputElement)
+
+            inputElement.addEventListener('input', function (event) {
+                console.log(event)
+                if (event.inputType === 'deleteContentBackward') {
+                    return;
+                }
+
+
+                const value = event.data;
+                const min = parseInt(inputElement.getAttribute('min'));
+                const max = parseInt(inputElement.getAttribute('max'));
+
+                inputElement.setAttribute('aria-invalid', 'false');
+                errorElement.textContent = '';
+                errorElement.style.visibility = 'hidden';
+
+                setTimeout(function () {
+                    if (value < 1 || value > max || !value.match(/^[0-9]*$/)) {
+                        console.log('not matched')
+                        inputElement.value = inputElement.value.slice(0, -1) + 1;
+                        inputElement.value = inputElement.value.slice(0, -1);
+                        inputElement.setAttribute('aria-invalid', 'true');
+                        errorElement.textContent = `Invalid input. Please enter a number between ${min} and ${max}.`;
+                        errorElement.style.visibility = 'visible';
+                    }
+                }, 0);
+            });
+        }
+    </script>
 </div>

From e45b6ce096230528384b7ed7b74709caf0458b2d Mon Sep 17 00:00:00 2001
From: Dalin Akrasi <Dalin.Akrasi@hee.nhs.uk>
Date: Wed, 11 Sep 2024 14:20:24 +0100
Subject: [PATCH 2/2] Remove console.logs

---
 .../Views/Shared/Components/DateInput/Default.cshtml        | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml
index 2f3d61c..341c039 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/DateInput/Default.cshtml
@@ -104,17 +104,14 @@
 
         const errorElement = document.getElementById('date-error');
         for (let field of fields) {
-            console.log('id: ', field.id)
             const inputElement = document.getElementById(field.id);
-            console.log('el: ', inputElement)
 
             inputElement.addEventListener('input', function (event) {
-                console.log(event)
+
                 if (event.inputType === 'deleteContentBackward') {
                     return;
                 }
 
-
                 const value = event.data;
                 const min = parseInt(inputElement.getAttribute('min'));
                 const max = parseInt(inputElement.getAttribute('max'));
@@ -125,7 +122,6 @@
 
                 setTimeout(function () {
                     if (value < 1 || value > max || !value.match(/^[0-9]*$/)) {
-                        console.log('not matched')
                         inputElement.value = inputElement.value.slice(0, -1) + 1;
                         inputElement.value = inputElement.value.slice(0, -1);
                         inputElement.setAttribute('aria-invalid', 'true');