Update to jQuery 1.14.1 and use the newly added option for dialog modal headings

Created on 2 November 2024, about 2 months ago

Problem/Motivation

jQuery 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

  1. Update to jQuery 1.14.1
  2. Add to core/misc/dialog/dialog.jquery-ui.js right after line 40 uiDialogTitleHeadingLevel: 1

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 jquery 1.14.1 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.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

📌 Task
Status

Active

Version

11.0 🔥

Component

javascript

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇩🇪Germany rkoller Nürnberg, Germany

    forgot the ui in jquery ui , updated title and issue summary

  • 🇨🇦Canada mgifford Ottawa, Ontario

    I'd love to see this brought into Core. This adds some missing semantics to our work.

  • 🇩🇪Germany rkoller Nürnberg, Germany

    I'Ve updated the title and rescoped the issue proposed resolution since jquery ui 1.14.1 got updated 📌 Update all JavaScript dependencies which cause no changes Active . My initial proposed resolution by adding uiDialogTitleHeadingLevel: 1 after line 40 is wrong (tested it manually altering 11.x locally) . i was under the impression it would be a similar one liner like for adding the aria-modal functionality added for 11.0.0, but it seems not. reason is the _createWrapper method was already available in the dialog.jquery-ui.js but the _createTitlebar method is not available there yet.

  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇩🇪Germany rkoller Nürnberg, Germany

    Initially filed it as a task because of the need of updating jquery but the remaining step about changing the wrapping element of the title i would consider a bugfix.

  • Merge request !10631Resolve #3485202 "Change the dialog" → (Open) created by rkoller
  • Pipeline finished with Failed
    2 days ago
    Total: 111s
    #374485
  • 🇩🇪Germany rkoller Nürnberg, Germany

    Opened an initial MR. It is setting the option uiDialogTitleHeadingLevel that was newly introduced with jQuery UI 1.4.1 to 1 on dialog.showModal method. That way it is ensured that all dialogs modals have their title properly wrapped in an h1 instead of a span, the previous default. Since Drupal 11.0.0 and the update to jQuery UI 1.14.0 dialog modals got the aria-modal attribute added which ensures that all elements in the background of the dialog modal are removed from the accessibility object model, so the main or sometimes sole heading within a dialog modal is the title, and therefore it is advised to go with the h1 element for the title wrapper. In addition to that i've also set the margin for .ui-dialog .ui-dialog-titlebar .ui-dialog-title to zero, because the change to the h1 added an additional margin to the layout and by setting it to zero it readjusts it to the previous state of the design.

    *@rocketeerbkw worked with me on the upstream change (https://github.com/jquery/jquery-ui/issues/2271) as well as on this issue here

  • Pipeline finished with Failed
    2 days ago
    Total: 170s
    #374490
  • Pipeline finished with Failed
    2 days ago
    Total: 115s
    #374499
  • Pipeline finished with Failed
    1 day ago
    Total: 207s
    #375524
  • Pipeline finished with Failed
    1 day ago
    Total: 528s
    #375526
  • 🇩🇪Germany rkoller Nürnberg, Germany

    I was able to fix the stylelint issue but the phpunit ones i feel unable to solve and they look from my none developer perspective unrelated? the errors show in the context of package manager and i've only added an option to a javascript file? if someone else could take a look please who is more familiar with this kind of stuff. thank you.

Production build 0.71.5 2024