Skip to content

Commit

Permalink
add icon title (#3323)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emeryro
emeryro committed Apr 3, 2024
1 parent 142ff48 commit 1ced752
Show file tree
Hide file tree
Showing 16 changed files with 76 additions and 10 deletions.
6 changes: 5 additions & 1 deletion src/implementations/twig/components/checkbox/__snapshots__/checkbox.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -805,10 +805,14 @@ exports[`Checkbox Default single checkbox renders correctly when invalid 1`] = `
class="ecl-feedback-message"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down
6 changes: 6 additions & 0 deletions src/implementations/twig/components/checkbox/checkbox-group.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
- "name" (string) (default: '')
- "invalid" (boolean) (default: false)
- "invalid_icon" (object of type "icon") (default: {})
- "sr_invalid_icon" (string) (default: ''): additional label for the invalid icon; for screen readers
- "item_required_text" (string) (default: *)
- "required" (boolean) (default: false)
- "extra_classes" (optional) (string) (default: '')
Expand All @@ -22,6 +23,7 @@
{% set _name = name|default('') %}
{% set _invalid = invalid|default(false) %}
{% set _invalid_icon = invalid_icon|default({}) %}
{% set _sr_invalid_icon = sr_invalid_icon|default('') %}
{% set _required = required|default(false) %}
{% set _invalid_text = invalid_text|default('') %}
{% set _extra_attributes = extra_attributes|default([{}]) %}
Expand All @@ -37,6 +39,10 @@
{% if _invalid_icon is not empty and _invalid_text is not empty %}
{% include '@ecl/icon/icon.html.twig' with {
icon: _invalid_icon,
as_image: true,
extra_accessibility: not _sr_invalid_icon ? {} : {
title: _sr_invalid_icon,
},
extra_classes: 'ecl-feedback-message__icon',
} only %}
{% endif %}
Expand Down
54 changes: 45 additions & 9 deletions src/implementations/twig/components/form-group/__snapshots__/form-group.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,10 +354,14 @@ exports[`Form group with Checkbox renders correctly when invalid 1`] = `
id="checkbox-default-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down Expand Up @@ -1066,10 +1070,14 @@ exports[`Form group with Datepicker renders correctly when invalid 1`] = `
id="example-input-id-1-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down Expand Up @@ -1455,10 +1463,14 @@ exports[`Form group with File Upload renders correctly when invalid 1`] = `
id="example-input-id-1-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down Expand Up @@ -2133,10 +2145,14 @@ exports[`Form group with Radio renders correctly when invalid 1`] = `
id="radio-default-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down Expand Up @@ -2758,10 +2774,14 @@ exports[`Form group with Range field renders correctly when invalid 1`] = `
id="example-range-id-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down Expand Up @@ -3571,10 +3591,14 @@ exports[`Form group with Rating field renders correctly when invalid 1`] = `
id="rating-field-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down Expand Up @@ -4659,10 +4683,14 @@ exports[`Form group with Select renders correctly when invalid 1`] = `
id="select-default-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down Expand Up @@ -5215,10 +5243,14 @@ exports[`Form group with Text field renders correctly when invalid 1`] = `
id="example-input-id-1-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down Expand Up @@ -5451,10 +5483,14 @@ exports[`Form group with Textarea renders correctly when invalid 1`] = `
id="example-textarea-id-1-invalid"
>
<svg
aria-hidden="true"
aria-hidden="false"
class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
focusable="false"
role="img"
>
<title>
Error
</title>
<use
xlink:href="/icons.svg#error"
/>
Expand Down
7 changes: 7 additions & 0 deletions src/implementations/twig/components/form-group/form-group.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
- "disabled" (boolean) (default: false)
- "invalid" (boolean) (default: false)
- "invalid_icon" (object of type "icon") (default: {})
- "sr_invalid_icon" (string) (default: ''): additional label for the invalid icon; for screen readers
- "required" (boolean) (default: false)
- "label_aria_required" (string) (default: ''): aria text for the required field label
- "label_aria_optional" (string) (default: ''): aria text for the optional field label
Expand All @@ -32,6 +33,7 @@
{% set _label_aria_required = label_aria_required|default('') %}
{% set _label_aria_optional = label_aria_optional|default('') %}
{% set _invalid_icon = invalid_icon|default({}) %}
{% set _sr_invalid_icon = sr_invalid_icon|default('') %}
{% set _helper_text = helper_text|default('') %}
{% set _invalid_text = invalid_text|default('') %}
{% set _label_class = 'ecl-form-label' %}
Expand Down Expand Up @@ -226,6 +228,7 @@
{% include '@ecl/checkbox/checkbox-group.html.twig' with _input|merge({
invalid_text: _invalid_text,
invalid_icon: _invalid_icon,
sr_invalid_icon: _sr_invalid_icon
}) only %}
{%- endif -%}

Expand All @@ -251,6 +254,10 @@
{%- if _invalid_icon is not empty -%}
{% include '@ecl/icon/icon.html.twig' with {
icon: _invalid_icon,
as_image: true,
extra_accessibility: not _sr_invalid_icon ? {} : {
title: _sr_invalid_icon,
},
extra_classes: 'ecl-feedback-message__icon',
} only %}
{%- endif -%}
Expand Down
2 changes: 2 additions & 0 deletions src/specs/components/checkbox/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
input: {
id: 'checkbox-default',
input_type: 'checkbox',
Expand All @@ -28,6 +29,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
items: [
{
checked: true,
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/datepicker/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
invalid_text: 'This is the error message',
optional_text: '(optional)',
required_text: '*',
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/file-upload/demo/data--multiple.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
required_text: '*',
optional_text: '(optional)',
required: true,
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/file-upload/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
required_text: '*',
optional_text: '(optional)',
required: true,
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/radio/demo/data--binary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
input: {
id: 'radio-default',
input_type: 'radio',
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/radio/demo/data--default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
input: {
id: 'radio-default',
input_type: 'radio',
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/range/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
label: 'Range slider',
helper_text: "This is the input's helper text.",
optional_text: '(optional)',
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/rating-field/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
input: {
input_type: 'rating-field',
id: 'rating-field',
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/select/demo/data-multiple.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
required_text: '*',
optional_text: '(optional)',
icon_path: '/icons.svg',
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/select/demo/data-single.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
required_text: '*',
optional_text: '(optional)',
required: true,
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/text-area/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
helper_text: "This is the input's helper text.",
required: false,
label_aria_required: 'required',
Expand Down
1 change: 1 addition & 0 deletions src/specs/components/text-input/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
name: 'error',
size: 'm',
},
sr_invalid_icon: 'Error',
helper_text: "This is the input's helper text.",
optional_text: '(optional)',
required: false,
Expand Down

1 comment on commit 1ced752

@github-actions
Copy link

Choose a reason for hiding this comment

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

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.