Notification Bar: improve a11y when notification opens.

[amychurchwell]

Description

[Consideration from work in PR #431]

We should consider a11y when a notification is programatically opened using JS.

What should happen:

• Should focus move to the notification title when it is displayed?
• Should that be required, or optional?
• Do we need any additional ARIA information?

[stephaniehobson]

Could ARIA live regions be useful here? (I have not actually looked at the code so use your best judgement).

[craigcook]

(originally filed as a separate issue):

The notification bar includes an optional "close" button (for when it's used as a dismissable dialog) but our examples don't have a readable text label in that button. A screen reader might skip over the button entirely, or announce it without stating what it does since its purpose isn't clear without a label. The button should have an accessible label like "Close notification" that can be visually hidden.

We're also showing static examples with a button that wasn't inserted via JavaScript, so the button in those examples does nothing. Of course they're just static examples, but that isn't made clear by the documentation so someone could easily copy-paste the markup and plonk a static bar on their site with a non-functional, inaccessible button that shouldn't be there. We can probably solve this just by adding more usage guidelines in the docs.

We could also add an aria role to the bar: role="dialog" for non-critical messages and role="alertdialog" for critical errors. Maybe some other aria bits, like the aforementioned live regions.

[craigcook]

Labels are added to the example buttons in #579