Problem/Motivation
jQuery UI 1.14.1 has been released three days ago: https://github.com/jquery/jquery-ui/releases/tag/1.14.1. It is fixing a few bugs and in particular it is adding an option for setting the heading level for dialog modal titles. In Drupal titles are still just wrapped in a span
element which is semantically wrong.
Steps to reproduce
Proposed resolution
Update to jQuery 1.14.1(*got updated in #3493146: Update all JavaScript dependencies which cause no changes- Use the
uiDialogTitleHeadingLevel
option available with jQuery UI 1.14.1 by setting it touiDialogTitleHeadingLevel: 1
updatingcore/misc/dialog/dialog.jquery-ui.js
In regards of point 2, with the default value of 0
the dialog modal would stick to using the span
element for wrapping the title
element. In the issue summary of the corresponding issue https://github.com/jquery/jquery-ui/issues/2271 i've provided a few links to a discussion and more resources. But it has to be noted, and i am there in line with james scholes who is an a11y engineer and blind screenreader user, if you are in a dialog modal which is using the dialog
element and or the aria-modal
attribute (which drupal does since 10.3.0/11.0.0 by updating to jquery 1.14.0 https://github.com/jquery/jquery-ui/issues/2246) then the elements outside the dialog element are excluded from the accessibility object model and therefore the h1
is the first, and sometimes only heading element inside of the dialog modal.