Dismissible Alert: Close button label isn't specific enough

[davidakennedy]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

In recent research with the Decision Reviews team, people who use screen readers found the dismissible alert confusing because they weren't aware it was a notification. When they encountered the close button, it said "Close notification" by default. This created some confusion.

What I expected to happen

One way to improve this is to make the close button label more specific, similar to how it's done with the modal component close button. By default, the button could say "Close [text from heading] notification". The heading, which is required on this alert, gets pulled in for more context. If it's too long or needs refining, teams can edit it, but the default would provide more context to screen readers.

Reproducing

• CSS Library version: N/A
• Device: N/A
• Browser: N/A

Steps to reproduce:

1. Open the alert in storybook
2. Open dev tools in your browser of choice
3. Note the label, which is "Close notification," the default.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

Here's a link to the research cited for the Supplemental Claims form. They are many challenges withe the specific alert, which we plan to remove entirely, but my suggestions here are to make the alert better on its own default, regardless of context or content.