fix(composed-modal): add aria-label prop, update header semantic tags

docs/src/pages/framed/Modal/ComposedModal.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <ComposedModal open>
-  <ModalHeader title="Confirm changes" />
+  <ModalHeader label="Changes" title="Confirm changes" />
   <ModalBody hasForm>
     <Checkbox labelText="I have reviewed the changes" bind:checked />
   </ModalBody>

src/ComposedModal/ComposedModal.svelte

@@ -38,8 +38,10 @@
     afterUpdate,
     onDestroy,
   } from "svelte";
+  import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  const label = writable(undefined);
 
   let buttonRef = null;
   let innerModal = null;
@@ -55,6 +57,9 @@
     declareRef: (ref) => {
       buttonRef = ref;
     },
+    updateLabel: (value) => {
+      label.set(value);
+    },
   });
 
   function focus(element) {
@@ -119,6 +124,9 @@
 >
   <div
     bind:this="{innerModal}"
+    role="dialog"
+    aria-modal="true"
+    aria-label="{$$props['aria-label'] || $label || undefined}"
     class:bx--modal-container="{true}"
     class:bx--modal-container--xs="{size === 'xs'}"
     class:bx--modal-container--sm="{size === 'sm'}"

src/ComposedModal/ModalHeader.svelte

@@ -23,27 +23,29 @@
   import { getContext } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
 
-  const { closeModal } = getContext("ComposedModal");
+  const { closeModal, updateLabel } = getContext("ComposedModal");
+
+  $: updateLabel(label);
 </script>
 
 <div class:bx--modal-header="{true}" {...$$restProps}>
   {#if label}
-    <p
+    <h2
       class:bx--modal-header__label="{true}"
       class:bx--type-delta="{true}"
       class="{labelClass}"
     >
       {label}
-    </p>
+    </h2>
   {/if}
   {#if title}
-    <p
+    <h3
       class:bx--modal-header__heading="{true}"
       class:bx--type-beta="{true}"
       class="{titleClass}"
     >
       {title}
-    </p>
+    </h3>
   {/if}
   <slot />
   <button