[#34862] - Fixed the aria-describedby not being set correctly
- Fixed in Code Base
- 27 Jul 2021
- Medium
- Build: 4.0-dev
- # 34862
- Diff
- roland-d:fix-aria-in-subform
User tests: Successful: Unsuccessful:
Summary of Changes
In a repeatable subform we replace the X with the number of the row being created, however this is not done for the aria-describedby. This fixes that and also updates the aria-describedby tag.
Testing Instructions
- Login to the Joomla 4 backend
- Go to System -> Global Configuration
- Click on Users at the bottom of the list on the left
- Click on the
Email Domain Optionstab - Click on the + to add a new row
- Inspect the Domain name input field
- Notice that it says
<input type="text" name="jform[domains][__field10][name]" id="jform_domains____field10__name" value="" class="form-control required" aria-describedby="jform[domains][__field1X][name]-desc" required=""> - Apply the PR
- Reload the page
- Click on the + to add a new row
- Inspect the Domain name input field
- Notice that it now says
<input type="text" name="jform[domains][__field10][name]" id="jform_domains____field10__name" value="" class="form-control required" aria-describedby="jform[domains][__field10][name]-desc" required="">
Actual result BEFORE applying this Pull Request
The aria-describedby is not updated
<input type="text" name="jform[domains][__field10][name]" id="jform_domains____field10__name" value="" class="form-control required" aria-describedby="jform[domains][__field1X][name]-desc" required="">
Expected result AFTER applying this Pull Request
The aria-describedby is updated
<input type="text" name="jform[domains][__field10][name]" id="jform_domains____field10__name" value="" class="form-control required" aria-describedby="jform[domains][__field10][name]-desc" required="">
Documentation Changes Required
None
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | JavaScript Repository NPM Change |
@roland-d I guess there should be a helper function to deal with all the aria-* attributes:
- aria-labeledby
- aria-discribedby
- aria-controls
- ariacontrolledby
- ...
I mean this PR is fine but since you're doing this maybe patch all the cases in one unique way?
PS What I mean was something like:
const updateAria = (sourceElement, targetElement) => {
[].slice.call(sourceElement.attributes)
.filter(attribute => attribute.startsWith('aria-'))
.map(attr => targetElement(attr, sourceElement.getAttribute(attr);
}
// Call it like
updateAria(source, target);| Title |
|
||||||
@brianteeman I have no idea where that came from, but it has to be aria-describedby. I updated the text to reflect the correct name.
@dgrammatiko I don't mind doing all the cases if someone can tell me what they are and where to find them. I just found this as I am having troubles with subform and this stood out.
MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA is not very helpful as there's no list with all the attributes, or I couldn't find it. Also looking at my code the .map(attr => targetElement(attr, sourceElement.getAttribute(attr); should update the target element attribute to the new state, so it needs a bit more code there...
please remember that the first rule of aria is not to use it (unless you have to)
please remember that the first rule of aria is not to use it (unless you have to)
@brianteeman you're right but we are not adding aria, we are copying/patching any existing attributes from the original form element to reflect the copied version.
was just a reminder to those that know and possibly new information for those that dont
I have tested this item
Works as described, and the next field added is 11.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34862.
| Status | Pending | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-07-27 18:06:36 |
| Closed_By | ⇒ | wilsonge | |
| Labels |
Added:
NPM Resource Changed
?
|
||
Thanks!
/me confused you write
aria-controlledbybut the expected result showsaria-describedby