Contrib.social

UX issue with disabled blocks in block admin UI.

Open on Drupal.org →
Created on 25 February 2020, over 4 years ago
Updated 17 March 2023, over 1 year ago

Problem/Motivation

In this issue: #2513534: Remove the 'disabled' region from Block UI → , a new "disabled" block state was added. This issue also added CSS that makes disabled blocks in the Block admin UI semi-transparent.
However, this styling was not present in any core themes, as Stable provided an earlier version of the stylesheet. Once #3115223: Remove Stable as a base theme of core themes → , core themes in Drupal 9 will see this new style.

There's a UX problem with this style: making this semi-transparent tells the user that the interactive elements are disabled, and they are not. The block is in a disabled state -- but the interactive elements for that block are still active (and should be). The block being disabled should be represented in another way (or not at all if it's deemed sufficient to have the dropbutton say "Enable"

The styling results in an additional problem in Bartik and Umami: it results in insufficient contrast. This may be less of a concern since those are not admin themes and it can be determined in this issue if that needs to be a concern.

Claro

Seven

Bartik

(Contrast is not accessible - 4.15:1)
Umami

Contrast is not accessible - 3.82:1

Proposed resolution

Determine a more UX friendly approach and implement.

Remaining tasks

Note that if work begins on this before #3115223: Remove Stable as a base theme of core themes → lands, the styling this issue is addressing will not be visible unless Stable is configured to not override block.admin.css

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Needs work

Version

10.1 ✨

Component
Block  →

Last updated 2 days ago

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

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

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • 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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment almost 2 years ago →
    🇮🇳India sonam.chaturvedi Pune

    Verified and tested patch #17 on 10.1.x-dev. Patch applied cleanly and works fine.

    Test Result:
    Only the block name is styled as disabled. All the other columns and interactive elements -i.e. Region, "Enable" button are in style indicating that they are accessible/enabled.

    Please refer attached before and after screenshots for Claro, Olivero and Seven themes.

    Accessibility review required.

  • Status changed to RTBC over 1 year ago
  • Comment over 1 year ago →
    🇺🇸United States smustgrave

    Actually since I did not work on the fix, just the test case I think I'm still okay to review this one. And since it's not causing an accessibility issue per #22 think it's good.

  • Status changed to Needs work over 1 year ago
  • Comment over 1 year ago →
    🇫🇮Finland lauriii Finland

    There are still a few things that we probably should still iterate on:

    The "disabled" style still applies to the table drag handle. I believe it might be confusing because at first I thought for real that maybe it is disabled because it was the only interactive element on the row that was indicating it's disabled.

    When hovering a disabled table row, different columns are now using different background color.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024