Expose element status to screen readers

[gcamacho079]

Description

Expose element status to screen readers user on element index pages (Resolves DEV-439, DEV-488)

Related issues

[linear[bot]]

DEV-439 Entry status is not conveyed to screen reader users

CSS shapes are used to signify element status, but no alternative text is provided for screen reader users

Utilize a method for conveying status information to screen reader users, either by applying the img role and adding alt text, or adding visually-hidden screen reader text

Resolves CMS-109

[linear[bot]]

DEV-488 The draft icon is being hidden from assistive technology when viewed in the element indexes, but it's necessary for understanding the page content

Where: Element index views

The icon is being hidden from assistive technology, but there's no other text that conveys this information to screen reader users

When an icon isn't paired with text (like in a table view), the status indicators should probably be moved into their own column and have accompanying, visible text.

Screen Shot 2022-04-13 at 3.56.01 PM.png

Resolves CMS-138

[brandonkelly]

@gcamacho079 What was the reason for moving that code to a new getStatusIconHtml() method?

[gcamacho079]

@brandonkelly I thought it might be helpful in case we needed to use it elsewhere in the code (think I may have been playing around with something like that on a local branch 🤔 ) and for readability.

[brandonkelly]

Alright, well I brought the code back inline into Cp::elementHtml() for now. Feel like there should be known additional use cases to justify adding new methods to ElementInterface, as it’s already pretty massive.