Alert messages in Open Social are inaccessible [#3171775]

Problem/Motivation

Alerts have a clickable dismiss icon. However, we use a link tag (a) instead of a button (button) element for these dismiss buttons. This causes them not to be included in standard keyboard navigation.

Additionally the close button is usually at the start of the alert which is confusing for people using screenreaders. The close button is announced before the content that it closes.

The system messages alert implementation also adds the role="alert" which should not be used for our alert messages but should be used for warnings that are updated in real-time (for example for interaction using JavaScript). This is not the case for our system messages or form errors.

From: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Al...

The most important thing to know about the alert role is that it is for dynamic content. It is perfect for situations such as when a user fills out a form and JavaScript is used to add an error message - the alert would immediately read out the message. It should not be used on HTML where the user hasn't interacted with it. For example, if a page loads with multiple visible alerts scattered throughout, none would be read because they are not dynamically triggered.

Steps to reproduce

Go to the user login page and fill in an incorrect username or password. You now see an alert telling you your login credentials are invalid. Pressing the tab keys you're unable to select the little cross for the alerts that allows you to dismiss the alerts.

Proposed resolution

In the following files in socialbase:

fieldset.html.twig
alert.twig
inline-form-error.twig
datetime-wrapper.html.twig
form-element.html.twig
status-messages.html.twig

Change the element for the close icon from a link to a button.
Move the button beneath the alert content
Ensure the alert container does not have a role="alert" attribute

The files with the .twig extension are for the styleguide and do not need renaming.

User interface changes

Alerts are now properly dismissible with the keyboard. Additionally, assistive technology will read the contents of the alert before suggesting to dismiss it.