Better Dark Mode Support for Disabled Elements

Disabled controls are legitimate HTML, and poorly styled disabled controls will remain a Drupal accessibility problem.

I'm not sure this is the best approach, but worth putting it out for consideration.

/* 1. Define variables for both modes */
:root {
  --control-disabled-text: #5C6670;
  --control-disabled-border: #87909A;
  --control-disabled-background: #E7E9EB;
}

[data-drupal-theme="dark"] {
  --control-disabled-text: #AEB6BF;
  --control-disabled-border: #76818C;
  --control-disabled-background: #30363D;
}

/* 2. Target only form-related elements to prevent affecting layout containers like .region-sticky__items__inner */
input:disabled, 
button:disabled, 
select:disabled, 
textarea:disabled,
[role="checkbox"][aria-disabled="true"],
[role="button"][aria-disabled="true"] {
  color: var(--control-disabled-text);
  border-color: var(--control-disabled-border);
  
  /* Layered background: Red line (gradient) on top of the dynamic background color */
  background: 
    linear-gradient(to top left, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px)),
    var(--control-disabled-background);

  /* CRITICAL: Allows the gradient to render on native checkbox/radio inputs */
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--control-disabled-border);
  display: inline-block;
  vertical-align: middle;
}

/* 3. Accessibility: Windows High Contrast Mode support */
@media (forced-colors: active) {
  input:disabled, button:disabled, [aria-disabled="true"] {
    forced-color-adjust: auto;
    color: GrayText;
    border-color: GrayText;
    background: none; /* Gradients are usually disabled in HCM for clarity */
  }
}

The red line on black probably doesn't meet color contrast....

I failed to create a MR again, so just uploaded this patch. I may have luck with GitLab tomorrow.

This is an improvement. Thanks! I do think that there will be better patterns for enabled/disabled form elements at some point, but until there is some emerging consensus, I think this is a step forward. Disabled elements should be visible, should be clearly be different than enabled elements.

Adrian's point here is good https://adrianroselli.com/2024/02/dont-disable-form-controls.html

Don't disable form elements. But there are times when it is needed.

A possible follow-up from https://uxknowledgebase.com/the-disabled-state-in-ui-design-8c091d72868 is:

Add cursor: not-allowed, it is an additional visual cue

More reading on disabled elements for those who are keen:

• https://a11y.cafe/posts/disabled
• https://www.designsystemscollective.com/designing-disabled-buttons-that-...
• https://uxdesign.cc/what-should-be-the-contrast-level-of-inactive-button...
• https://medium.com/design-bootcamp/the-color-contrast-dilemma-of-disable...