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

Bugfix/962 client side validation accessibility #1171

Merged
merged 8 commits into from
Oct 23, 2024
Merged

Bugfix/962 client side validation accessibility #1171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
244150b
[RELEASE] Release 12.4.3
mschwemer Oct 16, 2024
65b804b
[TASK] Add the aria-invalid attribute to mark fields as invalid
deoostfrees Oct 15, 2024
f5aab34
[TASK] Hide the asterisk symbol for required fields with aria-hidden …
deoostfrees Oct 15, 2024
549b3ba
[BUGFIX] Set the aria-invalid attribute on the radio/check fields, no…
deoostfrees Oct 17, 2024
36621de
[TASK] Improve form error, add an in-page link to the corresponding f…
deoostfrees Oct 18, 2024
92e9df9
[TASK] Improve default color contrast for error fields/messages
deoostfrees Oct 18, 2024
8de0540
[TASK] Add the aria-live attribute to let screen readers know when er…
deoostfrees Oct 18, 2024
31fa136
[TASK] Add built js and css files
mschwemer Oct 23, 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
1 change: 1 addition & 0 deletions Documentation/Changelog/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ breaking changes and how to handle them

| Version | Release Date | Description |
|-----------------|--------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 12.4.3 | 2024-10-16 | Bugfix release for EXT:powermail v12; TYPO3 v13 compatibility work starts today :-) |
| 12.4.2 | 2024-10-02 | Major bugfix release for EXT:powermail v12 |
| 12.4.1 | 2024-09-17 | Security release: Harden access checks to mail records. |
| [!!!] 12.4.0 | 2024-08-21 | Security release: Harden access checks to mail records, remove export and rss views completely without any replacement. |
Expand Down
11 changes: 11 additions & 0 deletions Resources/Private/Build/JavaScript/FormValidation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,7 @@ class Form {
#setError(type, field) {
this.#removeError(type, field);
this.#addErrorClass(field);
this.#addErrorAttribute(field);
let message = field.getAttribute('data-powermail-' + type + '-message') ||
field.getAttribute('data-powermail-error-message') || 'Validation error';
this.#addErrorMessage(message, field);
Expand All @@ -397,6 +398,7 @@ class Form {
*/
#removeError(type, field) {
this.#removeErrorClass(field);
this.#removeErrorAttribute(field);
this.#removeErrorMessages(field);
};

Expand All @@ -422,12 +424,21 @@ class Form {
}
};

#addErrorAttribute(field) {
field.setAttribute('aria-invalid', 'true');
};

#removeErrorAttribute(field) {
field.removeAttribute('aria-invalid');
};

#addErrorMessage(message, field) {
let errorContainer = document.createElement('ul');
errorContainer.classList.add(this.#errorMessageContainerClass);
errorContainer.classList.add('filled');
errorContainer.setAttribute('data-powermail-error', this.#getFieldIdentifier(field));
errorContainer.setAttribute('id', this.#getFieldIdentifier(field) + '-errormessage');
errorContainer.setAttribute('aria-live', 'polite');
field.setAttribute('aria-describedby', this.#getFieldIdentifier(field) + '-errormessage');
let errorElement = document.createElement('li');
errorContainer.appendChild(errorElement);
Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/Build/Sass/_Settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ $orange2: #FAEBCC;
$orange3: #FFCA4B;
$red1: #F2DEDE;
$red2: #EBCCD1;
$red3: #A94442;
$red3: #A43431;
$green1: #CDEACA;
$green2: #58B548;
$green3: #3B7826;
6 changes: 6 additions & 0 deletions Resources/Private/Language/locallang.xlf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,12 @@
<trans-unit id="validationerror_upload_error" resname="validationerror_upload_error">
<source>Upload failed, please check permissions on the server!</source>
</trans-unit>
<trans-unit id="validationerror_container_label" resname="validationerror_container_label">
<source>Problematic form fields</source>
</trans-unit>
<trans-unit id="validationerror_title" resname="validationerror_title">
<source>There are errors in this form</source>
</trans-unit>
<trans-unit id="validationerror_spam" resname="validationerror_spam">
<source>Spam recognized:</source>
</trans-unit>
Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/Partials/Form/FieldLabel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@

<f:if condition="{field.css} != 'nolabel'">
<label for="powermail_field_{field.marker}" class="{settings.styles.framework.labelClasses}" title="{field.description}">
<vh:string.escapeLabels>{field.title}</vh:string.escapeLabels><f:if condition="{field.mandatory}"><span class="mandatory">*</span></f:if>
<vh:string.escapeLabels>{field.title}</vh:string.escapeLabels><f:if condition="{field.mandatory}"><span class="mandatory" aria-hidden="true">*</span></f:if>
</label>
</f:if>
56 changes: 38 additions & 18 deletions Resources/Private/Partials/Misc/FormError.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,45 @@

<f:form.validationResults>
<f:if condition="{validationResults.flattenedErrors}">
<ul class="powermail_message powermail_message_error">
<f:for each="{validationResults.flattenedErrors}" as="errors">
<f:for each="{errors}" as="singleError">
<li>
<f:if condition="{singleError.message} == 'spam_details'">
<f:then>
<f:translate key="validationerror_spam" /> {singleError.arguments.spamfactor}
</f:then>
<f:else>
<f:if condition="{singleError.arguments.marker}">
<vh:getter.getFieldPropertyFromMarkerAndForm marker="{singleError.arguments.marker}" form="{form}" property="title"/>:
</f:if>
</f:else>
</f:if>
<nav class="powermail_message powermail_message_error" aria-label="{f:translate(key: 'validationerror_container_label')}">
<h2><f:translate key="validationerror_title" /></h2>

<f:translate key="validationerror_{singleError.message}">{singleError.message}</f:translate>
</li>
<ol>
<f:for each="{validationResults.flattenedErrors}" as="errors">
<f:for each="{errors}" as="singleError">
<li>
<f:if condition="{singleError.message} == 'spam_details'">
<f:then>
<f:translate key="validationerror_spam" /> {singleError.arguments.spamfactor}

<f:translate key="validationerror_{singleError.message}">{singleError.message}</f:translate>
</f:then>
<f:else>
<f:if condition="{singleError.arguments.marker}">
<f:if condition="{vh:getter.getFieldPropertyFromMarkerAndForm(marker: singleError.arguments.marker, form: form, property: 'type')} == 'check'
|| {vh:getter.getFieldPropertyFromMarkerAndForm(marker: singleError.arguments.marker, form: form, property: 'type')} == 'radio'">
<f:then>
<a href="#powermail_field_{singleError.arguments.marker}_1">
<vh:getter.getFieldPropertyFromMarkerAndForm marker="{singleError.arguments.marker}" form="{form}" property="title"/>:

<f:translate key="validationerror_{singleError.message}">{singleError.message}</f:translate>
</a>
</f:then>
<f:else>
<a href="#powermail_field_{singleError.arguments.marker}">
<vh:getter.getFieldPropertyFromMarkerAndForm marker="{singleError.arguments.marker}" form="{form}" property="title"/>:

<f:translate key="validationerror_{singleError.message}">{singleError.message}</f:translate>
</a>
</f:else>
</f:if>
</f:if>
</f:else>
</f:if>
</li>
</f:for>
</f:for>
</f:for>
</ul>
</ol>
</nav>
</f:if>
</f:form.validationResults>
2 changes: 1 addition & 1 deletion Resources/Public/Css/Backend.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/Public/Css/Basic.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions Resources/Public/JavaScript/Powermail/Form.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ext_emconf.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
and easy to use mailform extension with a lots of features
(spam prevention, marketing information, optin, ajax submit, diagram analysis, etc...)',
'category' => 'plugin',
'version' => '12.4.2',
'version' => '12.4.3',
'state' => 'stable',
'author' => 'Powermail Development Team',
'author_email' => '[email protected]',
Expand Down