Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#378] Fixed error message with screen reader. #439

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[#378] Fixed error message with screen reader. #439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7d62ea9
[#378] Fixed error message with screen reader.
febdao Dec 1, 2024
ca14ca4
[#378] Update tests.
febdao Dec 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions components/01-atoms/checkbox/__snapshots__/checkbox.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ exports[`Checkbox Component renders with optional attributes 1`] = `


<input
aria-describedby="test-checkbox-id-message"
aria-invalid="true"
checked=""
class="ct-checkbox ct-theme-dark ct-checkbox--is-invalid custom-class"
data-test="true"
Expand Down
3 changes: 2 additions & 1 deletion components/01-atoms/checkbox/checkbox.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@
name="{{ name }}"
value="{{ value }}"
id="{{ id }}"
{% if is_invalid and id %}aria-describedby="{{ id }}-message"{% endif %}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this work with Drupal?

Copy link
Collaborator

@richardgaunt richardgaunt Dec 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ie seems like we would need to pass the entire ID of the message block at the top of the screen

{% 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 %}
/>
Expand Down
6 changes: 6 additions & 0 deletions components/01-atoms/field-message/__snapshots__/field-message.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ exports[`Field Message Component allows HTML content 1`] = `

<div
class="ct-field-message ct-theme-light ct-field-message--information "
id=""
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should never have an empty id

>


Expand Down Expand Up @@ -57,6 +58,7 @@ exports[`Field Message Component renders with additional attributes and classes
<div
class="ct-field-message ct-theme-light ct-field-message--information custom-modifier"
data-test="true"
id=""
>


Expand Down Expand Up @@ -94,6 +96,7 @@ exports[`Field Message Component renders with custom theme and type 1`] = `

<div
class="ct-field-message ct-theme-dark ct-field-message--error "
id=""
>


Expand Down Expand Up @@ -131,6 +134,7 @@ exports[`Field Message Component renders with default values 1`] = `

<div
class="ct-field-message ct-theme-light ct-field-message--information "
id=""
>


Expand Down Expand Up @@ -168,6 +172,7 @@ exports[`Field Message Component renders with icons 1`] = `

<div
class="ct-field-message ct-theme-light ct-field-message--warning "
id=""
>


Expand Down Expand Up @@ -205,6 +210,7 @@ exports[`Field Message Component strips HTML content 1`] = `

<div
class="ct-field-message ct-theme-light ct-field-message--information "
id=""
>


Expand Down
3 changes: 2 additions & 1 deletion components/01-atoms/field-message/field-message.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
#}

Expand All @@ -25,7 +26,7 @@
} %}

{% if content is not empty -%}
<div class="ct-field-message {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
<div id="{{ message_id }}" class="ct-field-message {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
{% if icons[type] is defined %}
{% include "@base/icon/icon.twig" with {
symbol: icons[type],
Expand Down
1 change: 1 addition & 0 deletions components/01-atoms/fieldset/__snapshots__/fieldset.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@ exports[`Fieldset Component renders with message 1`] = `

<div
class="ct-field-message ct-theme-light ct-field-message--warning ct-fieldset__message"
id=""
>


Expand Down
2 changes: 2 additions & 0 deletions components/01-atoms/input/__snapshots__/input.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ exports[`Input Component renders with optional attributes 1`] = `


<input
aria-describedby="input-id-message"
aria-invalid="true"
class="ct-input ct-theme-dark ct-input--is-invalid custom-class"
data-test="true"
disabled=""
Expand Down
3 changes: 2 additions & 1 deletion components/01-atoms/input/input.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it is not invalid why do we want to add this attribute?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think this should be outside of the is_required attribute check

{% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
{% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
/>
Expand Down
2 changes: 2 additions & 0 deletions components/01-atoms/radio/__snapshots__/radio.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ exports[`Radio Component renders with optional attributes 1`] = `


<input
aria-describedby="radio-id-message"
aria-invalid="true"
checked=""
class="ct-radio ct-theme-dark ct-radio--is-invalid custom-class"
data-test="true"
Expand Down
3 changes: 2 additions & 1 deletion components/01-atoms/radio/radio.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
/>
Expand Down
2 changes: 2 additions & 0 deletions components/01-atoms/select/__snapshots__/select.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ exports[`Select Component renders with optional attributes 1`] = `


<select
aria-describedby="select-id-message"
aria-invalid="true"
class="ct-select ct-theme-dark ct-select--is-invalid custom-class"
data-test="true"
disabled=""
Expand Down
3 changes: 2 additions & 1 deletion components/01-atoms/select/select.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

{% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
>
{% for option in options %}
Expand Down
1 change: 1 addition & 0 deletions components/01-atoms/textarea/__snapshots__/textarea.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ exports[`Textarea Component renders with optional attributes 1`] = `


<textarea
aria-invalid="true"
class="ct-textarea ct-theme-dark ct-textarea--is-invalid custom-class"
data-test="true"
disabled=""
Expand Down
3 changes: 2 additions & 1 deletion components/01-atoms/textarea/textarea.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('') }}</textarea>
Expand Down
1 change: 1 addition & 0 deletions components/01-atoms/textfield/__snapshots__/textfield.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ exports[`Textfield Component renders with optional attributes 1`] = `


<input
aria-invalid="true"
class="ct-textfield ct-theme-dark ct-textfield--is-invalid custom-class"
data-test="true"
disabled=""
Expand Down
3 changes: 2 additions & 1 deletion components/01-atoms/textfield/textfield.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
/>
Expand Down
3 changes: 3 additions & 0 deletions components/02-molecules/field/__snapshots__/field.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -797,6 +797,7 @@ exports[`Field Component required, disabled, and description 1`] = `


<input
aria-invalid="false"
class="ct-textfield ct-theme-light ct-field__control"
disabled=""
name="testname"
Expand Down Expand Up @@ -1018,6 +1019,8 @@ exports[`Field Component textarea with all attributes 1`] = `


<textarea
aria-describedby="testid-message"
aria-invalid="true"
class="ct-textarea ct-theme-light ct-textarea--is-invalid ct-field__control"
id="testid"
name="testname"
Expand Down
1 change: 1 addition & 0 deletions components/02-molecules/field/field.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@
content: message ? message : (is_invalid ? (title is not empty ? 'Field <em>' ~ title ~ '</em> 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 %}
</div>
Expand Down
Loading