Skip to content

Make always-visible block icon accessible and usable #11669

@chrisvanpatten

Description

@chrisvanpatten

In #11600, we made the UI always show the block icon.

48197149-ba743e00-e34c-11e8-8d83-581bceffe379

However it's being displayed in a low opacity state, with the idea being that it's not an active button like the block type switcher.

However, I would argue that in this case, the icon is serving an entirely different purpose than the block switcher button: it's a visual label, which helps indicate/reinforce the current block.

Removing the dropdown arrow changes the context of the icon entirely. Lowering the opacity, as a way of further reinforcing a disabled state, makes the icon inaccessible as a visual aid for indicating the current block.

Further, I would argue that it sends a confusing message. The dimmed block icon can be easily interpreted as a reflection of the block's own state, suggesting the block itself is disabled.

I have a few potential ideas:

  1. Simply show the block icon at full opacity, without the dropdown icon
  2. Include the full switcher, and make the switcher icon appear visually disabled when hovered
  3. Continue using the low opacity but still include the dropdown arrow so it's clearer that it's the dropdown UI that's disabled, not the block in some way
  4. Separate the block icon and switcher into two toolbar buttons, only showing the switcher icon when it has available options, and always showing the block icon at full opacity

Fundamentally, what's the point of always showing the icon if a certain subset of users can't see it?

Metadata

Metadata

Assignees

No one assigned

    Labels

    General InterfaceParts of the UI which don't fall neatly under other labels.Needs Design FeedbackNeeds general design feedback.[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions