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..0bb7cc3b 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,20 @@ $: 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"; + } + if (!passiveModal) { + alertDialogProps.role = "alertdialog"; + alertDialogProps["aria-describedby"] = modalBodyId; + } + }