A11y/quick fixes

[gcamacho079]

Description

• Use aria-disabled attribute on submit button in AuthManager modal (Resolves DEV-594)
• Update Lightswitch colors to ensure > 3:1 contrast ratio for all states (Resolves DEV-580)
• Darken success color even more
• Removes un-allowed ARIA attribute from span in tabs (Resolves DEV-574)
• Remove un-allowed ARIA attribute from t9n wrapper and move to visually-hidden text inside (Resolves DEV-568)
• Adds portrait/landscape ARIA labels to orientation radio inputs (Resolves DEV-506)
• Add light focus ring mixin and use inside Image Editor modal (Resolves DEV-502)
• Add status role to unsaved changes messaging (Resolves DEV-491)
• Refocus editMetaBtn after draft edit HUD close , and make a few a11y tweaks including expanded states and aria-label (Resolves DEV-469, DEV-467)

[linear]

DEV-594 Sign in button in login modal isn't marked as disabled when password is empty

Page Area:

Login modal

Issue Description:

When no password is entered, the disabled button has a low visual opacity but has no HTML attributes identifying it as inactive

Action:

aria-disabled="true" should be set on the button when it's inactive

Screenshot/Code Snippet:

Screen Shot 2022-05-03 at 8.02.36 AM.png

Resolves CMS-226

DEV-580 When focused, the toggle button state becomes difficult to discern because contrast between the background and the handle drops

Page Area:

All toggles

Issue Description:

When focused, the handle color darkens so that its contrast ratio against the background is less than 3:1

Action:

Ensure contrast of focused toggle doesn't drop below 3:1

Screenshot/Code Snippet:

Screen Shot 2022-04-29 at 9.56.01 AM.png

Screen Shot 2022-04-29 at 9.55.20 AM.png

Resolves CMS-218

DEV-574 Alert indicator in tab with error has un-allowed ARIA attribute

Page Area:

Tab groups

Issue Description:

ARIA attributes is not allowed for an element's role

Action:

Add visually hidden text inside of the container and remove aria-label from wrapper

Screenshot/Code Snippet:

<span aria-label="This tab contains errors" data-icon="alert"></span>

Resolves CMS-213

DEV-568 Multilingual indicator wrapper uses un-allowed ARIA attribute

Page Area:

Entry pages, above translatable fields

Issue Description:

An aria-label icon is set on a div

Action:

Use visually-hidden text instead of a label on the div itself

Screenshot/Code Snippet:

<div class="t9n-indicator" title="This field is translated for each site." aria-label="This field is translated for each site." data-icon="language"></div>

Resolves CMS-204

DEV-505 Image crop constraints are not keyboard accessible

Image crop constraints are built using clickable divs, which are not accessible to keyboard users

Crop constraints should be built using a set of radio buttons

Resolves CMS-152

Screen Shot 2022-04-18 at 9.51.54 AM.png

DEV-502 Focus indicator in Image Editor is not contrasted enough against dark gray background

The focus indicator inside the Image Editor is currently only 1.79:1 against the modal background

The focus outline should be lightened so that it has a 3:1 ratio against the modal background

Screen Shot 2022-04-18 at 9.04.35 AM.png

Resolves CMS-149

DEV-491 "Showing your unsaved changes." status message is not announced for screen reader users

Where: Edit screens and slideouts

The message identifying that the changes are unsaved and can be discarded appears visually, but is not read by screen readers.

This element should be wrapped in an ARIA live region

Screen Shot 2022-04-14 at 12.32.53 PM.png

Resolves CMS-141

DEV-469 When editing draft settings, focus is not managed on element close

When a user opens the menu to navigate between drafts and versions - then closes the menu via ESC or submitting the form - focus is not returned to the triggering element

Return focus to menu trigger on close.

<button type="button" class="btn edit icon" title="Edit draft settings"></button>

Screen Shot 2022-05-02 at 1.58.38 PM.png

Resolves CMS-147

DEV-467 "Edit draft settings" button does not have appropriate state information based on functionality

Edit element banner - draft mode

The button acts as a disclosure trigger, but does not have the appropriate ARIA attributes to signal its purpose. Add aria-expanded attribute and toggle between false/true on open/close

<button type="button" class="btn edit icon" title="Edit draft settings" data-axe-pro-tab-stop-index="2"></button>

Resolves CMS-125

[linear]

DEV-506 Portrait and lanscape input elements do not have labels

Portrait and landscape elements do not have a programmatically determined name

Visually-hidden labels should be added for each input

Resolves CMS-153

[brandonkelly]

Nice!