From 6db4112b40236e7297912c202730e6d673d5865e Mon Sep 17 00:00:00 2001
From: Eric <ericyl.us@gmail.com>
Date: Mon, 26 Jul 2021 08:40:05 -0700
Subject: [PATCH] Fix a11y-mouse-events warning, update docs (#765)

* docs: update number of available Carbon icons

* docs: add svelte:head example for loading CDN styles

* chore(deps-dev): upgrade svelte to 3.40.1

* fix(a11y): disable a11y-mouse-events-have-key-events warning #760

* fix(deps): upgrade carbon-icons-svelte to v10.36.0 to avoid a11y warnings #760

* refactor(overflow-menu): remove formatStyle utility

* docs: links in paragraphs should be inline

* docs: add note on using all styles for dynamic theming
---
 README.md                                     |  2 +-
 docs/src/layouts/ComponentLayout.svelte       |  1 +
 docs/src/pages/index.svelte                   | 77 +++++++++++++++----
 package.json                                  |  4 +-
 src/Accordion/Accordion.svelte                |  1 +
 src/Accordion/AccordionItem.svelte            |  1 +
 src/Accordion/AccordionSkeleton.svelte        |  1 +
 src/Breadcrumb/Breadcrumb.svelte              |  1 +
 src/Breadcrumb/BreadcrumbItem.svelte          |  1 +
 src/Breadcrumb/BreadcrumbSkeleton.svelte      |  1 +
 src/Button/Button.svelte                      |  1 +
 src/Button/ButtonSkeleton.svelte              |  1 +
 src/Checkbox/Checkbox.svelte                  |  1 +
 src/Checkbox/CheckboxSkeleton.svelte          |  1 +
 src/CodeSnippet/CodeSnippet.svelte            |  1 +
 src/CodeSnippet/CodeSnippetSkeleton.svelte    |  1 +
 src/ComposedModal/ComposedModal.svelte        |  1 +
 src/ContentSwitcher/ContentSwitcher.svelte    |  1 +
 src/ContentSwitcher/Switch.svelte             |  1 +
 src/DataTable/DataTableSkeleton.svelte        |  1 +
 src/DataTable/TableCell.svelte                |  1 +
 src/DataTable/TableHead.svelte                |  1 +
 src/DataTable/TableHeader.svelte              |  1 +
 src/DataTable/TableRow.svelte                 |  1 +
 src/DatePicker/DatePicker.svelte              |  1 +
 src/DatePicker/DatePickerSkeleton.svelte      |  1 +
 src/Dropdown/DropdownSkeleton.svelte          |  1 +
 src/FileUploader/FileUploader.svelte          |  1 +
 src/FileUploader/FileUploaderItem.svelte      |  1 +
 src/FileUploader/FileUploaderSkeleton.svelte  |  1 +
 src/Form/Form.svelte                          |  1 +
 src/FormGroup/FormGroup.svelte                |  1 +
 src/FormItem/FormItem.svelte                  |  1 +
 src/FormLabel/FormLabel.svelte                |  1 +
 src/Icon/IconSkeleton.svelte                  |  1 +
 src/InlineLoading/InlineLoading.svelte        |  1 +
 src/Link/Link.svelte                          |  1 +
 src/ListItem/ListItem.svelte                  |  1 +
 src/Modal/Modal.svelte                        |  1 +
 src/Notification/InlineNotification.svelte    |  1 +
 src/Notification/NotificationButton.svelte    |  1 +
 src/Notification/ToastNotification.svelte     |  1 +
 src/NumberInput/NumberInput.svelte            |  1 +
 src/NumberInput/NumberInputSkeleton.svelte    |  1 +
 src/OrderedList/OrderedList.svelte            |  1 +
 src/OverflowMenu/OverflowMenu.svelte          | 10 +--
 src/OverflowMenu/formatStyle.js               |  1 -
 src/Pagination/PaginationSkeleton.svelte      |  1 +
 .../ProgressIndicator.svelte                  |  1 +
 .../ProgressIndicatorSkeleton.svelte          |  1 +
 src/ProgressIndicator/ProgressStep.svelte     |  1 +
 src/RadioButton/RadioButtonSkeleton.svelte    |  1 +
 src/RadioButtonGroup/RadioButtonGroup.svelte  |  1 +
 src/Search/SearchSkeleton.svelte              |  1 +
 src/Select/SelectSkeleton.svelte              |  1 +
 .../SkeletonPlaceholder.svelte                |  1 +
 src/SkeletonText/SkeletonText.svelte          |  1 +
 src/Slider/Slider.svelte                      |  1 +
 src/Slider/SliderSkeleton.svelte              |  1 +
 src/StructuredList/StructuredList.svelte      |  1 +
 src/StructuredList/StructuredListBody.svelte  |  1 +
 src/StructuredList/StructuredListCell.svelte  |  1 +
 src/StructuredList/StructuredListHead.svelte  |  1 +
 src/StructuredList/StructuredListRow.svelte   |  1 +
 .../StructuredListSkeleton.svelte             |  1 +
 src/Tabs/Tab.svelte                           |  1 +
 src/Tabs/TabsSkeleton.svelte                  |  1 +
 src/Tag/Tag.svelte                            |  1 +
 src/Tag/TagSkeleton.svelte                    |  1 +
 src/TextArea/TextArea.svelte                  |  1 +
 src/TextArea/TextAreaSkeleton.svelte          |  1 +
 src/TextInput/PasswordInput.svelte            |  1 +
 src/TextInput/TextInput.svelte                |  1 +
 src/TextInput/TextInputSkeleton.svelte        |  1 +
 src/Tile/ExpandableTile.svelte                |  1 +
 src/Tile/RadioTile.svelte                     |  1 +
 src/Tile/SelectableTile.svelte                |  1 +
 src/Tile/Tile.svelte                          |  1 +
 src/TimePicker/TimePicker.svelte              |  1 +
 src/TimePicker/TimePickerSelect.svelte        |  1 +
 src/Toggle/Toggle.svelte                      |  1 +
 src/Toggle/ToggleSkeleton.svelte              |  1 +
 src/ToggleSmall/ToggleSmall.svelte            |  1 +
 src/ToggleSmall/ToggleSmallSkeleton.svelte    |  1 +
 src/UnorderedList/UnorderedList.svelte        |  1 +
 yarn.lock                                     | 15 ++--
 86 files changed, 161 insertions(+), 28 deletions(-)
 delete mode 100644 src/OverflowMenu/formatStyle.js

diff --git a/README.md b/README.md
index 17967c57bb..0dae3e8eb0 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ Design systems facilitate design and development through reuse, consistency, and
 
 The Carbon Svelte portfolio also includes:
 
-- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
+- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components
 - **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
 - **[Carbon Preprocess Svelte](https://github.com/IBM/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index deb57cd7b3..ed7875470a 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -158,6 +158,7 @@
 
   .prose > p > .bx--link {
     font-size: inherit;
+    text-decoration: underline;
   }
 
   .prose .toc {
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index 0a94746d9c..53df99bfcd 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -29,7 +29,17 @@
     g80: "Gray 80",
     g90: "Gray 90",
     g100: "Gray 100",
+    all: "All",
   };
+
+  const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
+  const cssThemeToggle = `<script>
+  let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100"
+
+  $: document.documentElement.setAttribute("theme", theme);
+<\/script>
+`;
+
   $: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`;
   $: cssCdn = `<!DOCTYPE html>
 <html>
@@ -40,6 +50,12 @@
     />
   </head>
 </html>`;
+  $: cssCdnSvelteHead = `<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
+  />
+</svelte:head>`;
 </script>
 
 <Content>
@@ -74,11 +90,6 @@
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
         <h3>Installation</h3>
-        <p>
-          Install
-          <code>carbon-components-svelte</code>
-          as a development dependency in your project.
-        </p>
         <h4>Using Yarn:</h4>
         <Row noGutter>
           <CodeSnippet code="{installYarn}" />
@@ -89,7 +100,7 @@
         </Row>
       </Column>
     </Row>
-    <Row style="margin-bottom: var(--cds-layout-05)">
+    <Row style="margin-bottom: var(--cds-layout-04)">
       <Column>
         <h3>Styling</h3>
         <p>
@@ -109,8 +120,8 @@
       </Column>
     </Row>
 
-    <Row style="margin-bottom: var(--cds-layout-02)">
-      <Column xlg="{10}" noGutter>
+    <Row>
+      <Column max="{10}" xlg="{10}" noGutter>
         <Tabs>
           <Tab label="CSS StyleSheet" />
           <Tab label="CDN" />
@@ -144,10 +155,8 @@
                   unpkg.com
                 </OutboundLink>.
               </p>
-              <p>
-                This is best suited for rapid prototyping or if your set-up does
-                not use a CSS loader.
-              </p>
+              <p>This is best suited for rapid prototyping.</p>
+              <h5>HTML</h5>
               <Row padding noGutter>
                 <Column>
                   <p>
@@ -155,6 +164,14 @@
                   </p>
                 </Column>
               </Row>
+              <h5>svelte:head</h5>
+              <Row padding noGutter>
+                <Column>
+                  <p>
+                    <CodeSnippet type="multi" code="{cssCdnSvelteHead}" />
+                  </p>
+                </Column>
+              </Row>
             </TabContent>
             <TabContent>
               <p>
@@ -182,7 +199,39 @@
       </Column>
     </Row>
 
-    <Row>
+    <Row style="margin-bottom: var(--cds-layout-02)">
+      <Column>
+        <h3>Dynamic theming</h3>
+        <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
+        <Row padding noGutter>
+          <Column>
+            <p>
+              <CodeSnippet type="single" code="{cssImportAll}" />
+            </p>
+          </Column>
+        </Row>
+        <p>
+          Programmatically switch between each of the five Carbon themes by
+          setting the "theme" attribute on the HTML element.
+        </p>
+        <Row padding noGutter>
+          <Column>
+            <p>
+              <CodeSnippet type="multi" code="{cssThemeToggle}" />
+            </p>
+          </Column>
+        </Row>
+        <p>
+          You can use the
+          <Link inline size="lg" href="/components/Theme">
+            Theme utility component
+          </Link>
+          to update the theme at runtime.
+        </p>
+      </Column>
+    </Row>
+
+    <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
         <h3>Portfolio</h3>
         <p>
@@ -206,7 +255,7 @@
         <TileCard
           borderBottom
           title="Carbon Icons Svelte"
-          subtitle="6000+ icons"
+          subtitle="7000+ icons"
           target="_blank"
           href="https://github.com/IBM/carbon-icons-svelte"
         />
diff --git a/package.json b/package.json
index a636f99347..76a065f165 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "publish-examples": "node scripts/publish-examples"
   },
   "dependencies": {
-    "carbon-icons-svelte": "^10.27.0",
+    "carbon-icons-svelte": "^10.36.0",
     "flatpickr": "4.6.9"
   },
   "devDependencies": {
@@ -44,7 +44,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.32.6",
     "sveld": "^0.8.2",
-    "svelte": "^3.32.1",
+    "svelte": "^3.40.1",
     "svelte-check": "^1.1.32",
     "typescript": "^4.1.3"
   },
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index 2cf3d63b6c..944be5e812 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -30,6 +30,7 @@
   setContext("Accordion", { disableItems });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <AccordionSkeleton
     {...$$restProps}
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index 8217faa80a..2ffed13497 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -34,6 +34,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   class:bx--accordion__item="{true}"
   class:bx--accordion__item--active="{open}"
diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte
index 4de404930f..3417966897 100644
--- a/src/Accordion/AccordionSkeleton.svelte
+++ b/src/Accordion/AccordionSkeleton.svelte
@@ -21,6 +21,7 @@
   import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <ul
   class:bx--skeleton="{true}"
   class:bx--accordion="{true}"
diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
index 26d7e521ba..53af574424 100644
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@@ -10,6 +10,7 @@
   import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <BreadcrumbSkeleton
     noTrailingSlash="{noTrailingSlash}"
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index a18c790465..dac0d8a7c1 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -19,6 +19,7 @@
   setContext("BreadcrumbItem", {});
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   class:bx--breadcrumb-item="{true}"
   class:bx--breadcrumb-item--current="{isCurrentPage &&
diff --git a/src/Breadcrumb/BreadcrumbSkeleton.svelte b/src/Breadcrumb/BreadcrumbSkeleton.svelte
index c011781cfd..8627819daf 100644
--- a/src/Breadcrumb/BreadcrumbSkeleton.svelte
+++ b/src/Breadcrumb/BreadcrumbSkeleton.svelte
@@ -6,6 +6,7 @@
   export let count = 3;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--breadcrumb="{true}"
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 3ec84c63af..174e6b6339 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -131,6 +131,7 @@
   };
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <ButtonSkeleton
     href="{href}"
diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte
index c5c7f58439..c0ec06399c 100644
--- a/src/Button/ButtonSkeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@@ -18,6 +18,7 @@
   export let small = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if href}
   <a
     href="{href}"
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index e85dbb85f8..41af3a8ace 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -47,6 +47,7 @@
   $: dispatch("check", checked);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <CheckboxSkeleton
     {...$$restProps}
diff --git a/src/Checkbox/CheckboxSkeleton.svelte b/src/Checkbox/CheckboxSkeleton.svelte
index 99dbf58f6b..92da463612 100644
--- a/src/Checkbox/CheckboxSkeleton.svelte
+++ b/src/Checkbox/CheckboxSkeleton.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   class:bx--checkbox-wrapper="{true}"
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 30b51c71db..1a1ddec080 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -116,6 +116,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <CodeSnippetSkeleton
     type="{type}"
diff --git a/src/CodeSnippet/CodeSnippetSkeleton.svelte b/src/CodeSnippet/CodeSnippetSkeleton.svelte
index a3af51ef32..3ca99c67d7 100644
--- a/src/CodeSnippet/CodeSnippetSkeleton.svelte
+++ b/src/CodeSnippet/CodeSnippetSkeleton.svelte
@@ -6,6 +6,7 @@
   export let type = "single";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--snippet="{true}"
diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index 78d923debc..6300d9d34e 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -97,6 +97,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   bind:this="{ref}"
   role="presentation"
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index f7cc803a4e..81f8d32ef2 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -63,6 +63,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   role="tablist"
   class:bx--content-switcher="{true}"
diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte
index d3d7539615..092d9eca3b 100644
--- a/src/ContentSwitcher/Switch.svelte
+++ b/src/ContentSwitcher/Switch.svelte
@@ -38,6 +38,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   bind:this="{ref}"
   role="tab"
diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte
index f81aac539f..c95918afaa 100644
--- a/src/DataTable/DataTableSkeleton.svelte
+++ b/src/DataTable/DataTableSkeleton.svelte
@@ -41,6 +41,7 @@
   );
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--data-table-container="{true}"
diff --git a/src/DataTable/TableCell.svelte b/src/DataTable/TableCell.svelte
index d43f6f28e8..51a14ce0c2 100644
--- a/src/DataTable/TableCell.svelte
+++ b/src/DataTable/TableCell.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <td {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
   <slot />
 </td>
diff --git a/src/DataTable/TableHead.svelte b/src/DataTable/TableHead.svelte
index ac356ae059..cdbbc139a4 100644
--- a/src/DataTable/TableHead.svelte
+++ b/src/DataTable/TableHead.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <thead {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
   <slot />
 </thead>
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index 386eaa0609..eab3872673 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -27,6 +27,7 @@
   $: ariaLabel = translateWithId();
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if $tableSortable && !disableSorting}
   <th
     aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
diff --git a/src/DataTable/TableRow.svelte b/src/DataTable/TableRow.svelte
index e9bb96f399..31d5191a5e 100644
--- a/src/DataTable/TableRow.svelte
+++ b/src/DataTable/TableRow.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <tr {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
   <slot />
 </tr>
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index 7ebde86c59..62fa58623f 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -200,6 +200,7 @@
   }}"
 />
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/DatePicker/DatePickerSkeleton.svelte b/src/DatePicker/DatePickerSkeleton.svelte
index 839b61a81e..133a5054a5 100644
--- a/src/DatePicker/DatePickerSkeleton.svelte
+++ b/src/DatePicker/DatePickerSkeleton.svelte
@@ -6,6 +6,7 @@
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/Dropdown/DropdownSkeleton.svelte b/src/Dropdown/DropdownSkeleton.svelte
index 32201179c4..ae6b07f8c6 100644
--- a/src/Dropdown/DropdownSkeleton.svelte
+++ b/src/Dropdown/DropdownSkeleton.svelte
@@ -3,6 +3,7 @@
   export let inline = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--dropdown-v2="{true}"
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 5c6704b850..08147f4717 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -76,6 +76,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/FileUploader/FileUploaderItem.svelte b/src/FileUploader/FileUploaderItem.svelte
index c17a157534..d7ccf4f1c0 100644
--- a/src/FileUploader/FileUploaderItem.svelte
+++ b/src/FileUploader/FileUploaderItem.svelte
@@ -39,6 +39,7 @@
   const dispatch = createEventDispatcher();
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <span
   id="{id}"
   class:bx--file__selected-file="{true}"
diff --git a/src/FileUploader/FileUploaderSkeleton.svelte b/src/FileUploader/FileUploaderSkeleton.svelte
index e7ddc0a3d5..e561744ad2 100644
--- a/src/FileUploader/FileUploaderSkeleton.svelte
+++ b/src/FileUploader/FileUploaderSkeleton.svelte
@@ -3,6 +3,7 @@
   import { SkeletonText } from "../SkeletonText";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/Form/Form.svelte b/src/Form/Form.svelte
index d5b327ae72..5caf1140eb 100644
--- a/src/Form/Form.svelte
+++ b/src/Form/Form.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <form
   class:bx--form="{true}"
   {...$$restProps}
diff --git a/src/FormGroup/FormGroup.svelte b/src/FormGroup/FormGroup.svelte
index 311807e263..5f6fb8b014 100644
--- a/src/FormGroup/FormGroup.svelte
+++ b/src/FormGroup/FormGroup.svelte
@@ -18,6 +18,7 @@
   export let legendId = "";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <fieldset
   data-invalid="{invalid || undefined}"
   class:bx--fieldset="{true}"
diff --git a/src/FormItem/FormItem.svelte b/src/FormItem/FormItem.svelte
index 1fd11e7d3a..6b157a0a1e 100644
--- a/src/FormItem/FormItem.svelte
+++ b/src/FormItem/FormItem.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte
index 535e6dee37..acd2b41135 100644
--- a/src/FormLabel/FormLabel.svelte
+++ b/src/FormLabel/FormLabel.svelte
@@ -3,6 +3,7 @@
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <label
   class:bx--label="{true}"
   for="{id}"
diff --git a/src/Icon/IconSkeleton.svelte b/src/Icon/IconSkeleton.svelte
index aa3b83d50d..5dd7bbcaf2 100644
--- a/src/Icon/IconSkeleton.svelte
+++ b/src/Icon/IconSkeleton.svelte
@@ -8,6 +8,7 @@
   export let size = 16;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--icon--skeleton="{true}"
   {...$$restProps}
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index 5197733615..96d92b4597 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -44,6 +44,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--inline-loading="{true}"
   aria-live="assertive"
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index 275c193211..016f56be02 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -31,6 +31,7 @@
   export let ref = null;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if disabled}
   <p
     bind:this="{ref}"
diff --git a/src/ListItem/ListItem.svelte b/src/ListItem/ListItem.svelte
index f4043432f8..fd9392d425 100644
--- a/src/ListItem/ListItem.svelte
+++ b/src/ListItem/ListItem.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   class:bx--list__item="{true}"
   {...$$restProps}
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 54a205c847..f1cee727ac 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -136,6 +136,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   bind:this="{ref}"
   role="presentation"
diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte
index 7c0f0e68f0..029e3f0217 100644
--- a/src/Notification/InlineNotification.svelte
+++ b/src/Notification/InlineNotification.svelte
@@ -56,6 +56,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if open}
   <div
     role="{role}"
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index cccd78a3c2..48f53ebecc 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -23,6 +23,7 @@
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   type="button"
   aria-label="{iconDescription}"
diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte
index e47fb72c13..41791ed42f 100644
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@@ -59,6 +59,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if open}
   <div
     role="{role}"
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index e74c1b36bc..e97246be2b 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -143,6 +143,7 @@
     "Numeric input field with increment and decrement buttons";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   on:click
diff --git a/src/NumberInput/NumberInputSkeleton.svelte b/src/NumberInput/NumberInputSkeleton.svelte
index 9afed3508c..d811fbc7d5 100644
--- a/src/NumberInput/NumberInputSkeleton.svelte
+++ b/src/NumberInput/NumberInputSkeleton.svelte
@@ -3,6 +3,7 @@
   export let hideLabel = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte
index c1f783beff..b657c5a7ab 100644
--- a/src/OrderedList/OrderedList.svelte
+++ b/src/OrderedList/OrderedList.svelte
@@ -9,6 +9,7 @@
   export let expressive = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <ol
   class:bx--list--ordered="{!native}"
   class:bx--list--ordered--native="{native}"
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index 1455fbe935..c428b3174b 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -64,8 +64,6 @@
   import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
   import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
 
-  import { formatStyle } from "./formatStyle";
-
   const ctxBreadcrumbItem = getContext("BreadcrumbItem");
   const dispatch = createEventDispatcher();
   const items = writable([]);
@@ -155,10 +153,11 @@
   $: if ($items[$currentIndex]) {
     focusedId.set($items[$currentIndex].id);
   }
-  $: dynamicPseudoWidth = `#${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
+  $: styles = `<style>
+    #${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
       width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
-    }`;
-  $: styles = formatStyle(dynamicPseudoWidth);
+    }
+  <\/style>`;
 </script>
 
 <svelte:head>
@@ -174,6 +173,7 @@
   }}"
 />
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   bind:this="{buttonRef}"
   type="button"
diff --git a/src/OverflowMenu/formatStyle.js b/src/OverflowMenu/formatStyle.js
deleted file mode 100644
index 33cd508910..0000000000
--- a/src/OverflowMenu/formatStyle.js
+++ /dev/null
@@ -1 +0,0 @@
-export const formatStyle = (style) => ["<style>", style, "</style>"].join("");
diff --git a/src/Pagination/PaginationSkeleton.svelte b/src/Pagination/PaginationSkeleton.svelte
index b5fa19d209..af910477e5 100644
--- a/src/Pagination/PaginationSkeleton.svelte
+++ b/src/Pagination/PaginationSkeleton.svelte
@@ -2,6 +2,7 @@
   import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--pagination="{true}"
   class:bx--skeleton="{true}"
diff --git a/src/ProgressIndicator/ProgressIndicator.svelte b/src/ProgressIndicator/ProgressIndicator.svelte
index 67d8881f4c..63a7d7a9c1 100644
--- a/src/ProgressIndicator/ProgressIndicator.svelte
+++ b/src/ProgressIndicator/ProgressIndicator.svelte
@@ -60,6 +60,7 @@
   );
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <ul
   class:bx--progress="{true}"
   class:bx--progress--vertical="{vertical}"
diff --git a/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte b/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
index 1d782f1bee..b4fa113d2f 100644
--- a/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
+++ b/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
@@ -6,6 +6,7 @@
   export let count = 4;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <ul
   class:bx--progress="{true}"
   class:bx--progress--vertical="{vertical}"
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index a7a15aaec3..7cc5564a86 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -48,6 +48,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   aria-disabled="{disabled}"
   id="{id}"
diff --git a/src/RadioButton/RadioButtonSkeleton.svelte b/src/RadioButton/RadioButtonSkeleton.svelte
index 057a5a7982..ae74779128 100644
--- a/src/RadioButton/RadioButtonSkeleton.svelte
+++ b/src/RadioButton/RadioButtonSkeleton.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--radio-button-wrapper="{true}"
   {...$$restProps}
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index f7582d23fa..bc9638c2e0 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -66,6 +66,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   id="{id}"
   class:bx--form-item="{true}"
diff --git a/src/Search/SearchSkeleton.svelte b/src/Search/SearchSkeleton.svelte
index a8059b17ef..5363e9355f 100644
--- a/src/Search/SearchSkeleton.svelte
+++ b/src/Search/SearchSkeleton.svelte
@@ -12,6 +12,7 @@
   export let size = "xl";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--search--sm="{size === 'sm' || small}"
diff --git a/src/Select/SelectSkeleton.svelte b/src/Select/SelectSkeleton.svelte
index 4b0382efbf..74d971559e 100644
--- a/src/Select/SelectSkeleton.svelte
+++ b/src/Select/SelectSkeleton.svelte
@@ -3,6 +3,7 @@
   export let hideLabel = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
index 5eaa1a7914..6b015dee93 100644
--- a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
+++ b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton__placeholder="{true}"
   {...$$restProps}
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index 745d62995b..7a97717cfa 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -26,6 +26,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if paragraph}
   <div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
     {#each rows as { width }}
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index cdead20b49..7142697791 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -124,6 +124,7 @@
   on:touchcancel="{stopHolding}"
 />
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/Slider/SliderSkeleton.svelte b/src/Slider/SliderSkeleton.svelte
index 35f5028fbe..7a468a8db9 100644
--- a/src/Slider/SliderSkeleton.svelte
+++ b/src/Slider/SliderSkeleton.svelte
@@ -3,6 +3,7 @@
   export let hideLabel = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
index c3bc6a9194..d9ce9c7abe 100644
--- a/src/StructuredList/StructuredList.svelte
+++ b/src/StructuredList/StructuredList.svelte
@@ -37,6 +37,7 @@
   $: dispatch("change", $selectedValue);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   role="table"
   class:bx--structured-list="{true}"
diff --git a/src/StructuredList/StructuredListBody.svelte b/src/StructuredList/StructuredListBody.svelte
index 9e2d22f522..d6478a14eb 100644
--- a/src/StructuredList/StructuredListBody.svelte
+++ b/src/StructuredList/StructuredListBody.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   role="rowgroup"
   class:bx--structured-list-tbody="{true}"
diff --git a/src/StructuredList/StructuredListCell.svelte b/src/StructuredList/StructuredListCell.svelte
index 806b556ff7..93a162b39e 100644
--- a/src/StructuredList/StructuredListCell.svelte
+++ b/src/StructuredList/StructuredListCell.svelte
@@ -6,6 +6,7 @@
   export let noWrap = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   role="{head ? 'columnheader' : 'cell'}"
   class:bx--structured-list-th="{head}"
diff --git a/src/StructuredList/StructuredListHead.svelte b/src/StructuredList/StructuredListHead.svelte
index 1aec7f86f8..5beb13c346 100644
--- a/src/StructuredList/StructuredListHead.svelte
+++ b/src/StructuredList/StructuredListHead.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   role="rowgroup"
   class:bx--structured-list-thead="{true}"
diff --git a/src/StructuredList/StructuredListRow.svelte b/src/StructuredList/StructuredListRow.svelte
index 41abb4a9a4..d8a03c9cf8 100644
--- a/src/StructuredList/StructuredListRow.svelte
+++ b/src/StructuredList/StructuredListRow.svelte
@@ -9,6 +9,7 @@
   export let tabindex = "0";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if label}
   <!-- svelte-ignore a11y-label-has-associated-control -->
   <label
diff --git a/src/StructuredList/StructuredListSkeleton.svelte b/src/StructuredList/StructuredListSkeleton.svelte
index a52ede0057..461b0a8e2e 100644
--- a/src/StructuredList/StructuredListSkeleton.svelte
+++ b/src/StructuredList/StructuredListSkeleton.svelte
@@ -6,6 +6,7 @@
   export let border = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--structured-list="{true}"
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index 61b201cdf6..09d84ca016 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -43,6 +43,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   tabindex="-1"
   role="presentation"
diff --git a/src/Tabs/TabsSkeleton.svelte b/src/Tabs/TabsSkeleton.svelte
index a623f583f0..2a05a693a9 100644
--- a/src/Tabs/TabsSkeleton.svelte
+++ b/src/Tabs/TabsSkeleton.svelte
@@ -9,6 +9,7 @@
   export let type = "default";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--tabs="{true}"
   class:bx--skeleton="{true}"
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index f8a5ae75c7..c2069f83b4 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -41,6 +41,7 @@
   const dispatch = createEventDispatcher();
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <TagSkeleton
     size="{size}"
diff --git a/src/Tag/TagSkeleton.svelte b/src/Tag/TagSkeleton.svelte
index 651c9b4d5e..ab757f4542 100644
--- a/src/Tag/TagSkeleton.svelte
+++ b/src/Tag/TagSkeleton.svelte
@@ -3,6 +3,7 @@
   export let size = "default";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <span
   class:bx--tag="{true}"
   class:bx--tag--sm="{size === 'sm'}"
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 8920cb0f74..6eba89fe73 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -49,6 +49,7 @@
   $: errorId = `error-${id}`;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   on:click
   on:mouseover
diff --git a/src/TextArea/TextAreaSkeleton.svelte b/src/TextArea/TextAreaSkeleton.svelte
index 036fa7d4b3..e2a926aaac 100644
--- a/src/TextArea/TextAreaSkeleton.svelte
+++ b/src/TextArea/TextAreaSkeleton.svelte
@@ -3,6 +3,7 @@
   export let hideLabel = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 63a4ddbdf2..4bba5b54df 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -93,6 +93,7 @@
   $: warnId = `warn-${id}`;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 88787cf6ba..ff63464e1c 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -77,6 +77,7 @@
   $: warnId = `warn-${id}`;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
diff --git a/src/TextInput/TextInputSkeleton.svelte b/src/TextInput/TextInputSkeleton.svelte
index 4a54ca070c..76588c0740 100644
--- a/src/TextInput/TextInputSkeleton.svelte
+++ b/src/TextInput/TextInputSkeleton.svelte
@@ -3,6 +3,7 @@
   export let hideLabel = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index 08d8cbe471..ddf9b89c19 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -51,6 +51,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   bind:this="{ref}"
   type="button"
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 606cf0c62a..3a4820e194 100644
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@@ -56,6 +56,7 @@
     }
   }}"
 />
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <label
   for="{id}"
   class:bx--tile="{true}"
diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte
index af030a7c05..90fc019abb 100644
--- a/src/Tile/SelectableTile.svelte
+++ b/src/Tile/SelectableTile.svelte
@@ -52,6 +52,7 @@
   title="{title}"
   disabled="{disabled}"
 />
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <label
   for="{id}"
   tabindex="{disabled ? undefined : tabindex}"
diff --git a/src/Tile/Tile.svelte b/src/Tile/Tile.svelte
index 59812a9225..79277c0703 100644
--- a/src/Tile/Tile.svelte
+++ b/src/Tile/Tile.svelte
@@ -3,6 +3,7 @@
   export let light = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--tile="{true}"
   class:bx--tile--light="{light}"
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index ecd2955929..3ee50f6404 100644
--- a/src/TimePicker/TimePicker.svelte
+++ b/src/TimePicker/TimePicker.svelte
@@ -57,6 +57,7 @@
   export let ref = null;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   on:click
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 50313ebbf9..4416416383 100644
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/src/TimePicker/TimePickerSelect.svelte
@@ -44,6 +44,7 @@
   $: value = $selectedValue;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--select="{true}"
   class:bx--time-picker__select="{true}"
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 2144779356..02c6e4f289 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -40,6 +40,7 @@
   $: dispatch("toggle", { toggled });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/Toggle/ToggleSkeleton.svelte b/src/Toggle/ToggleSkeleton.svelte
index 3cf81671ef..aaba9cfb94 100644
--- a/src/Toggle/ToggleSkeleton.svelte
+++ b/src/Toggle/ToggleSkeleton.svelte
@@ -12,6 +12,7 @@
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte
index 657f8f5daa..7fcb64c5d8 100644
--- a/src/ToggleSmall/ToggleSmall.svelte
+++ b/src/ToggleSmall/ToggleSmall.svelte
@@ -30,6 +30,7 @@
   export let name = undefined;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/ToggleSmall/ToggleSmallSkeleton.svelte b/src/ToggleSmall/ToggleSmallSkeleton.svelte
index d04d74c094..f4d73749b2 100644
--- a/src/ToggleSmall/ToggleSmallSkeleton.svelte
+++ b/src/ToggleSmall/ToggleSmallSkeleton.svelte
@@ -12,6 +12,7 @@
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte
index 4f8b7c5152..ca412d2d9c 100644
--- a/src/UnorderedList/UnorderedList.svelte
+++ b/src/UnorderedList/UnorderedList.svelte
@@ -6,6 +6,7 @@
   export let expressive = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <ul
   class:bx--list--unordered="{true}"
   class:bx--list--nested="{nested}"
diff --git a/yarn.lock b/yarn.lock
index 976b1f5f43..66cd212def 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -463,10 +463,10 @@ carbon-components@10.40.0:
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-icons-svelte@^10.27.0:
-  version "10.27.0"
-  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.27.0.tgz#918e806d09e0e9cf61cf756ff0f9be49125ff9ea"
-  integrity sha512-e3l95wurOuEYMQxaDT2oYH322yRKgvTq5TDkzvylMGlCkA8erJH5lSwCM59VNFgPtptH4fIW9FlbQtpfp4iQ7Q==
+carbon-icons-svelte@^10.36.0:
+  version "10.36.0"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.36.0.tgz#3f269f2c52520d14fcd42161a633afbb7c68b4bf"
+  integrity sha512-YlrHtjdRqMFiptNVpQ4M+gMvpYDoKQydBY5A82thAXIHk9JrbrVLzq6RgJugTijHT8yzMS1zXaw6YYhqL8Qzqw==
 
 chalk@^2.0.0, chalk@^2.4.1:
   version "2.4.2"
@@ -2434,11 +2434,16 @@ svelte-preprocess@^4.7.3:
     detect-indent "^6.0.0"
     strip-indent "^3.0.0"
 
-svelte@^3.31.2, svelte@^3.32.1:
+svelte@^3.31.2:
   version "3.32.1"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.32.1.tgz#c4b6e35517d0ed77e652cc8964ef660afa2f70f3"
   integrity sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g==
 
+svelte@^3.40.1:
+  version "3.40.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.40.1.tgz#0c1fa443c812f042ce5ccd8d3bec1654a612c259"
+  integrity sha512-IreCwsCD5yoKlXCDXCyHZ0mh1wNwm3/5QD+nVNBzSWug5dUiWcah/8QWnDcC3IYbJbn0ZRT04b8y4ITMtr1bNQ==
+
 terser@^5.0.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81"