From f9a1b4846c373daa54a4d6d7c1403ec5336606ad Mon Sep 17 00:00:00 2001
From: Blake V <87083504+bvandercar-vt@users.noreply.github.com>
Date: Wed, 26 Jun 2024 14:36:09 -0600
Subject: [PATCH] a11y(Alert): give Alert alertdialog role (#6846)

---
 packages/core/src/components/alert/alert.tsx   |  1 +
 packages/core/src/components/dialog/dialog.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
index aca45e912b..84d21563df 100644
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -172,6 +172,7 @@ export class Alert extends AbstractPureComponent<AlertProps> {
         return (
             <Dialog
                 {...overlayProps}
+                role="alertdialog"
                 className={classNames(Classes.ALERT, className)}
                 canEscapeKeyClose={canEscapeKeyCancel}
                 canOutsideClickClose={canOutsideClickCancel}
diff --git a/packages/core/src/components/dialog/dialog.tsx b/packages/core/src/components/dialog/dialog.tsx
index 1c7347aacb..6e07ced978 100644
--- a/packages/core/src/components/dialog/dialog.tsx
+++ b/packages/core/src/components/dialog/dialog.tsx
@@ -65,6 +65,11 @@ export interface DialogProps extends OverlayableProps, BackdropProps, Props {
      */
     isCloseButtonShown?: boolean;
 
+    /**
+     * @default "dialog"
+     */
+    role?: Extract<React.AriaRole, "dialog" | "alertdialog">;
+
     /**
      * CSS styles to apply to the dialog.
      *
@@ -128,7 +133,7 @@ export class Dialog extends AbstractPureComponent<DialogProps> {
     }
 
     public render() {
-        const { className, children, containerRef, style, title, ...overlayProps } = this.props;
+        const { className, children, containerRef, style, title, role = "dialog", ...overlayProps } = this.props;
 
         return (
             <Overlay2
@@ -143,7 +148,8 @@ export class Dialog extends AbstractPureComponent<DialogProps> {
                 >
                     <div
                         className={classNames(Classes.DIALOG, className)}
-                        role="dialog"
+                        role={role}
+                        aria-modal={overlayProps.enforceFocus ?? Overlay2.defaultProps?.enforceFocus}
                         aria-labelledby={this.props["aria-labelledby"] || (title ? this.titleId : undefined)}
                         aria-describedby={this.props["aria-describedby"]}
                         style={style}