powermail 中可访问的错误消息答案

【问题标题】：Accessible error messages in powermailpowermail 中可访问的错误消息
【发布时间】：2018-06-04 11:12:55
【问题描述】：

为了使屏幕阅读器可以访问电源邮件错误消息，我必须更改 HTML。

原始 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>

无障碍

<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>

简而言之：我必须将aria-describedby="parsley-id-12" 添加到<input>。

在我自己的 Ext:powermail/Resources/Private/Partials/Form/Field/Input.html 版本中，我将 additionalAttributes 更改为 additionalAttributes="{aria-describedby:'error',vh:Validation.ValidationDataAttribute(field:field)}"

完成部分

{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>

以

结尾

参数“additionalAttributes”注册为“array”类型，但在视图助手中属于“字符串”类型 "TYPO3\CMS\Fluid\ViewHelpers\Form\TextfieldViewHelper"

【问题讨论】：

标签： typo3 parsley.js powermail

【解决方案1】：

我在模板中找不到解决方案，因为错误 ID 是由欧芹验证设置的。所以我添加了这个 jQuery JavaScript。因为我覆盖了一些 powermail 模板，所以 jQuery 选择器可能会有所不同。

$('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);
        }
    });
});

【讨论】：

【解决方案2】：

你可以使用data="{describedby: 'error'}"这样的数据属性

【讨论】：

结果为@987654323@，但我需要aria-describedby="parsley-id-12" 形式的Aria。
好的，那么您可以查看fluidtypo3.org/viewhelpers/vhs/master/Iterator/… 并查看，如果工作... additionalAttributes="{v:iterator.merge(a: {aria-describedby:'error'}, b: '{vh:Validation.ValidationDataAttribute(field:field)}}', useKeys: 1)}" 未测试！您可能需要先使用 f:variable 导出它们以获得更好的可读性（自 TYPO3 CMS 8.7 LTS 起可用，不知道您使用的是哪个版本）。
谢谢你。我对 EXT:vhs 做了一些类似的操作并添加了 additionalAttributes="{vhs:iterator.merge(a: {aria-describedby:'error'}, b: '{vh:Validation.ValidationDataAttribute(field:field)}', useKeys: 1)}" 。这可行，但现在“错误”不是欧芹创建的 id。我需要aria-describedby="parsley-id-12"
也许additionalAttributes="{vhs:iterator.merge(a: {aria-describedby:'parsley-id-{field.uid}'}, b: '{vh:Validation.ValidationDataAttribute(field)}', useKeys: 1)}" 能解决问题？不确定，但 12 似乎是 uid。
感谢您的这个想法。错误 ID 似乎来自 parsley.js 而不是来自 TYPO3 字段。也许缺少可访问性必须在 parsley.js 中修复

【解决方案3】：

似乎在当前的 parsley.js 版本 2.9.1 中已修复。 Parsley 现在正在添加 describe-by 属性。

此拉取请求中描述了问题：https://github.com/guillaumepotier/Parsley.js/pull/1280

当前的 Powermail 版本 7.3.1 与过时的 parsley 版本 2.7.2 一起提供。所以你必须自己添加当前的 parsley.js 版本。

【讨论】：