a11y(Alert): give Alert alertdialog role (#6846)

palantir · Jun 26, 2024 · f9a1b48 · f9a1b48 · svc-palantir-github · Jun 26, 2024
1 parent 605d318
commit f9a1b48
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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}