a11y fixes to alert banner

[SusannahHarris-HC]

The alert banner needs more accessibility implemented into it so that it is not missed by users on screen readers:

• [ ] please addrole="region" on the<div>element containing the dialog. This helps the banner be located on screen readers by landmark area
• [x] The content needs to be wrapped within <h> and <p> elements: <h2>A simple primary alert</h2>, and <p>- check it out!</p>
• [x] You'll probably need to adjust the css so that the font text/style doesn't change with the implementation of the heading level
• [x] the exception to the role="region" is for the red and orange alerts, which needrole="alert"

[SusannahHarris-HC]

forgot to include thatrole="region" aria-lableledby="unique-id-name" needs to be added to the <h2 id="unique-id-name>. Updated first three alert banners to include this update.

[SusannahHarris-HC]

Updates have been done, looks good