Merge pull request #411 from bestguy/modalFixes

Modal fixes

src/Modal.svelte

@@ -21,7 +21,8 @@
   import {
     conditionallyUpdateScrollbar,
     getOriginalBodyPadding,
-    setScrollbarWidth
+    setScrollbarWidth,
+    uuid
   } from './utils';
 
   const dispatch = createEventDispatcher();
@@ -40,7 +41,7 @@
   export let scrollable = false;
   export let size = '';
   export let toggle = undefined;
-  export let labelledBy = '';
+  export let labelledBy = header ? `modal-${uuid()}` : undefined;
   export let backdrop = true;
   export let wrapClassName = '';
   export let modalClassName = '';
@@ -226,7 +227,7 @@
         <div
           in:modalIn
           out:modalOut
-          ariaLabelledby={labelledBy}
+          aria-labelledby={labelledBy}
           class={classnames('modal', modalClassName, {
             fade,
             'position-static': staticModal
@@ -243,7 +244,7 @@
           <div class={classes} role="document" bind:this={_dialog}>
             <div class={classnames('modal-content', contentClassName)}>
               {#if header}
-                <ModalHeader {toggle}>
+                <ModalHeader {toggle} id={labelledBy}>
                   {header}
                 </ModalHeader>
               {/if}

src/ModalBackdrop.svelte

@@ -1,15 +1,23 @@
 <script>
   // TODO only allow single backdrop open at once.
+  import { onMount } from 'svelte';
   import classnames from './utils';
   import { backdropIn, backdropOut } from './transitions.js';
+
   let className = '';
   export { className as class };
   export let isOpen = false;
   export let fade = true;
+
+  let loaded = false;
+  onMount(() => {
+    loaded = true;
+  });
+
   $: classes = classnames(className, 'modal-backdrop');
 </script>
 
-{#if isOpen}
+{#if isOpen && loaded}
   <div
     {...$$restProps}
     on:click

src/ModalHeader.svelte

@@ -6,12 +6,13 @@
   export let toggle = undefined;
   export let closeAriaLabel = 'Close';
   export let children = undefined;
+  export let id = undefined;
 
   $: classes = classnames(className, 'modal-header');
 </script>
 
 <div {...$$restProps} class={classes}>
-  <h5 class="modal-title">
+  <h5 class="modal-title" id={id}>
     {#if children}
       {children}
     {:else}

src/Tooltip.svelte

@@ -50,7 +50,7 @@
   $: if (target) {
     unregisterEventListeners();
     registerEventListeners();
-  };
+  }
 
   function registerEventListeners() {
 
@@ -70,7 +70,7 @@
       targetEl.addEventListener('focus', open);
       targetEl.addEventListener('blur', close);
     }
-  };
+  }
 
   function unregisterEventListeners() { 
     if (targetEl) {