Problem/Motivation

When Claro is enabled by default, some of the buttons in the Webform UI have very insufficient color contrast.
The contrast ratio is 1.47 out of a required 4.5
Text color #333333 against background of #003cc5

screenshot of bug

Steps to reproduce

  • Fresh Drupal 9 site.
  • Enable Claro, use as admin theme.
  • Enable Webform and Webform UI modules.
  • Create a new Webform.
  • Click to “+ Add element”
  • Black text on blue buttons on the “Select an element” modal.

Proposed resolution

I suggest having white text against the blue background like many of the other buttons in the UI

I tagged this issue with Needs issue summary update so others can weigh in on solution and decide on priorities.

CommentFileSizeAuthor
#12 webform-button-contrast-3195764-12.patch843 bytesdwisnousky
#10 webform-button-contrast-3195764-10.patch1.22 KBdwisnousky
claro-webform-a11y-button.png187.44 KBvolkswagenchick
#3 3225151-3.patch843 byteskostyashupenko

Issue fork drupal-3225151

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

volkswagenchick created an issue. See original summary.

volkswagenchick’s picture

volkswagenchick
she/her
Primary language English
Location San Francisco Bay Area
commented
Issue tags: +Accessibility

Adding Accessibility tag for wider reach.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Active » Needs review
StatusFileSize
new 3225151-3.patch843 bytes

Status: Needs review » Needs work

The last submitted patch, 3: 3225151-3.patch, failed testing. View results

volkswagenchick’s picture

volkswagenchick
she/her
Primary language English
Location San Francisco Bay Area
commented 
+++ b/core/themes/claro/claro.info.yml
@@ -124,6 +131,9 @@ libraries-extend:
+  core/jquery.ui.dialog:

This might not be the best approach as this appears to be deprecated code in Drupal 10 based on the automated test results.

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

bartlangelaan opened merge request !1330

bartlangelaan’s picture

bartlangelaan
Primary language Dutch
Location Netherlands
commented
Related issues: +#3113400: Deprecate more jQuery UI library definitions

In Drupal 9.2.x, multiple core libraries were deprecated. One of them is jquery.ui.dialog. It was deprecated in #3113400: Deprecate more jQuery UI library definitions (change record: #3156376).

Previously, if a module required core/jquery.ui.dialog, 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 core/jquery.ui.dialog is possibly broken since Drupal 9.2, as is the case with Webform. Some libraries that were not loaded before, are now loaded again.

The long-term fix is for Webform to not depend on the core/jquery.ui.dialog library. I have opened a task in the Webform issue queue: #3245046: Remove dependency on jQuery UI.

However, while the jquery.ui.dialog library is deprecated in 9.2, it is still supported until Drupal 10. That's why I think the patch provided is the right approach. It can simply be removed when Drupal 10 is released.

I believe that the libraries-extend part of the patch is not needed anymore, which is why I have opened a new MR. It will probabily fail automated tests on the fact that it overwrites a deprecated library - while I think it should be allowed in cases like this.

bartlangelaan’s picture

bartlangelaan
Primary language Dutch
Location Netherlands
commented
Status: Needs work » Closed (duplicate)
Related issues: +#3195764: Modules depending on jQuery UI have broken styling since Drupal 9.2

Investigating further, it looks like this issue is a duplicate of #3195764: Modules depending on jQuery UI have broken styling since Drupal 9.2. I have added the Webform problem to the issue summary there.

dwisnousky’s picture

dwisnousky commented
Version: 9.3.x-dev » 9.2.x-dev
Status: Closed (duplicate) » Patch (to be ported)
StatusFileSize
new webform-button-contrast-3195764-10.patch1.22 KB

Got messed up w/ text editor - will fix then add correct patch

dwisnousky’s picture

dwisnousky commented

Note: Added patch for our team to use while we're still on Drupal version 9.2 w/ PHP version 7.4

dwisnousky’s picture

dwisnousky commented
StatusFileSize
new webform-button-contrast-3195764-12.patch843 bytes
bartlangelaan’s picture

bartlangelaan
Primary language Dutch
Location Netherlands
commented
Status: Patch (to be ported) » Closed (duplicate)

Hey dwisnousky,

thanks for the patch! However, this issue is a duplicate of #3195764: Modules depending on jQuery UI have broken styling since Drupal 9.2. Can you try out the patch available there?

If that patch works for you, you can change the status of that issue to Reviewed & tested by the community. Then a maintainer can take a look at it, and eventually fix it for Drupal 9.3.

I will close this issue again, so the focus is back on #3195764: Modules depending on jQuery UI have broken styling since Drupal 9.2.