More quick a11y updates

[gcamacho079]

Description

• Allow elements in header element to wrap (Resolves DEV-479)
• Label context menu on edit pages (Resolves DEV-465, DEV-314)
• Set ARIA label on download button to hide extra css content (Resolves DEV-496)
• Set aria-disabled state on BaseElementSelectorModal submit button (Resolves DEV-482)
• Hide draft icon from assistive tech (Resolves DEV-453)
• Allow inputs inside copy text modals to shrink (Resolves DEV-400)
• Ensure search in subfolders container is hidden after fading out (Resolves DEV-375)
• Remove fixed width from selectize and add max-width instead (Resolves DEV-337)
• Add aria-label to new category group button (Resolves DEV-173)

[linear]

DEV-479 Action buttons overflow document width and cause horizontal scrolling at 320px viewport width

Where: Element edit screen - action button row

Action buttons cause a horizontal overflow at small screen sizes

The content should reflow onto different rows to prevent horizontal scrolling of the viewport at small screen sizes

#header #action-buttons

Screen Shot 2022-04-13 at 10.18.09.png

Resolves CMS-130

DEV-465 Revision menu does not have a programmatically-determined label

This menu element does not have an associated label.

Screen Shot 2022-04-11 at 8.26.57 AM.png

Update the component to use a disclosure menu, with the text "Revision history". A separate text node should be added outside of the menu that shows what version is selected.

Resolves CMS-124

DEV-314 Button for entry version history doesn't adequately describe purpose

Should read 'Version History', 'Revision History' or something of the like

DEV-496 "Download" button contains CSS icon content that should be marked as decorative

Where: Assets action buttons

The button text reads as "Download download"

Either the CSS element should be marked as presentational so its content is not read, or an aria-label should be set on the button itself

Screen Shot 2022-04-15 at 11.37.06 AM.png

DEV-482 The disabled state of the "Select" button in element selector modal isn't marked as disabled for screen reader users

Where: Element selector modal (.elementselectormodal)

When an element has not been selected, the button is visually disabled and does not respond to the click event. However, it isn't marked as such in the HTML The button should be given an attribute of aria-disabled="true"

<button type="submit" class="btn disabled submit" data-axe-pro-tab-stop-index="5"><div class="label">Select</div><div class="spinner spinner-absolute"></div></button>

Screen Shot 2022-04-13 at 11.01.05 AM.png

DEV-453 Draft icon in element sidebar metadata is not hidden from screen reader users

Location: Draft category/entry metadata

When reading through elements in the sidebar using a screen reader, the decorative "draft" icon is still being read

The decorative "draft" font icon should be hidden from screen reader users using aria-hidden

Resolves CMS-118

Screen Shot 2022-04-08 at 1.37.25 PM.png

DEV-400 Copy to Clipboard modal is unusable at 320px screen size

Content does not reflow at 320px screen width, making copy to clipboard modal unusable (button cannot be reached)

Use reflow techniques to prevent content clipping at 320px wide screen sizes

Resolves CMS-085

DEV-375 When "search in subfolders" input is active then hidden, keyboard can still focus on it

Keyboard focuses on invisible content after the checkbox is hidden

Instead of using opacity: 0 on the input wrapper, either:

1. set display: none on the whole container, or
2. Apply aria-hidden="true" on the container and tabindex="-1" on the checkbox input

DEV-337 Language and Formatting Locale select overflows page at 320px

Entire select dropdown overflows the main page container, causing information to be clipped Select dropdown should not overflow the page container, or cause an overflow scroll in a horizontal direction at any screen size

Screen Shot 2022-03-17 at 1.10.25 PM.png

Resolves CMS-050

DEV-173 Update "Add new category" button in Settings > Categories

Currently reads "plus add new category"