2

To make power mails error messages accessible for screenreaders I have to change HTML.

Original Powermail

<div class="form-group powermail_fieldwrap_name has-error">
    <label for="powermail_field_name">Name<span class="mandatory">*</span></label>
    <input required="required" data-parsley-required-message="Dieses Feld muss ausgefüllt werden!" data-parsley-trigger="change" class="form-control " id="powermail_field_name" type="text" name="tx_powermail_pi1[field][name]" value="" data-parsley-id="12">
    <ul class="help-block filled" id="parsley-id-12"><li class="parsley-required">Dieses Feld muss ausgefüllt werden!</li></ul>
</div>

Accessible

<div class="form-group powermail_fieldwrap_name has-error">
    <label for="powermail_field_name">Name<span class="mandatory">*</span></label>
    <input required="required" data-parsley-required-message="Dieses Feld muss ausgefüllt werden!" data-parsley-trigger="change" class="form-control " id="powermail_field_name" type="text" name="tx_powermail_pi1[field][name]" value="" data-parsley-id="12" aria-describedby="parsley-id-12">
    <ul class="help-block filled" id="parsley-id-12"><li class="parsley-required">Dieses Feld muss ausgefüllt werden!</li></ul>
</div>

In short: I have to add aria-describedby="parsley-id-12" to <input>.

In my own version of Ext:powermail/Resources/Private/Partials/Form/Field/Input.html I changed additionalAttributes to additionalAttributes="{aria-describedby:'error',vh:Validation.ValidationDataAttribute(field:field)}"

Complete partial

{namespace vh=In2code\Powermail\ViewHelpers}
<div class="powermail_fieldwrap powermail_fieldwrap_type_input powermail_fieldwrap_{field.marker} {field.css} {settings.styles.framework.fieldAndLabelWrappingClasses}">
    <label for="powermail_field_{field.marker}" class="{settings.styles.framework.labelClasses}" title="{field.description}">
        <vh:string.RawAndRemoveXss>{field.title}</vh:string.RawAndRemoveXss><f:if condition="{field.mandatory}"><span class="mandatory">*</span></f:if>
    </label>

    <div class="{settings.styles.framework.fieldWrappingClasses}">
        <f:form.textfield
                type="{vh:Validation.FieldTypeFromValidation(field:field)}"
                property="{field.marker}"
                placeholder="{field.placeholder}"
                value="{vh:Misc.PrefillField(field:field, mail:mail)}"
                class="powermail_input {settings.styles.framework.fieldClasses} {vh:Validation.ErrorClass(field:field, class:'powermail_field_error')}"
                additionalAttributes="{aria-describedby:'error',vh:Validation.ValidationDataAttribute(field:field)}"
                id="powermail_field_{field.marker}" />
    </div>
</div>

This ends with

The argument "additionalAttributes" was registered with type "array", but is of type "string" in view helper "TYPO3\CMS\Fluid\ViewHelpers\Form\TextfieldViewHelper"

Heinz Schilling
  • 2,177
  • 4
  • 18
  • 35

3 Answers3

1

I can't found a solution in templates because error id is set by parsley validation. So I add this jQuery JavaScript. Because I override some powermail templates jQuery selectors can vary. 

$('form[data-parsley-validate]').parsley().on('form:error', function() {

    var errorId;

    $.each(this.fields, function(key, field) {
        if (field.validationResult !== true) {

            switch (field.$element.attr('type')) {
                case 'radio':
                    errorId = field.$element.closest('.powermail_radio_group')
                        .children('.powermail_field_error_container')
                        .children('ul').attr('id');
                    break;
                case 'checkbox':
                    errorId = field.$element.closest('.powermail_checkbox_group')
                        .children('.powermail_field_error_container')
                        .children('ul').attr('id');
                    break;
                default:
                    errorId = field.$element.next('ul').attr('id');
            }
            field.$element.attr('aria-describedby',errorId);
        }
    });
});
Heinz Schilling
  • 2,177
  • 4
  • 18
  • 35
0

You may use the data-attribute like data="{describedby: 'error'}"

Se Bo
  • 11
  • 2
  • Results in `data-describedby="error"` but I need Aria in form `aria-describedby="parsley-id-12"`. – Heinz Schilling Jun 04 '18 at 11:42
  • OK, then you might checkout https://fluidtypo3.org/viewhelpers/vhs/master/Iterator/MergeViewHelper.html and see, if working… `additionalAttributes="{v:iterator.merge(a: {aria-describedby:'error'}, b: '{vh:Validation.ValidationDataAttribute(field:field)}}', useKeys: 1)}"` NOT tested! You probably need to export them using f:variable first for better readability (available since TYPO3 CMS 8.7 LTS, don't know which version you're using). – Se Bo Jun 04 '18 at 12:19
  • Thank you for this. I do some similar with EXT:vhs and add `additionalAttributes="{vhs:iterator.merge(a: {aria-describedby:'error'}, b: '{vh:Validation.ValidationDataAttribute(field:field)}', useKeys: 1)}"` . This works but now "error" is not the id which parsley create. I need `aria-describedby="parsley-id-12"` – Heinz Schilling Jun 05 '18 at 12:48
  • Maybe `additionalAttributes="{vhs:iterator.merge(a: {aria-describedby:'parsley-id-{field.uid}'}, b: '{vh:Validation.ValidationDataAttribute(field)}', useKeys: 1)}"` does the trick? Not sure, but 12 seems to be the uid. – Se Bo Jun 06 '18 at 08:31
  • Thank you for this idea. Error ID seems to come from parsley.js and not from TYPO3 field. Maybe missing accessibility has to be fixed in parsley.js – Heinz Schilling Jun 06 '18 at 11:41
0

It seems to be fixed in the current parsley.js version 2.9.1. Parsley is now adding the described-by attribute.

the problem is described in this pull request: https://github.com/guillaumepotier/Parsley.js/pull/1280

The current Powermail version 7.3.1 is coming with the outdated parsley version 2.7.2. So you have to add the current parsley.js version by your own.

kimomat
  • 2,211
  • 23
  • 37