Problem/Motivation
Duplicate ID's occur in webforms with rich text field with help enabled. Multiple id were detected using the a11y inspector Axe (browser tool).
The situation
- CKEditor module includes the label of the editor's parent field into various places. The JavaScript responsible for this, allows HTML to be included.
- Webform module modifies the readable label (
title) of theform-element-label.html.twigtemplate to add a help functionality inside of the label tag. A span with id is appended to the label text. - The HTML content of the label is copied by the CKEditor script (
ckeditor.js) to 3 other places on the page, including the span's id property.
Steps to reproduce
- Create a webform with a Text format field with help text.
- Analyze the webform with Axe
- Notice the error: "IDs used in ARIA and labels must be unique"
DOM snippets below taken from article body field.
<div class="form-textarea-wrapper">
...
<span id="cke_edit-body-0-value_arialbl" class="cke_voice_label">Rich Text Editor, Body field</span>
<iframe class="cke_wysiwyg_frame" title="Rich Text Editor, Body field">
<head>
...
<title data-cke-title="Rich Text Editor, Body field">Rich Text Editor, Body field</title>
DOM snippet of field label modified by Webform
<label for="edit-webform-field-value">Webform field
<span class="tooltip__text js-tooltip" id="webform-element-help">
Example help text.
</span>
</label>
Proposed resolution
Let CKEditor only copy the text portion of the label. Not allowing HTML.
Not sure where the right place to solve this, either core and webform are candidates. My first success was with core.
Remaining tasks
t.b.d.
User interface changes
Avoid problems caused by duplicate IDs for non-sighted users.