From b8a2a738a82db5939dad31367589f40c286cffa0 Mon Sep 17 00:00:00 2001
From: Ilya Kamens <ilyakamens@gmail.com>
Date: Fri, 16 Aug 2024 01:28:38 +0900
Subject: [PATCH 1/2] Fix a11y warnings

A11y: <svg> with click handler must have an ARIA role
A11y: <div> with click handler must have an ARIA role
A11y: <span> with click handler must have an ARIA role
A11y: <svelte:element> with click handler must have an ARIA role
A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.
---
 src/svelte/components/Actions.svelte          | 3 ++-
 src/svelte/components/Badge.svelte            | 3 ++-
 src/svelte/components/Chip.svelte             | 4 +++-
 src/svelte/components/Dialog.svelte           | 3 ++-
 src/svelte/components/ListItem.svelte         | 6 ++++++
 src/svelte/components/Message.svelte          | 3 +++
 src/svelte/components/Notification.svelte     | 8 ++++++--
 src/svelte/components/Panel.svelte            | 3 ++-
 src/svelte/components/Popover.svelte          | 3 ++-
 src/svelte/components/Popup.svelte            | 3 ++-
 src/svelte/components/Sheet.svelte            | 4 +++-
 src/svelte/components/Stepper.svelte          | 2 ++
 src/svelte/components/icons/DeleteIcon.svelte | 6 ++++++
 13 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/svelte/components/Actions.svelte b/src/svelte/components/Actions.svelte
index b6770dc7..5e1bf3ba 100644
--- a/src/svelte/components/Actions.svelte
+++ b/src/svelte/components/Actions.svelte
@@ -22,7 +22,8 @@
 </script>
 
 {#if backdrop}
-  <div class={c.backdrop[state]} on:click={onBackdropClick} />
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
 {/if}
 <div class={c.base[state]} {...$$restProps}>
   <slot />
diff --git a/src/svelte/components/Badge.svelte b/src/svelte/components/Badge.svelte
index 45ad4b1e..add22ab8 100644
--- a/src/svelte/components/Badge.svelte
+++ b/src/svelte/components/Badge.svelte
@@ -26,6 +26,7 @@
   );
 </script>
 
-<span class={c.base[size]} {...$$restProps} on:click={onClick}>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<span class={c.base[size]} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
   <slot />
 </span>
diff --git a/src/svelte/components/Chip.svelte b/src/svelte/components/Chip.svelte
index ca0d2203..bc47f41d 100644
--- a/src/svelte/components/Chip.svelte
+++ b/src/svelte/components/Chip.svelte
@@ -36,12 +36,14 @@
   );
 </script>
 
-<div class={c.base[style]} {...$$restProps} on:click={onClick}>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class={c.base[style]} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
   {#if $$slots.media}
     <div class={c.media}><slot name="media" /></div>
   {/if}
   <slot />
   {#if deleteButton}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div class={c.deleteButton} role="button" tabindex="0" on:click={onDelete}>
       <DeleteIcon {theme} class="h-4 w-4" />
     </div>
diff --git a/src/svelte/components/Dialog.svelte b/src/svelte/components/Dialog.svelte
index bf25ae9c..e09d5a6d 100644
--- a/src/svelte/components/Dialog.svelte
+++ b/src/svelte/components/Dialog.svelte
@@ -47,7 +47,8 @@
 </script>
 
 {#if backdrop}
-  <div class={c.backdrop[state]} on:click={onBackdropClick} />
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
 {/if}
 
 <div class={c.base[state]} {...$$restProps}>
diff --git a/src/svelte/components/ListItem.svelte b/src/svelte/components/ListItem.svelte
index 7bca7577..a5926dc6 100644
--- a/src/svelte/components/ListItem.svelte
+++ b/src/svelte/components/ListItem.svelte
@@ -174,9 +174,12 @@
 </script>
 
 {#if groupTitle}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <svelte:element
     this={component}
     class={cls(c.groupTitle, className)}
+    role="button"
+    tabindex="0"
     on:click={onClick}
   >
     {title}
@@ -184,9 +187,12 @@
     <slot />
   </svelte:element>
 {:else}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <svelte:element
     this={component}
     class={c.base}
+    role="button"
+    tabindex="0"
     {...$$restProps}
     on:click={onClick}
   >
diff --git a/src/svelte/components/Message.svelte b/src/svelte/components/Message.svelte
index 18c6abc9..271795c5 100644
--- a/src/svelte/components/Message.svelte
+++ b/src/svelte/components/Message.svelte
@@ -50,11 +50,14 @@
   );
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <svelte:element
   this={component}
   {id}
   bind:this={rippleEl.current}
   class={classes}
+  role="button"
+  tabindex="0"
   on:click={onClick}
   {...$$restProps}
 >
diff --git a/src/svelte/components/Notification.svelte b/src/svelte/components/Notification.svelte
index 74b4e4fc..88e21e45 100644
--- a/src/svelte/components/Notification.svelte
+++ b/src/svelte/components/Notification.svelte
@@ -41,7 +41,8 @@
 </script>
 
 {#if theme === 'ios'}
-  <div class={c.base} {...$$restProps} on:click={onClick}>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class={c.base} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
     <div class={c.header}>
       {#if $$slots.icon}
         <div class={c.icon}><slot name="icon" /></div>
@@ -55,6 +56,7 @@
         </div>
       {/if}
       {#if button || $$slots.button}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class={c.button} role="button" tabindex="0" on:click={onClose}>
           <DeleteIcon {theme} class={c.deleteIcon} />
           <slot name="button" />
@@ -74,7 +76,8 @@
     </div>
   </div>
 {:else}
-  <div class={c.base} {...$$restProps} on:click={onClick}>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class={c.base} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
     <div class={c.header}>
       {#if $$slots.icon}
         <div class={c.icon}><slot name="icon" /></div>
@@ -103,6 +106,7 @@
         </div>
       </div>
       {#if button || $$slots.button}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class={c.button} role="button" tabindex="0" on:click={onClose}>
           <DeleteIcon {theme} class={c.deleteIcon} />
           <slot name="button" />
diff --git a/src/svelte/components/Panel.svelte b/src/svelte/components/Panel.svelte
index ec49f1ea..0c2ce47c 100644
--- a/src/svelte/components/Panel.svelte
+++ b/src/svelte/components/Panel.svelte
@@ -36,7 +36,8 @@
 </script>
 
 {#if backdrop}
-  <div class={c.backdrop[state]} on:click={onBackdropClick} />
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
 {/if}
 <div class={classes} {...$$restProps}>
   <slot />
diff --git a/src/svelte/components/Popover.svelte b/src/svelte/components/Popover.svelte
index a8ef637a..a60e2561 100644
--- a/src/svelte/components/Popover.svelte
+++ b/src/svelte/components/Popover.svelte
@@ -127,7 +127,8 @@
 </script>
 
 {#if backdrop}
-  <div class={c.backdrop[state]} on:click={onBackdropClick} />
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
 {/if}
 <div bind:this={el} class={classes} style={popoverStyle} {...$$restProps}>
   {#if angle}
diff --git a/src/svelte/components/Popup.svelte b/src/svelte/components/Popup.svelte
index 659f54cc..78a91de4 100644
--- a/src/svelte/components/Popup.svelte
+++ b/src/svelte/components/Popup.svelte
@@ -31,7 +31,8 @@
 </script>
 
 {#if backdrop}
-  <div class={c.backdrop[state]} on:click={onBackdropClick} />
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
 {/if}
 <div class={c.base[state]} {...$$restProps}>
   <slot />
diff --git a/src/svelte/components/Sheet.svelte b/src/svelte/components/Sheet.svelte
index 63462c9b..e7214a61 100644
--- a/src/svelte/components/Sheet.svelte
+++ b/src/svelte/components/Sheet.svelte
@@ -30,7 +30,9 @@
 </script>
 
 {#if backdrop}
-  <div class={c.backdrop[state]} on:click={onBackdropClick} />
+
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
 {/if}
 <div class={c.base[state]} {...$$restProps}>
   <slot />
diff --git a/src/svelte/components/Stepper.svelte b/src/svelte/components/Stepper.svelte
index fc98afbd..42342eb0 100644
--- a/src/svelte/components/Stepper.svelte
+++ b/src/svelte/components/Stepper.svelte
@@ -127,6 +127,7 @@
 </script>
 
 <svelte:element this={component} class={classes} {...$$restProps}>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <span
     bind:this={buttonLeftEl.current}
     class={buttonLeftClasses}
@@ -154,6 +155,7 @@
     <span class={valueClasses}>{value}</span>
   {/if}
 
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <span
     bind:this={buttonRightEl.current}
     class={buttonRightClasses}
diff --git a/src/svelte/components/icons/DeleteIcon.svelte b/src/svelte/components/icons/DeleteIcon.svelte
index 80e5cfd1..714e3961 100644
--- a/src/svelte/components/icons/DeleteIcon.svelte
+++ b/src/svelte/components/icons/DeleteIcon.svelte
@@ -4,12 +4,15 @@
 </script>
 
 {#if theme === 'ios'}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="28"
     height="28"
     viewBox="0 0 28 28"
     fill="currentcolor"
+    role="button"
+    tabindex="0"
     on:click={onClick}
     {...$$restProps}
   >
@@ -18,12 +21,15 @@
     />
   </svg>
 {:else}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <svg
     width="24"
     height="24"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    role="button"
+    tabindex="0"
     on:click={onClick}
     {...$$restProps}
   >

From ce14f52ca3b1c4ecc067154bb5ab548bc89271e1 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Wed, 21 Aug 2024 13:26:58 +0300
Subject: [PATCH 2/2] remove role="button" on irrelevant elements

---
 src/svelte/components/Actions.svelte          | 2 +-
 src/svelte/components/Badge.svelte            | 2 +-
 src/svelte/components/Chip.svelte             | 2 +-
 src/svelte/components/Dialog.svelte           | 2 +-
 src/svelte/components/ListItem.svelte         | 4 ----
 src/svelte/components/Message.svelte          | 2 --
 src/svelte/components/Notification.svelte     | 4 ++--
 src/svelte/components/Panel.svelte            | 2 +-
 src/svelte/components/Popover.svelte          | 2 +-
 src/svelte/components/Popup.svelte            | 2 +-
 src/svelte/components/Sheet.svelte            | 3 +--
 src/svelte/components/icons/DeleteIcon.svelte | 4 ----
 12 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/svelte/components/Actions.svelte b/src/svelte/components/Actions.svelte
index 5e1bf3ba..cf367964 100644
--- a/src/svelte/components/Actions.svelte
+++ b/src/svelte/components/Actions.svelte
@@ -23,7 +23,7 @@
 
 {#if backdrop}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
+  <div class={c.backdrop[state]} on:click={onBackdropClick} />
 {/if}
 <div class={c.base[state]} {...$$restProps}>
   <slot />
diff --git a/src/svelte/components/Badge.svelte b/src/svelte/components/Badge.svelte
index add22ab8..488b56f7 100644
--- a/src/svelte/components/Badge.svelte
+++ b/src/svelte/components/Badge.svelte
@@ -27,6 +27,6 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<span class={c.base[size]} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
+<span class={c.base[size]} {...$$restProps} on:click={onClick}>
   <slot />
 </span>
diff --git a/src/svelte/components/Chip.svelte b/src/svelte/components/Chip.svelte
index bc47f41d..d5c37f32 100644
--- a/src/svelte/components/Chip.svelte
+++ b/src/svelte/components/Chip.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class={c.base[style]} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
+<div class={c.base[style]} {...$$restProps} on:click={onClick}>
   {#if $$slots.media}
     <div class={c.media}><slot name="media" /></div>
   {/if}
diff --git a/src/svelte/components/Dialog.svelte b/src/svelte/components/Dialog.svelte
index e09d5a6d..7f1f5c81 100644
--- a/src/svelte/components/Dialog.svelte
+++ b/src/svelte/components/Dialog.svelte
@@ -48,7 +48,7 @@
 
 {#if backdrop}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
+  <div class={c.backdrop[state]} on:click={onBackdropClick} />
 {/if}
 
 <div class={c.base[state]} {...$$restProps}>
diff --git a/src/svelte/components/ListItem.svelte b/src/svelte/components/ListItem.svelte
index a5926dc6..4ae6a9e6 100644
--- a/src/svelte/components/ListItem.svelte
+++ b/src/svelte/components/ListItem.svelte
@@ -178,8 +178,6 @@
   <svelte:element
     this={component}
     class={cls(c.groupTitle, className)}
-    role="button"
-    tabindex="0"
     on:click={onClick}
   >
     {title}
@@ -191,8 +189,6 @@
   <svelte:element
     this={component}
     class={c.base}
-    role="button"
-    tabindex="0"
     {...$$restProps}
     on:click={onClick}
   >
diff --git a/src/svelte/components/Message.svelte b/src/svelte/components/Message.svelte
index 271795c5..08437d22 100644
--- a/src/svelte/components/Message.svelte
+++ b/src/svelte/components/Message.svelte
@@ -56,8 +56,6 @@
   {id}
   bind:this={rippleEl.current}
   class={classes}
-  role="button"
-  tabindex="0"
   on:click={onClick}
   {...$$restProps}
 >
diff --git a/src/svelte/components/Notification.svelte b/src/svelte/components/Notification.svelte
index 88e21e45..66df5d4b 100644
--- a/src/svelte/components/Notification.svelte
+++ b/src/svelte/components/Notification.svelte
@@ -42,7 +42,7 @@
 
 {#if theme === 'ios'}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class={c.base} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
+  <div class={c.base} {...$$restProps} on:click={onClick}>
     <div class={c.header}>
       {#if $$slots.icon}
         <div class={c.icon}><slot name="icon" /></div>
@@ -77,7 +77,7 @@
   </div>
 {:else}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class={c.base} {...$$restProps} role="button" tabindex="0" on:click={onClick}>
+  <div class={c.base} {...$$restProps} on:click={onClick}>
     <div class={c.header}>
       {#if $$slots.icon}
         <div class={c.icon}><slot name="icon" /></div>
diff --git a/src/svelte/components/Panel.svelte b/src/svelte/components/Panel.svelte
index 0c2ce47c..65dbaee5 100644
--- a/src/svelte/components/Panel.svelte
+++ b/src/svelte/components/Panel.svelte
@@ -37,7 +37,7 @@
 
 {#if backdrop}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
+  <div class={c.backdrop[state]} on:click={onBackdropClick} />
 {/if}
 <div class={classes} {...$$restProps}>
   <slot />
diff --git a/src/svelte/components/Popover.svelte b/src/svelte/components/Popover.svelte
index a60e2561..f6f508ef 100644
--- a/src/svelte/components/Popover.svelte
+++ b/src/svelte/components/Popover.svelte
@@ -128,7 +128,7 @@
 
 {#if backdrop}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
+  <div class={c.backdrop[state]} on:click={onBackdropClick} />
 {/if}
 <div bind:this={el} class={classes} style={popoverStyle} {...$$restProps}>
   {#if angle}
diff --git a/src/svelte/components/Popup.svelte b/src/svelte/components/Popup.svelte
index 78a91de4..3e2abccb 100644
--- a/src/svelte/components/Popup.svelte
+++ b/src/svelte/components/Popup.svelte
@@ -32,7 +32,7 @@
 
 {#if backdrop}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
+  <div class={c.backdrop[state]} on:click={onBackdropClick} />
 {/if}
 <div class={c.base[state]} {...$$restProps}>
   <slot />
diff --git a/src/svelte/components/Sheet.svelte b/src/svelte/components/Sheet.svelte
index e7214a61..d7a42e18 100644
--- a/src/svelte/components/Sheet.svelte
+++ b/src/svelte/components/Sheet.svelte
@@ -30,9 +30,8 @@
 </script>
 
 {#if backdrop}
-
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class={c.backdrop[state]} role="button" tabindex="0" on:click={onBackdropClick} />
+  <div class={c.backdrop[state]} on:click={onBackdropClick} />
 {/if}
 <div class={c.base[state]} {...$$restProps}>
   <slot />
diff --git a/src/svelte/components/icons/DeleteIcon.svelte b/src/svelte/components/icons/DeleteIcon.svelte
index 714e3961..78f9215f 100644
--- a/src/svelte/components/icons/DeleteIcon.svelte
+++ b/src/svelte/components/icons/DeleteIcon.svelte
@@ -11,8 +11,6 @@
     height="28"
     viewBox="0 0 28 28"
     fill="currentcolor"
-    role="button"
-    tabindex="0"
     on:click={onClick}
     {...$$restProps}
   >
@@ -28,8 +26,6 @@
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    role="button"
-    tabindex="0"
     on:click={onClick}
     {...$$restProps}
   >