Alert wants `role="alert"` added to live region

[buckett]

Important note: if you are an Instructure employee please use Slack for bug reports/questions/feature requests. We can assist you much quicker and easier that way. If you are a third party user please ignore this message.

Background Information

Package Version(s):

10.23.0

Browser:

Chrome

OS:

MacOS

Device:

MacBook Pro

Component:

Alert

Screen Reader:

VoiceOver

Describe the Issue

When specifying a liveRegion for an <Alert> an error is put in the console unless the live region has role="alert" specified. In practice there are other ways to specify this (eg aria-live="polite") and role="alert" implies assertive announcements which can be misleading.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role

Steps To Reproduce

If you have this snippet of JSX:

        <div
          className="alerts-container"
          aria-live="polite"
          id="live-region"
        ></div>
        <Alert
          variant={alert.variant}
          renderCloseButtonLabel="Dismiss alert"
          margin="xx-small 0"
          liveRegion={() => document.getElementById("live-region")}
          liveRegionPoliteness="polite"
        >
          Just an alert.
        </Alert>

it will generate a console error.

You can see this running in:

https://codesandbox.io/p/sandbox/hungry-leftpad-pky6dg

and open the codesandbox preview console to see:

Expected Behavior

Either no error message, or documentation updated to explain why the live region needs to be assertive when defined in the DOM.

Screenshots

Additional Information

Current Workaround(s):

Just ignore the error.

Products Affected:

Are you willing to submit a PR to fix?

• Yes, I'm willing to submit a PR

Requested Priority:

Low