Improve accessibility of status message component

[benjystanton]

Following some accessibility recommendations and some rough implementation notes about how to improve the accessibility of the status message component.

I'm going to create a branch and start trying to implement some of the changes, so they can be reviewed and agreed.

Including…

• Updating the component
• Updating the component documentation page

[benjystanton]

Changes so far…

Docs page

• expanded the accessibility advice
• added the HO design system date mark-up to examples that a date

Component

• Removed an extra div
• added a h2 and tweaked CSS styles for narrow viewports
• added role="region"
• added aria-labelledby="hods-status-message-status"
• added id="hods-status-message-status" to associate the region with the h2

Next steps

• review from developer to make sure changes to React are done correctly (probably not!)
• remove h2 from instances of component if there is no other content
• Check with accessibility assurance team
• Check content with content designer
• Decide how best to style h2 on narrower screens because switching to h2 does cause visual difference

[mgifford]

@benjystanton did those get moved to https://design.homeoffice.gov.uk/design-system/components?name=Status%20message#MultipleActions%20no%20extra%20content-example-html?

[benjystanton]

Hi @mgifford, I'm sorry but I've left the Home Office and my memory/knowledge if this is hazy. I don't believe we ever made all of these changes. I think some of the changes were felt to be a bit opinionated, and we didn't necessarily want to force them into every instance of the component every time (even if they did make sense for my scenario).