typo3 - powermail 中可访问的错误消息
问题描述
为了使屏幕阅读器可以访问电源邮件错误消息,我必须更改 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”中属于“string”类型
解决方案
我在模板中找不到解决方案,因为错误 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);
}
});
});
推荐阅读
- javascript - 使用 redux 表单时字段中不显示值
- ruby-on-rails - Rails ActiveStorage - 通过 Rails 控制台访问
- linux - Jenkins 显示错误 chrome 无法访问
- php - 图像源在 Laravel 中不可读
- python - Python CSV Writerow 附加一个 for 循环?
- sql - 从 T-SQL 中的列中的表达式获取特定字符串
- php - 如何为调用外部 API 的 Laravel Artisan 命令编写 PHPUnit 测试,而无需物理调用该 API?
- javascript - 本地主机与来自 MySQL 的 Django Rest 和基于 HTML 的 webclient 无法按预期工作
- c# - PC/SC-Sharp GetReaders() 抛出 InsufficientBuffer 异常
- django - Postgres EXPLAIN ANALYZE 成本估算行数大大高于实际行数。没有吸尘?