Problem/Motivation

It is challenging for sighted users to distinguish between an enabled and disabled url alias field in dark mode on node/add/event.

the url alias details element in the advanced sidebar on the node edit form in dark mode with the generate automatic url alias switch inactive and the url alias field underneath
the url alias details element in the advanced sidebar on the node edit form in dark mode with the generate automatic url alias switch active and the url alias field underneath disabled

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Steps to reproduce

  • Go to node/add/event, expand the URL alias detail element, and toggle the Generate automatic URL alias switch on and off.

Proposed resolution

  • It is not a WCAG failure, but the current case could be improved by simply applying progressive disclosure. If the Gin switch for generating automatic URL aliases is active, hide the text field since it is disabled anyway, while when the Gin switch is inactive, show the text field since the user is supposed to be able to enter an URL alias.
  • It is another reminder to write up an issue for core to finally deal with disabled elements by simply applying the aforementioned progressive disclosure or in case progressive disclosure is inapplicable make the component informal removing the visual affordance (for example by removing the caret on select element instead of making components semi-transparent).

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#8 BeforeFix.mp4293.34 KBdivya.sejekan
#8 AfterFix.mp4448.93 KBdivya.sejekan
#4 Screenshot 2025-07-04 at 10.29.18 AM.png34.55 KBmgifford
#3 Screenshot 2025-07-04 at 10.10.43 AM.png12.62 KBmgifford
url_alias_disabled.jpg27.94 KBrkoller
url_alias_enabled.jpg28.75 KBrkoller

Issue fork gin-3506342

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

rkoller created an issue. See original summary.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +darkmode

How we are doing it now is not sufficient for disabled input elements..

Also adding some resources on disabled form elements:

mgifford’s picture

mgifford
he/him
Primary language English
commented
StatusFileSize
new Screenshot 2025-07-04 at 10.10.43 AM.png12.62 KB

Ok, so this won't work for older browsers, but I think what you're suggesting here is essentially just:

/* Hide the label/input/description if the alias input is disabled */
.js-form-item-path-0-alias:has(input[disabled]) {
  display: none;
}

So that you just don't see the disabled form.

Light mode version with the form simplified.

What is the point of even seeing the disabled form, when the checkbox is just to enable/disable the form. It is especially hard to see in Dark Mode, but rather than fixing that for disabled form elements, why even show them?

mgifford’s picture

mgifford
he/him
Primary language English
commented
StatusFileSize
new Screenshot 2025-07-04 at 10.29.18 AM.png34.55 KB
anirudhsingh19’s picture

anirudhsingh19 commented
Version: 4.0.2 » 4.1.x-dev
Assigned: Unassigned » anirudhsingh19

Working on it!!

anirudhsingh19 opened merge request !652

anirudhsingh19’s picture

anirudhsingh19 commented
Assigned: anirudhsingh19 » Unassigned
Status: Active » Needs review

I have implemented the required functionality. Please review!!

divya.sejekan’s picture

divya.sejekan commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new AfterFix.mp4448.93 KB
new BeforeFix.mp4293.34 KB

Verified the fix MR!652 , Patch gets applied cleanly .
The fix is implemented as per the solution proposed . When the toggle is disabled the field is hidden now

RTBC ++

mgifford’s picture

mgifford
he/him
Primary language English
commented

I like it. Thanks for the before/after videos @divya.sejekan