From 5dc57a0b00a201674718c6a92efa34403293f51d Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Tue, 22 Sep 2020 09:56:41 -0500
Subject: [PATCH] feat(modal) support alertdialog aria role

---
 src/Modal/Modal.stories.js |  1 +
 src/Modal/Modal.svelte     | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/Modal/Modal.stories.js b/src/Modal/Modal.stories.js
index cd01ff3a..c89b772e 100644
--- a/src/Modal/Modal.stories.js
+++ b/src/Modal/Modal.stories.js
@@ -16,6 +16,7 @@ export const Default = () => ({
     open: boolean("Open (open)", true),
     passiveModal: boolean("Without footer (passiveModal)", false),
     danger: boolean("Danger mode (danger)", false),
+    alert: boolean('Alert mode (alert)', false),
     shouldSubmitOnEnter: boolean(
       "Enter key to submit (shouldSubmitOnEnter)",
       false
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 263bab12..0e61a918 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -17,6 +17,12 @@
    */
   export let danger = false;
 
+  /**
+   * Set to `true` to enable alert mode
+   * @type {boolean} [alert=false]
+   */
+  export let alert = false;
+
   /**
    * Set to `true` to use the passive variant
    * @type {boolean} [passiveModal=false]
@@ -147,8 +153,19 @@
 
   $: modalLabelId = `bx--modal-header__label--modal-${id}`;
   $: modalHeadingId = `bx--modal-header__heading--modal-${id}`;
+  $: modalBodyId = `bx--modal-body--${id}`;
   $: ariaLabel =
     modalLabel || $$props["aria-label"] || modalAriaLabel || modalHeading;
+
+  let alertDialogProps = {};
+  $: if (alert) {
+    if (passiveModal) {
+      alertDialogProps.role = "alert";
+    } else if (!passiveModal) {
+      alertDialogProps.role = "alertdialog";
+      alertDialogProps["aria-describedby"] = modalBodyId;
+    }
+  }
 </script>
 
 <div
@@ -182,6 +199,7 @@
   <div
     bind:this="{innerModal}"
     role="dialog"
+    {...alertDialogProps}
     aria-modal="true"
     aria-label="{ariaLabel}"
     class:bx--modal-container="{true}"
@@ -230,6 +248,7 @@
       {/if}
     </div>
     <div
+      id="{modalBodyId}"
       class:bx--modal-content="{true}"
       class:bx--modal-content--with-form="{hasForm}"
       class:bx--modal-scroll-content="{hasScrollingContent}"