Skip to content

Accessibility regression: The new buttons style prevents from identifying them as interactive user interface controls #23890

@afercia

Description

@afercia

Describe the bug
In the WordPress 5.5 block editor, the "Save draft", "Switch to draft", and "Preview" buttons have been restyled and in their normal state they now look like plain text.

For accessibility, and I'd say also for a good UI, they should be styled in a way that they can be identified as user interface controls at first glance.

In WordPress 5.4, they weren't perfect either but at least:

  • the "Save draft" button, although it missed a shape or an underline, had blue text: blue is a well established convention in WordPress for interactive controls
  • same for the "Switch to draft" button
  • the "Preview" button looked like a button, which was OK

Screenshots:

save draft preview buttons 5 4

Screenshot 2020-07-12 at 15 02 58

Instead, now in WordPress 5.5 they look like plain text:

  • in their normal state, there's no shape or underline to identify them as buttons
  • the buttons text color is a dark grey #1e1e1e which makes them look as plain text

Screenshots:

save draft preview buttons 5 5

Screenshot 2020-07-12 at 15 02 33

Recommended:

  • either restore the blue color and add an underline
  • or, preferably, make them look like buttons, because that's what they are

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackNeeds general design feedback.[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Priority] HighUsed to indicate top priority items that need quick attention[Type] RegressionRelated to a regression in the latest release

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions