[#45429] - Dialog headline title
- New
- Medium
- Build: 5.3-dev
- # 45429
Steps to reproduce the issue
- Open any dialog (e.g. during the installation changing the language or the batch modal in com_content backend)
- Inspect the dialog/headline with your browser developer tool
Expected result
- Dialog has
aria-labelledby="xxx"pointing to the headline of the dialog
Actual result
- No pointers to the headline
Additional comments
Issue was mentioned by @exlemor and confirmed by @brianteeman in this PR, so probably you have an idea how to solve this?
Current status is: Dialogs are generated in this file as web component. Specific in line 188 the dialog element is created. I think the attributes has to be added when there is a header in line 206.
Now here is the challenge: the headline needs an ID, which is not that easy, especially if there are more than one dialog at the page. Do we need to remember how many times a dialog is created?
Any idea?
//cc @Fedik as you know the dialog I guess :-)
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
a11y
|
||
| Labels |
Added:
Information Required
|
||
Most of these about custom-made modals, with divs.
The native dialog should be pretty accessible on its own.
Having an extra aria on them looks like nice to have, but not requirement.
We can add aria-label, equal to the header (when it non empty), or aria-labelledby pointing to header.
But it sounds like unneeded complication.
| Labels |
Removed:
Information Required
|
||
it is a requirement
No one said that, in the linked articles about dialog (NOT div role=dialog) element.
But we can add.
No one said that in the linked articles about dialog (NOT div role=dialog) element.
But we can add.
it doesnt say that having an alt description on an image is a requirement in the specification of the img element either but it is still an accessibility requirement
:)
Yeah, that is true 😄
FWIW even the w3c guidelines for the <dialog> element have the requirement for the title: https://www.w3.org/WAI/WCAG22/Techniques/html/H102
The dialog headline has a non-tranlated "JCLOSE" for the dismiss button.
It is missing JText::script('JCLOSE'); somewhere in PHP side
This need a clarification, there nothing about it at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog documentation