From cae1f1939e368da3094a6f28050579e3118785d2 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 18 May 2022 19:00:21 -0700
Subject: [PATCH] fix(modal): remove close button `title` attribute, add
 `aria-hidden` to icons (#1308)

* fix(modal): close button should not have a title

* fix(modal): close icon should not have aria-label

* fix(modal): close button icons should have `aria-hidden="true"
---
 src/ComposedModal/ModalHeader.svelte |  7 +++++--
 src/Modal/Modal.svelte               | 14 ++------------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte
index 67d346ae..f3b5c069 100644
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/src/ComposedModal/ModalHeader.svelte
@@ -50,13 +50,16 @@
   <slot />
   <button
     type="button"
-    title="{iconDescription}"
     aria-label="{iconDescription}"
     class:bx--modal-close="{true}"
     class="{closeClass}"
     on:click
     on:click="{closeModal}"
   >
-    <Close size="{20}" class="bx--modal-close__icon {closeIconClass}" />
+    <Close
+      size="{20}"
+      class="bx--modal-close__icon {closeIconClass}"
+      aria-hidden="true"
+    />
   </button>
 </div>
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 643b2bc4..9efbda6f 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -222,17 +222,12 @@
           bind:this="{buttonRef}"
           type="button"
           aria-label="{iconDescription}"
-          title="{iconDescription}"
           class:bx--modal-close="{true}"
           on:click="{() => {
             open = false;
           }}"
         >
-          <Close
-            size="{20}"
-            aria-label="{iconDescription}"
-            class="bx--modal-close__icon"
-          />
+          <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
         </button>
       {/if}
       {#if modalLabel}
@@ -248,17 +243,12 @@
           bind:this="{buttonRef}"
           type="button"
           aria-label="{iconDescription}"
-          title="{iconDescription}"
           class:bx--modal-close="{true}"
           on:click="{() => {
             open = false;
           }}"
         >
-          <Close
-            size="{20}"
-            aria-label="{iconDescription}"
-            class="bx--modal-close__icon"
-          />
+          <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
         </button>
       {/if}
     </div>