From ff648a75dc49d4d7fe9b02f3eeac9732ccbe0069 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Saraj=C3=A4rvi?= <joonas.sarajarvi@solita.fi>
Date: Wed, 13 Dec 2023 17:40:04 +0100
Subject: [PATCH 1/6] AE-1770 Announce the text of Alert

---
 src/components/FlashMessage/Alert.svelte |  4 ++++
 src/template.html                        | 12 ++++++++++++
 src/utils/announce.js                    | 16 ++++++++++++++++
 webpack.config.js                        |  1 +
 4 files changed, 33 insertions(+)
 create mode 100644 src/template.html
 create mode 100644 src/utils/announce.js
diff --git a/src/components/FlashMessage/Alert.svelte b/src/components/FlashMessage/Alert.svelte
index 689f8bf71..787b6a5ea 100644
--- a/src/components/FlashMessage/Alert.svelte
+++ b/src/components/FlashMessage/Alert.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { announceAssertively } from '@Utility/announce';
+
   export let type;
   export let text;
   export let close = () => {};
@@ -8,6 +10,8 @@
     warn: 'warning',
     success: 'check_circle_outline'
   }[type];
+
+  $: announceAssertively(text);
 </script>
 
 <style type="text/postcss">
diff --git a/src/template.html b/src/template.html
new file mode 100644
index 000000000..dd025b148
--- /dev/null
+++ b/src/template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="fi">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="polite-announcer" aria-live="polite" class="sr-only"></div>
+    <div id="assertive-announcer" aria-live="assertive" class="sr-only"></div>
+  </body>
+</html>
diff --git a/src/utils/announce.js b/src/utils/announce.js
new file mode 100644
index 000000000..5bf58f83a
--- /dev/null
+++ b/src/utils/announce.js
@@ -0,0 +1,16 @@
+const assertiveAnnouncerId = 'assertive-announcer';
+const politeAnnouncerId = 'polite-announcer';
+
+const announce = announcerId => msg => {
+  const announcer = document.getElementById(announcerId);
+  const previous = announcer.children[0];
+  if (previous !== undefined) {
+    announcer.removeChild(previous);
+  }
+  const p = document.createElement('p');
+  p.textContent = msg;
+  announcer.appendChild(p);
+};
+
+export const announceAssertively = announce(assertiveAnnouncerId);
+export const announcePolitely = announce(politeAnnouncerId);
diff --git a/webpack.config.js b/webpack.config.js
index c13451fcb..1ec1a4c1c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -106,6 +106,7 @@ module.exports = {
     }),
     new HtmlWebpackPlugin({
       title: 'Ara - Energiatodistuspalvelu',
+      template: './src/template.html',
       favicon: './assets/favicon.png'
     }),
     new CopyWebpackPlugin({

From d5cc1395aa04824a4106c0ff1506f2b5d1d43e73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Saraj=C3=A4rvi?= <joonas.sarajarvi@solita.fi>
Date: Thu, 14 Dec 2023 10:10:43 +0100
Subject: [PATCH 2/6] Add some explanatory comments in validation.js

---
 src/utils/validation.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/utils/validation.js b/src/utils/validation.js
index fea892158..4e6392a36 100644
--- a/src/utils/validation.js
+++ b/src/utils/validation.js
@@ -270,6 +270,12 @@ export const VerkkolaskuosoiteValidator = {
 
 /**
  * @sig Array [Validator] -> a -> Either [Validator,a]
+ *
+ * This function checks a single value from the data
+ * model against an array of validators.
+ *
+ * On success returns Either.Right(value),
+ * on failure returns Either.Left(validator).
  */
 const validate = (validators, value) =>
   Maybe.fromUndefined(
@@ -280,6 +286,11 @@ const validate = (validators, value) =>
 
 /**
  * @sig Array [Validator] -> a -> Either [(Translate -> string),a]
+ *
+ * This function checks a single value from the data model
+ * against an array of validators. The value is pasesd through
+ * as-is from `validate` if the validations succeed, but on failure
+ * the Left validator is mapped to a Left label function.
  */
 export const validateModelValue = R.curry((validators, value) =>
   Either.fromValueOrEither(value).flatMap(modelValue =>
@@ -295,14 +306,28 @@ const expandSchemaToObjectSize = (schemaObject, object) =>
     ? R.map(R.always(schemaObject[0]), R.range(0, object.length))
     : schemaObject;
 
+/**
+ * @sig Object -> boolean
+ *
+ * deep.map needs this kind of a predicate function to decide what should be considered
+ * a leaf object that is mapped  instead of walked through
+ */
+const isValidatorArray = R.allPass([
+  R.is(Array),
+  R.all(R.propIs(Function, 'predicate'))
+]);
+
 /**
  * @sig Object -> Object -> Object
+ *
+ * This function is used to validate a data model object against
+ * a schema object.
  */
 export const validateModelObject = R.curry((schemaObject, object) =>
   R.evolve(
     deep.map(
-      R.allPass([R.is(Array), R.all(R.propIs(Function, 'predicate'))]),
-      v => validateModelValue(v),
+      isValidatorArray,
+      validators => validateModelValue(validators),
       expandSchemaToObjectSize(schemaObject, object)
     ),
     object

From efd354f70c16b4525fd556e124944c5abea458c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Saraj=C3=A4rvi?= <joonas.sarajarvi@solita.fi>
Date: Tue, 19 Dec 2023 14:53:05 +0100
Subject: [PATCH 3/6] AE-1770 Use aria-invalid in inputs

This makes it easier to spot inputs needing attention while
the user navigates through a form
---
 src/components/Input/InputField.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Input/InputField.svelte b/src/components/Input/InputField.svelte
index 9ba14ec94..70b5411ec 100644
--- a/src/components/Input/InputField.svelte
+++ b/src/components/Input/InputField.svelte
@@ -44,6 +44,7 @@
   class="input"
   class:center
   class:error
+  aria-invalid={error && viewValue.length > 0 ? "true" : "false"}
   {type}
   {autocomplete}
   {placeholder}

From d5dabfae778c3d571e277efa775038e46ff6d386 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Saraj=C3=A4rvi?= <joonas.sarajarvi@solita.fi>
Date: Wed, 20 Dec 2023 12:37:33 +0100
Subject: [PATCH 4/6] AE-1770 Add a description label with validation error

---
 src/components/Input/Input.svelte      | 2 ++
 src/components/Input/InputField.svelte | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/Input/Input.svelte b/src/components/Input/Input.svelte
index 7091d7ed8..08fbf1875 100644
--- a/src/components/Input/Input.svelte
+++ b/src/components/Input/Input.svelte
@@ -116,6 +116,8 @@
     </svelte:component>
   {/if}
 
+  <div class="sr-only" id={`${id}-error-label`}>{validationResult.message}</div>
+
   {#if !valid}
     <div class="validation-label">
       {#if validationResult.type === 'error'}
diff --git a/src/components/Input/InputField.svelte b/src/components/Input/InputField.svelte
index 70b5411ec..631fc57a2 100644
--- a/src/components/Input/InputField.svelte
+++ b/src/components/Input/InputField.svelte
@@ -44,6 +44,7 @@
   class="input"
   class:center
   class:error
+  aria-describedby={`${id}-error-label`}
   aria-invalid={error && viewValue.length > 0 ? "true" : "false"}
   {type}
   {autocomplete}

From 88f9ebcaeba9225329bcf885217ed40278f719a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Saraj=C3=A4rvi?= <joonas.sarajarvi@solita.fi>
Date: Wed, 20 Dec 2023 13:59:52 +0200
Subject: [PATCH 5/6] Fix typo in src/utils/validation.js

Co-authored-by: Juho Leinonen <juho.leinonen@solita.fi>
---
 src/utils/validation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/validation.js b/src/utils/validation.js
index 4e6392a36..5a3423916 100644
--- a/src/utils/validation.js
+++ b/src/utils/validation.js
@@ -288,7 +288,7 @@ const validate = (validators, value) =>
  * @sig Array [Validator] -> a -> Either [(Translate -> string),a]
  *
  * This function checks a single value from the data model
- * against an array of validators. The value is pasesd through
+ * against an array of validators. The value is passed through
  * as-is from `validate` if the validations succeed, but on failure
  * the Left validator is mapped to a Left label function.
  */

From 33fe1163942ba3fafe3abd551457ddf8477cac19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Saraj=C3=A4rvi?= <joonas.sarajarvi@solita.fi>
Date: Wed, 20 Dec 2023 13:05:42 +0100
Subject: [PATCH 6/6] Reformat

---
 src/components/Input/InputField.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Input/InputField.svelte b/src/components/Input/InputField.svelte
index 631fc57a2..69390fca4 100644
--- a/src/components/Input/InputField.svelte
+++ b/src/components/Input/InputField.svelte
@@ -45,7 +45,7 @@
   class:center
   class:error
   aria-describedby={`${id}-error-label`}
-  aria-invalid={error && viewValue.length > 0 ? "true" : "false"}
+  aria-invalid={error && viewValue.length > 0 ? 'true' : 'false'}
   {type}
   {autocomplete}
   {placeholder}
