Status icon accessibility

[gcamacho079]

Description

Adds a new default "Status" column to relevant tables, and updates instances of standalone status icons to use adjacent text.

This also fixes issues with the color contrast of the status icons on hover/selected/focused states because the adjacent text always meets 4.5:1 contrast.

Related issues

Resolves DEV-436, DEV-470, DEV-559
Fixes final issue in #6916

[linear]

DEV-436 Status icons in element status select are not contrasted from hover/focus background

Entry and category index pages

When hovering over or focusing on options in the status select dropdown, icon color contrast against background is very low

Icon colors should turn white on hover or focus to maintain a 3:1 or greater contrast ratio against the background

Resolves CMS-107

Screen Shot 2022-04-05 at 2.48.30 PM.png

DEV-470 Element status shapes do not have an accompanying legend

.element.hasstatus

Users can turn on status shapes in order to distinguish between status in a way that doesn't depend on color vision. However, there is no accompanying legend or text that allows users to learn and understand the shapes.

Solution #1:

Status icons are always used in badges, and always have accompanying text (see this example on CodePen). This might require dropping the status below the element title on index pages and in element selection fields.

Solution #2:

Legends on all pages where status indicators exist (the legend can be hidden in an expandable region on page load). On Edit screens, the legend might exist below the meta details sidebar. On element index screens, it might be below the sources navigation.

Resolves CMS-128

DEV-559 Status indicator is difficult to see when element is selected inside Element Selector Modal

Page Area:

Element selector modal

Issue Description:

When a user has selected an element from the modal, the graphic indicating status may no longer be visible on top of the darker background

Action:

Add a border around the indicator, or add text alongside the indicator to render is decorative

Screenshot/Code Snippet:

Screen Shot 2022-04-27 at 10.02.17 AM.png

Resolves CMS-199