From 5bae7cc72b1471aaf9c1e7cea1db3f4294130b95 Mon Sep 17 00:00:00 2001
From: vasileios <zigras00@gmail.com>
Date: Fri, 27 Oct 2023 15:19:17 +0200
Subject: [PATCH 1/2] [#524] Added aria-labelledby to the input element

Attribute aria-labelledby is added in order to reference multiple
elements on the page and define the final accessible name for the input
element.
---
 src/formio/templates/label.ejs | 1 +
 src/formio/templates/text.ejs  | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/formio/templates/label.ejs b/src/formio/templates/label.ejs
index b96dc4184..aa9c61caf 100644
--- a/src/formio/templates/label.ejs
+++ b/src/formio/templates/label.ejs
@@ -2,6 +2,7 @@
   <label
     class="utrecht-form-label {{ctx.label.className}} {% if (ctx.component.validate.required && ctx.requiredFieldsWithAsterisk) { %}utrecht-form-label--openforms-required{% } %}"
     for="{{ctx.instance.id}}-{{ctx.component.key}}"
+    id="label-{{ctx.instance.id}}-{{ctx.component.key}}"
   >
     {{ ctx.t(ctx.component.label, { _userInput: true }) }}
     {% if (!ctx.component.validate.required && !ctx.requiredFieldsWithAsterisk) { %}
diff --git a/src/formio/templates/text.ejs b/src/formio/templates/text.ejs
index 92a6751a2..3e88d1b37 100644
--- a/src/formio/templates/text.ejs
+++ b/src/formio/templates/text.ejs
@@ -16,6 +16,7 @@
   {{attr}}="{{ctx.input.attr[attr]}}"
   {% } %}
   id="{{ctx.instance.id}}-{{ctx.component.key}}"
+  aria-labelledby="label-{{ctx.instance.id}}-{{ctx.component.key}} {{ctx.instance.id}}-{{ctx.component.key}} suffix-{{ctx.instance.id}}-{{ctx.component.key}}"
 >{{ctx.input.content}}</{{ctx.input.type}}>
 {% if (ctx.component.showCharCount) { %}
 <span class="charcount" ref="charcount"></span>
@@ -24,7 +25,7 @@
 <span class="wordcount" ref="wordcount"></span>
 {% } %}
 {% if (ctx.suffix) { %}
-<span class="{{ctx.ofPrefix}}input-container__affix {{ctx.ofPrefix}}input-container__affix--suffix" ref="suffix">
+<span class="{{ctx.ofPrefix}}input-container__affix {{ctx.ofPrefix}}input-container__affix--suffix" ref="suffix" id="suffix-{{ctx.instance.id}}-{{ctx.component.key}}">
     {% if(ctx.suffix instanceof HTMLElement){ %}
       {{ ctx.t(ctx.suffix.outerHTML) }}
     {% } else{ %}

From af510ede3ed683b4fae9dfb5f53d5fd21e992978 Mon Sep 17 00:00:00 2001
From: vasileios <zigras00@gmail.com>
Date: Mon, 30 Oct 2023 09:46:54 +0100
Subject: [PATCH 2/2] [#524] Add aria-labelledby only when there is a suffix

---
 src/formio/templates/label.ejs | 4 +++-
 src/formio/templates/text.ejs  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/formio/templates/label.ejs b/src/formio/templates/label.ejs
index aa9c61caf..2e06ddb42 100644
--- a/src/formio/templates/label.ejs
+++ b/src/formio/templates/label.ejs
@@ -2,7 +2,9 @@
   <label
     class="utrecht-form-label {{ctx.label.className}} {% if (ctx.component.validate.required && ctx.requiredFieldsWithAsterisk) { %}utrecht-form-label--openforms-required{% } %}"
     for="{{ctx.instance.id}}-{{ctx.component.key}}"
-    id="label-{{ctx.instance.id}}-{{ctx.component.key}}"
+    {% if (ctx.component.suffix) { %}
+      id="label-{{ctx.instance.id}}-{{ctx.component.key}}"
+    {% } %}
   >
     {{ ctx.t(ctx.component.label, { _userInput: true }) }}
     {% if (!ctx.component.validate.required && !ctx.requiredFieldsWithAsterisk) { %}
diff --git a/src/formio/templates/text.ejs b/src/formio/templates/text.ejs
index 3e88d1b37..7266c4cfd 100644
--- a/src/formio/templates/text.ejs
+++ b/src/formio/templates/text.ejs
@@ -16,7 +16,9 @@
   {{attr}}="{{ctx.input.attr[attr]}}"
   {% } %}
   id="{{ctx.instance.id}}-{{ctx.component.key}}"
-  aria-labelledby="label-{{ctx.instance.id}}-{{ctx.component.key}} {{ctx.instance.id}}-{{ctx.component.key}} suffix-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {% if (ctx.suffix) { %}
+    aria-labelledby="label-{{ctx.instance.id}}-{{ctx.component.key}} {{ctx.instance.id}}-{{ctx.component.key}} suffix-{{ctx.instance.id}}-{{ctx.component.key}}"
+  {% } %}
 >{{ctx.input.content}}</{{ctx.input.type}}>
 {% if (ctx.component.showCharCount) { %}
 <span class="charcount" ref="charcount"></span>