New Component: Alert/Message

[richardtape]

• I have performed the cursory search

Problem description
Content editors often have the need to highlight content to inform users of something important or specific. An alert or message component provides a way for content editors to bring some piece of content to a user's attention.

Success messages (i.e. for form submissions), alerts, and error notices are examples of why this component would be useful.

Proposed solution
https://codepen.io/richardtape/pen/LYVeOPE

The role of status is used to afford users of assistive technologies the ability to be updated when a status change happens on the page in a non-obtrusive, yet still-useful way. As per: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.html

Inline SVG icons are used as part of an icon set (specifically limited to one icon in this proposed solution) to allow for the commonly used svgs to be cached and used with ease across different use-cases.

There are some small responsive behaviour considerations with regards to padding and the size of the icon for smaller screens, but in general this component appears and is used in a practically identical way regardless of screen size.

There will need to be JavaScript to hide each instance of this component on the screen. Additional considerations include the ability to 'remember' this action so that the same instance of that message isn't shown upon page refresh for a user who has explicitly closed that alert/message.

Alternatives considered
This proposed component is practically identical to the examples provided by the w3.

Additional context
https://codepen.io/richardtape/pen/LYVeOPE

Feature Review Checklist:

• HTML Markup
• CSS
• JS (if applicable)
• Responsive Behaviour
• UX
• Design
• Web Accessibility
• Documentation