Make adjustments to announcements button and HUD

[gcamacho079]

Description

Makes some small fixes for the announcement button and HUD, including:

• Adding a visually-hidden text alternative for the unread message dot
• Adjusting button color for active state
• Changing DOM order so that the announcement label comes after the heading
• Changing heading levels so announcement headings are nested under a parent heading

Related issues

Resolves DEV-1049, DEV-1050, DEV-1051, DEV-1052, DEV-1053

[linear]

DEV-1049 Announcement list is not marked up as a list

Page Area:

#announcements

Issue Description:

Announcements are not contained in a list element

Action:

Use a semantic list

Screenshot/Code Snippet:

N/A

Resolves CMS-279

DEV-1050 Announcement icon is decorative, but not hidden from assistive technologies

Page Area:

.announcement-icon

Issue Description:

The announcement icon should be hidden from AT

Action:

Use aria-hidden

Screenshot/Code Snippet:

N/A

Resolves CMS-280

DEV-1051 Announcement heading structure can be improved

Page Area:

.announcement h2

Issue Description:

Announcement titles use H2 elements, but would be more easily parsed using a visually-hidden H2 titled "Announcements" with announcement titles using H3 elements

Action:

See above

Screenshot/Code Snippet:

N/A

Resolves CMS-281

DEV-1052 Announcement "vendor" comes after heading in DOM order

Page Area:

.announcement h2

Issue Description:

The vendor (i.e. Craft CMS) comes before the name of the announcement in the DOM order, meaning a user might not know the source of the announcement unless they navitgate backwards in the DOM

Action:

Reverse order for assistive tech

Screenshot/Code Snippet:

N/A

Resolves CMS-285

DEV-1053 When activating the announcement button, the icon contrast falls below the minimum contrast ratio

Page Area:

#announcements-btn

Issue Description:

The active state of the button produces a blue icon, which is only 2.9:1 against the background

Action:

Darken active-state SVG color

Screenshot/Code Snippet:

N/A

Resolves CMS-284