[#48589] - [6.2] [a11y] set fancyselect labelledby attribute
- Ready to Commit
- Medium
- Build: 6.2-dev
- # 48589
- Diff
- SniperSister:6.2-fancyselect-labelfix
User tests: Successful: Unsuccessful:
- I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.
Summary of Changes
The fancyselect field uses choices.js, which creates a div box with a role="combobox" which announces it as UI element to screenreaders - however, no aria-labelledby attribute is present, so it remains unclear what the associated label for the combobox is.
Choices has a labelId attribute specifically for that usecase; if present, an aria-labelledBy attribute is appended. However, so far the fancyselect field did not set the fieldId even if a label was present and had a unique ID. This PR fixes this issue.
See https://github.com/Choices-js/Choices#labelid
Testing Instructions
- Inspect the markup of the tag selection field in the com_content backend list view using your browser dev tools
- Once the patch is applied, make sure to rebuild the NPM dependencies
Actual result BEFORE applying this Pull Request
- no aria-labelledby present:
<div class="choices" data-type="select-multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">
Expected result AFTER applying this Pull Request
- aria-labelledby set:
<div class="choices" data-type="select-multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-labelledby="filter_tag-lbl">
Link to documentations
Please select:
-
Documentation link for guide.joomla.org:
-
No documentation changes for guide.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | JavaScript NPM Change |
| Labels |
Added:
NPM Resource Changed
PR-6.2-dev
|
||
Verified that all the fancy-select fields on the article edit form now have the correct label and it is announced by a screen reader
I have tested this item ✅ successfully on 55c28fa
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
I have tested this item ✅ successfully on 55c28fa
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
One more ? please: labelId: this.select?.labels?.[0]?.id ?? '',
To be safe.
One more ? please: labelId: this.select?.labels?.[0]?.id ?? '',
Without this.select there is nothing for chosen to actually depend on. It's safe to assume it's there.
Without this.select there is nothing for chosen to actually depend on
Correct, but I mean, need extra check for missing label.
Hm, it is labels array, maybe it always exists in DOM element.
Then just ignore me 😃
Hm, it is labels array, maybe it always exists in DOM element.
It's a node list - without labels it's just empty but present anyways
richard67
- | Title |
|
||||||
I have tested this item ✅ successfully on 55c28fa
Tested with JBT
- Seen before PR in article edit view, the category and the tags fields
div class="choices"w/oaria-labelledby - Applied PR with Patch Tester and
npm run build -- -a - Category field has additional
aria-labelledby="jform_catid-lbl"and tags choices field has additionalaria-labelledby="jform_tags-lbl" - Selecting and saving category and one or more tags are still working
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
I have tested this item ✅ successfully on 55c28fa
Tested with JBT
- Seen before PR in article edit view, the category and the tags fields
div class="choices"w/oaria-labelledby - Applied PR with Patch Tester and
npm run build -- -a - Category field has additional
aria-labelledby="jform_catid-lbl"and tags choices field has additionalaria-labelledby="jform_tags-lbl" - Selecting and saving category and one or more tags are still working
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
I have tested this item ✅ successfully on 55c28fa
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
I have tested this item ✅ successfully on 55c28fa
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
I have tested this item ✅ successfully on 55c28fa
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
Every fancy select I checked gets aria-labelledby pointing at its label. One edge case: in a newly added subform row the attribute points at an id that no longer exists (suggestion below).
Verification
| Check | Before | With PR |
|---|---|---|
| Articles list, Tags filter (testing instructions) | no aria-labelledby |
✅ aria-labelledby="filter_tag-lbl"; same for Category, Access, Author |
| Article edit, Category / Tags | accessible name empty (combobox) |
✅ combobox "Category" / combobox "Tags" |
| Tag edit, menu item, module, user, Global Configuration, new custom field (8 more fancy selects) | – | ✅ all reference an existing label |
| Add a new tag by typing + save article | – | ✅ still works |
| Subform row loaded from the saved plugin | – | ✅ references its own label |
| Subform row added with "+" | no aria-labelledby |
eslint on the changed file: clean.
Suggestion — new subform rows reference the template id
Plugins → System - HTTP Headers → Content Security Policy → add a row. The new "Policy Directive" select gets
aria-labelledby="jform_params__contentsecuritypolicy_values__contentsecuritypolicy_valuesX__directive-lbl"
but its label is …contentsecuritypolicy_values0__directive-lbl. joomla-field-subform inserts the row first (Choices is initialised and reads the label id) and renames the ids afterwards, so the reference is left on the X placeholder. The accessible name stays empty as before the PR, but the markup now contains a broken reference until the form is saved and reloaded.
Keeping the reference in sync where the subform script renames the label fixes it (tested: all rows, saved and new, are announced as combobox "Policy Directive"):
if (lbl.id) {
const oldLblId = lbl.id;
lbl.setAttribute('id', `${idNew}-lbl`);
row.querySelectorAll(`[aria-labelledby="${oldLblId}"]`).forEach((el) => {
el.setAttribute('aria-labelledby', lbl.id);
});
}(media_source/system/js/fields/joomla-field-subform.w-c.es6.js, last block of fixUniqueAttributes().) Could also be a follow-up PR.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48589.
note its a combobox when its a multselect like tags but its a regular listbox when its a single select like categories
I have confirmed the bug by using a screen reader on the article edit page and observed that the label is not announced for the category or tags fields