In Drupal 9.2.x, multiple jQuery UI libraries were deprecated. They were deprecated in #3113400: Deprecate more jQuery UI library definitions (change record: #3156376).

Previously, if a module required for example core/jquery.ui.dialog, Seven and Claro removed files that were breaking the layout. With above change, this override was removed.

This means that every module that is still depending on these deprecated libraries is possibly broken since Drupal 9.2. Some libraries that were not loaded before, are now loaded again.

The long-term fix is for these modules to not depend on the deprecated libraries. However, these libraries should still be supported until Drupal 10. That means that while the libraries should be marked deprecated, overrides and extensions on them should not be removed until Drupal 10.

Example of broken module: admin_toolbar_search
This was also the original bug report of this issue. When this module is enabled, the views modals have flickering buttons when hovering over them.
Video showing the issue: https://www.drupal.org/files/issues/2021-02-01/20210201_125018647.mp4

Example of broken module: webform
This was originally reported in issue #3225151: Webform button accessibility while Claro theme is enabled. When the webform and webform_ui modules are enabled, the + Add element modal has weird looking buttons, creating an accessibility problem.
Webform accessibility issue

Proposed resolution
Revert the part of commit 1c201591 that removes the library overrides and extensions of deprecated libraries. They should not be removed until Drupal 10, when the deprecated libraries are removed.

CommentFileSizeAuthor
#22 3195764-nr-bot.txt190 bytesneeds-review-queue-bot
#17 drupal-suppress_css_from_deprecated_libraries-3195764-16.patch10.57 KBdwisnousky
#8 drupal-suppress_css_from_deprecated_libraries-3195764-8.patch1.34 KBazinck
20210201_125018647.mp41.86 MBdjsagar

Issue fork drupal-3195764

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

djsagar created an issue. See original summary.

pameeela’s picture

pameeela commented
Title: Jerk issue on hover » Button text size changes on hover, causing a flicker effect
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Bug Smash Initiative

@djsagar what browser and OS did you use to create this screencast? I am not able to reproduce the issue on a Mac in Safari, Chrome or FF.

It looks like something may be wrong with the styles loading in your example, as the font that is rendered in the modal is not 'Lucida Sans' but the fallback 'Dejavu Sans.'

djsagar’s picture

djsagar commented
Status: Postponed (maintainer needs more info) » Needs review

Yes @pameeela i'm using Chrome in OS.

Please watch the video for reproduce the issue.

else

1. Create view.

2. click on add option then popup comes you will see the issue.

djsagar’s picture

djsagar commented
Status: Needs review » Active
pameeela’s picture

pameeela commented
Status: Active » Postponed (maintainer needs more info)

I have watched the video and as I said, the font that renders is wrong which suggests there is a problem loading the styles.

I can’t reproduce this. It does not occur when styles have loaded correctly.

Can you please check the browser console to see if there are any errors?

djsagar’s picture

djsagar commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)
azinck’s picture

azinck commented

Just a follow-up here because I've been suffering the same problem and finally had a chance to dive into it. It's caused by the inclusion of assets/vendor/jquery.ui/themes/base/theme.css on the page. The Seven theme attempts to suppress this using libraries-override in seven.info.yml, but it can still make it on the page if you have a module depending on any of the core/jquery.ui libraries. In my case it was the admin_toolbar_search module causing the issue as it has a dependency on core/jquery.ui.autocomplete, but I assume there are other modules out there doing the same.

You can fix this by updating your admin theme to add this to its .info.yml file:

libraries-override:
  core/jquery.ui:
    css:
      theme:
        assets/vendor/jquery.ui/themes/base/theme.css: false

Or, we can hopefully get contrib to use the appropriate drupal versions of these libraries (core/drupal.autocomplete).

azinck’s picture

azinck commented
Status: Closed (cannot reproduce) » Needs review
StatusFileSize
new drupal-suppress_css_from_deprecated_libraries-3195764-8.patch1.34 KB

Here's a patch to clean things up. It looks like both Seven and Claro need the same modifications. Once contrib stops using these deprecated libraries then these can be removed.

azinck’s picture

azinck commented
Version: 9.2.x-dev » 9.3.x-dev

Status: Needs review » Needs work

The last submitted patch, 8: drupal-suppress_css_from_deprecated_libraries-3195764-8.patch, failed testing. View results

bartlangelaan made their first commit to this issue’s fork.

bartlangelaan opened merge request !1362

bartlangelaan’s picture

bartlangelaan
Primary language Dutch
Location Netherlands
commented
Title: Button text size changes on hover, causing a flicker effect » Modules depending on jQuery UI have broken styling since Drupal 9.2
Component: Seven theme » theme system
Issue summary: View changes
Related issues: +#3113400: Deprecate more jQuery UI library definitions

Sorry for changing the title & issue summary, but I think the issue is bigger then just the original issue.

bartlangelaan’s picture

bartlangelaan
Primary language Dutch
Location Netherlands
commented
Issue tags: +Accessibility

Adding tag from #3225151: Webform button accessibility while Claro theme is enabled as I will close it as a duplicate.

bartlangelaan’s picture

bartlangelaan
Primary language Dutch
Location Netherlands
commented
Priority: Normal » Major
Status: Needs work » Needs review

And also changing priority to that of #3225151: Webform button accessibility while Claro theme is enabled.

Furthermore, MR !1362 has reverted the part of commit 1c201591 that has led to this bug, and also removed the deprecation warnings when overriding or extending a deprecated library.
As described in the issue summary, just overriding or extending a deprecated library should not be disallowed - only using the deprecated library should give a deprecation warning.
This MR is passing tests and can be reviewed.

dwisnousky made their first commit to this issue’s fork.

dwisnousky’s picture

dwisnousky commented
StatusFileSize
new drupal-suppress_css_from_deprecated_libraries-3195764-16.patch10.57 KB

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

socialnicheguru’s picture

socialnicheguru commented

Could we also just use this module for Drupal 8/9, https://www.drupal.org/project/jquery_ui?

Is there a benefit to the above patch over the module approach?

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3195764-nr-bot.txt190 bytes

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

mgifford’s picture

mgifford
he/him
Primary language English
commented

I would like a clear explanation about what the accessibility bug here is. Is it a contrast problem without the jQuery UI styles?

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs work » Closed (outdated)

This issue is specific to depending on libraries that were deprecated in Drupal 9, and fully removed in Drupal 10. Drupal 9 is EOL so this will not be addressed. It is unfortunate there wasn't a solution provided during Drupal 9's lifespan, but hopefully the modules impacted by this were able to mitigate the issue without too much hassle.