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
• [x] Decide how best to style h2 on narrower screens because switching to h2 does cause visual difference