From 7d62ea9ad8483078bfcd9fbbc15d5dc4d4bc1e8a Mon Sep 17 00:00:00 2001 From: Feb Dao Date: Sun, 1 Dec 2024 23:29:24 +1100 Subject: [PATCH 1/2] [#378] Fixed error message with screen reader. --- components/01-atoms/checkbox/checkbox.twig | 3 ++- components/01-atoms/field-message/field-message.twig | 3 ++- components/01-atoms/input/input.twig | 3 ++- components/01-atoms/radio/radio.twig | 3 ++- components/01-atoms/select/select.twig | 3 ++- components/01-atoms/textarea/textarea.twig | 3 ++- components/01-atoms/textfield/textfield.twig | 3 ++- components/02-molecules/field/field.twig | 1 + 8 files changed, 15 insertions(+), 7 deletions(-) diff --git a/components/01-atoms/checkbox/checkbox.twig b/components/01-atoms/checkbox/checkbox.twig index 2a2f4c1f..15e443f3 100644 --- a/components/01-atoms/checkbox/checkbox.twig +++ b/components/01-atoms/checkbox/checkbox.twig @@ -29,8 +29,9 @@ name="{{ name }}" value="{{ value }}" id="{{ id }}" + {% if is_invalid and id %}aria-describedby="{{ id }}-message"{% endif %} {% if is_checked %}checked{% endif %} - {% if is_required %}required{% endif %} + {% if is_required %}required aria-invalid="{{ is_invalid ? is_invalid : 'false' }}"{% endif %} {% if is_disabled %}disabled{% endif %} {% if attributes is not empty %}{{- attributes|raw -}}{% endif %} /> diff --git a/components/01-atoms/field-message/field-message.twig b/components/01-atoms/field-message/field-message.twig index b3c389ad..2bd26018 100644 --- a/components/01-atoms/field-message/field-message.twig +++ b/components/01-atoms/field-message/field-message.twig @@ -10,6 +10,7 @@ * - allow_html: [boolean] Allow HTML in text. * - attributes: [string] Additional attributes. * - modifier_class: [string] Additional classes. + * - message_id: [string] Message id for WCAG purpose. */ #} @@ -25,7 +26,7 @@ } %} {% if content is not empty -%} -
+
{% if icons[type] is defined %} {% include "@base/icon/icon.twig" with { symbol: icons[type], diff --git a/components/01-atoms/input/input.twig b/components/01-atoms/input/input.twig index 7ac821e2..a51fed50 100644 --- a/components/01-atoms/input/input.twig +++ b/components/01-atoms/input/input.twig @@ -27,8 +27,9 @@ name="{{ name }}" {% if value is not empty %}value="{{ value }}"{% endif %} {% if id %}id="{{ id }}"{% endif %} + {% if is_invalid and id %}aria-describedby="{{ id }}-message"{% endif %} {% if is_disabled %}disabled{% endif %} - {% if is_required %}required{% endif %} + {% if is_required %}required aria-invalid="{{ is_invalid ? is_invalid : 'false' }}"{% endif %} {% if placeholder %}placeholder="{{ placeholder }}"{% endif %} {% if attributes is not empty %}{{- attributes|raw -}}{% endif %} /> diff --git a/components/01-atoms/radio/radio.twig b/components/01-atoms/radio/radio.twig index c0f2a6b9..f3788bd9 100644 --- a/components/01-atoms/radio/radio.twig +++ b/components/01-atoms/radio/radio.twig @@ -29,8 +29,9 @@ name="{{ name }}" value="{{ value }}" id="{{ id }}" + {% if is_invalid and id %}aria-describedby="{{ id }}-message"{% endif %} {% if is_checked %}checked{% endif %} - {% if is_required %}required{% endif %} + {% if is_required %}required aria-invalid="{{ is_invalid ? is_invalid : 'false' }}"{% endif %} {% if is_disabled %}disabled{% endif %} {% if attributes is not empty %}{{- attributes|raw -}}{% endif %} /> diff --git a/components/01-atoms/select/select.twig b/components/01-atoms/select/select.twig index 407cbbae..da01e844 100644 --- a/components/01-atoms/select/select.twig +++ b/components/01-atoms/select/select.twig @@ -33,9 +33,10 @@ class="ct-select {{ modifier_class -}}" name="{{ name }}" {% if id %}id="{{ id }}"{% endif %} + {% if is_invalid and id %}aria-describedby="{{ id }}-message"{% endif %} {% if is_multiple %}multiple{% endif %} {% if is_disabled %}disabled{% endif %} - {% if is_required %}required{% endif %} + {% if is_required %}required aria-invalid="{{ is_invalid ? is_invalid : 'false' }}"{% endif %} {% if attributes is not empty %}{{- attributes|raw -}}{% endif %} > {% for option in options %} diff --git a/components/01-atoms/textarea/textarea.twig b/components/01-atoms/textarea/textarea.twig index 4093e666..56133d1f 100644 --- a/components/01-atoms/textarea/textarea.twig +++ b/components/01-atoms/textarea/textarea.twig @@ -27,8 +27,9 @@ name="{{ name }}" {% if rows %}rows="{{ rows }}"{% endif %} {% if id %}id="{{ id }}"{% endif %} + {% if is_invalid and id %}aria-describedby="{{ id }}-message"{% endif %} {% if is_disabled %}disabled{% endif %} - {% if is_required %}required{% endif %} + {% if is_required %}required aria-invalid="{{ is_invalid ? is_invalid : 'false' }}"{% endif %} {% if placeholder %}placeholder="{{ placeholder }}"{% endif %} {% if attributes is not empty %}{{- attributes|raw -}}{% endif %} />{{ value|default('') }} diff --git a/components/01-atoms/textfield/textfield.twig b/components/01-atoms/textfield/textfield.twig index ff97af9c..8a545084 100644 --- a/components/01-atoms/textfield/textfield.twig +++ b/components/01-atoms/textfield/textfield.twig @@ -27,8 +27,9 @@ name="{{ name }}" {% if value is not empty %}value="{{ value }}"{% endif %} {% if id %}id="{{ id }}"{% endif %} + {% if is_invalid and id %}aria-describedby="{{ id }}-message"{% endif %} {% if is_disabled %}disabled{% endif %} - {% if is_required %}required{% endif %} + {% if is_required %}required aria-invalid="{{ is_invalid ? is_invalid : 'false' }}"{% endif %} {% if placeholder %}placeholder="{{ placeholder }}"{% endif %} {% if attributes is not empty %}{{- attributes|raw -}}{% endif %} /> diff --git a/components/02-molecules/field/field.twig b/components/02-molecules/field/field.twig index fba57268..928ba027 100644 --- a/components/02-molecules/field/field.twig +++ b/components/02-molecules/field/field.twig @@ -158,6 +158,7 @@ content: message ? message : (is_invalid ? (title is not empty ? 'Field ' ~ title ~ ' has an error' : 'Field has an error') : null), allow_html: true, modifier_class: 'ct-field__message', + message_id: control[0].id and type not in ['radio', 'checkbox'] ? control[0].id ~ '-message' : null, } only %} {% endif %}
From ca14ca47264f0f6952ee1b59c04d3707026480da Mon Sep 17 00:00:00 2001 From: Feb Dao Date: Sun, 1 Dec 2024 23:32:36 +1100 Subject: [PATCH 2/2] [#378] Update tests. --- .../01-atoms/checkbox/__snapshots__/checkbox.test.js.snap | 2 ++ .../field-message/__snapshots__/field-message.test.js.snap | 6 ++++++ .../01-atoms/fieldset/__snapshots__/fieldset.test.js.snap | 1 + components/01-atoms/input/__snapshots__/input.test.js.snap | 2 ++ components/01-atoms/radio/__snapshots__/radio.test.js.snap | 2 ++ .../01-atoms/select/__snapshots__/select.test.js.snap | 2 ++ .../01-atoms/textarea/__snapshots__/textarea.test.js.snap | 1 + .../01-atoms/textfield/__snapshots__/textfield.test.js.snap | 1 + .../02-molecules/field/__snapshots__/field.test.js.snap | 3 +++ 9 files changed, 20 insertions(+) diff --git a/components/01-atoms/checkbox/__snapshots__/checkbox.test.js.snap b/components/01-atoms/checkbox/__snapshots__/checkbox.test.js.snap index b6da9851..2eac38c3 100644 --- a/components/01-atoms/checkbox/__snapshots__/checkbox.test.js.snap +++ b/components/01-atoms/checkbox/__snapshots__/checkbox.test.js.snap @@ -22,6 +22,8 @@ exports[`Checkbox Component renders with optional attributes 1`] = ` @@ -57,6 +58,7 @@ exports[`Field Message Component renders with additional attributes and classes
@@ -94,6 +96,7 @@ exports[`Field Message Component renders with custom theme and type 1`] = `
@@ -131,6 +134,7 @@ exports[`Field Message Component renders with default values 1`] = `
@@ -168,6 +172,7 @@ exports[`Field Message Component renders with icons 1`] = `
@@ -205,6 +210,7 @@ exports[`Field Message Component strips HTML content 1`] = `
diff --git a/components/01-atoms/fieldset/__snapshots__/fieldset.test.js.snap b/components/01-atoms/fieldset/__snapshots__/fieldset.test.js.snap index a3c31bbd..1a70d323 100644 --- a/components/01-atoms/fieldset/__snapshots__/fieldset.test.js.snap +++ b/components/01-atoms/fieldset/__snapshots__/fieldset.test.js.snap @@ -274,6 +274,7 @@ exports[`Fieldset Component renders with message 1`] = `
diff --git a/components/01-atoms/input/__snapshots__/input.test.js.snap b/components/01-atoms/input/__snapshots__/input.test.js.snap index bb42845f..55759345 100644 --- a/components/01-atoms/input/__snapshots__/input.test.js.snap +++ b/components/01-atoms/input/__snapshots__/input.test.js.snap @@ -14,6 +14,8 @@ exports[`Input Component renders with optional attributes 1`] = `