fix(ui-alerts,console): remove Alert live-region role warning

[ToMESSKa]

INSTUI-5131

ISSUE:

• Alert warns that your live region must have role="alert", but role="alert" means assertive per WAI-ARIA, so even when you'd set liveRegionPoliteness="polite" (non-assertive), you got a warning asking for role="alert". It was likely a leftover before the liveRegionPoliteness prop was added. GitHub issue: Alert wants role="alert" added to live region #2276

Setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true". [...] Dynamic changes that are less urgent should use a less aggressive method, such as including aria-live="polite" or using an other live region role like status.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role

TEST PLAN:

• run it locally
• add this to packages/__docs__/src/index.html after line 4 (webpack 5 doesn't provide process in the browser so typeof process resolves to "undefined" in packages/console/src/console.ts and log messages are not emitted)

     window.process = window.process || { env: {} }
    </script>
    <script>

• test this example, it should not emit a warning

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

• if you revert the fix, the warning should reappear

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2664/
Built to branch gh-pages at 2026-07-31 12:17 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

⚠️ Changes detected.

Status	Count
Unchanged	0
Changed	1
New	96
Removed	32

📊 View full report

Diff images (33)

alert.png — baseline no longer produced

avatar.png — baseline no longer produced

badge.png — baseline no longer produced

billboard.png — baseline no longer produced

breadcrumb.png — baseline no longer produced

button-and-derivatives.png — baseline no longer produced

byline.png — baseline no longer produced

calendar.png — baseline no longer produced

checkbox.png — baseline no longer produced

checkboxgroup.png — baseline no longer produced

colorpicker.png — baseline no longer produced

contextview.png — baseline no longer produced

custom-and-lucide-icons.png — baseline no longer produced

dateinput-dateinput2.png — baseline no longer produced

datetimeinput.png — baseline no longer produced

diff-demo.png — 6324 pixels differ

drilldown.png — baseline no longer produced

filedrop.png — baseline no longer produced

form-errors.png — baseline no longer produced

heading.png — baseline no longer produced

img.png — baseline no longer produced

link.png — baseline no longer produced

menu.png — baseline no longer produced

metric-pill-tag-timeselect-text.png — baseline no longer produced

options.png — baseline no longer produced

pagination.png — baseline no longer produced

progressbar.png — baseline no longer produced

select-simpleselect.png — baseline no longer produced

table.png — baseline no longer produced

tabs.png — baseline no longer produced

tooltip.png — baseline no longer produced

treebrowser.png — baseline no longer produced

view.png — baseline no longer produced

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}

[matyasf]

see my comment

[matyasf]

hmm this is not the best description, its more complicated. Please add this:

<Figure.Item>
For the liveRegion DOM element, note that the role prop adds implicit ARIA attributes, but these are not applied, unless you set liveRegionPoliteness or isLiveRegionAtomic to undefined.
</Figure.Item>

[ToMESSKa]

@matyasf liveRegionPoliteness and isLiveRegionAtomic both have default values.

65    static defaultProps = {
...
72      liveRegionPoliteness: 'assertive', 
73      isLiveRegionAtomic: false,
...
76    }

So aria-live and aria-atomic are always explicitly set even if these props are undefined, e.g.:

<div>
  <div className="alerts-container" id="live-region"></div>
  <Alert
    variant="info"
    renderCloseButtonLabel="Dismiss alert"
    liveRegion={() => document.getElementById("live-region")}
  >
    Just an alert.
  </Alert>
</div>

[matyasf]

hmm, good catch with the defaults. An explicit aria-live overrides the role's implicit value: <div role="alert" aria-live="polite"> is announced politely.
so a better description here would be:

<Figure.Item>Do not set therole prop on the liveRegion because liveRegionPoliteness and isLiveRegionAtomic overrides the set values.</Figure.Item>

@ToMESSKa no need for you to be working on this ticket, Nandi has taken it over