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

src/Accordion/Accordion.svelte

@@ -30,6 +30,7 @@
   setContext("Accordion", { disableItems });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <AccordionSkeleton
     {...$$restProps}

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}"

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}"

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}"

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 &&

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}"

src/Button/Button.svelte

@@ -131,6 +131,7 @@
   };
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <ButtonSkeleton
     href="{href}"

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}"

src/Checkbox/Checkbox.svelte

@@ -47,6 +47,7 @@
   $: dispatch("check", checked);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <CheckboxSkeleton
     {...$$restProps}

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}"

src/CodeSnippet/CodeSnippet.svelte

@@ -116,6 +116,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <CodeSnippetSkeleton
     type="{type}"

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}"

src/ComposedModal/ComposedModal.svelte

@@ -97,6 +97,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   bind:this="{ref}"
   role="presentation"

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}"

src/ContentSwitcher/Switch.svelte

@@ -38,6 +38,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   bind:this="{ref}"
   role="tab"

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}"

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>

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>

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'}"

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>

src/DatePicker/DatePicker.svelte

@@ -200,6 +200,7 @@
   }}"
 />
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}

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}

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}"

src/FileUploader/FileUploader.svelte

@@ -76,6 +76,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}

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}"

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}

src/Form/Form.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <form
   class:bx--form="{true}"
   {...$$restProps}

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}"

src/FormItem/FormItem.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}

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}"

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}

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"

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}"

src/ListItem/ListItem.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   class:bx--list__item="{true}"
   {...$$restProps}

src/Modal/Modal.svelte

@@ -136,6 +136,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   bind:this="{ref}"
   role="presentation"

src/Notification/InlineNotification.svelte

@@ -56,6 +56,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if open}
   <div
     role="{role}"

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}"

src/Notification/ToastNotification.svelte

@@ -59,6 +59,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if open}
   <div
     role="{role}"

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

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}

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}"

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"

src/OverflowMenu/formatStyle.js

@@ -1 +0,0 @@
-export const formatStyle = (style) => ["<style>", style, "</style>"].join("");

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}"

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}"

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}"

src/ProgressIndicator/ProgressStep.svelte

@@ -48,6 +48,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   aria-disabled="{disabled}"
   id="{id}"

src/RadioButton/RadioButtonSkeleton.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--radio-button-wrapper="{true}"
   {...$$restProps}

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}"

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}"

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}

src/SkeletonPlaceholder/SkeletonPlaceholder.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton__placeholder="{true}"
   {...$$restProps}

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 }}

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}

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}

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}"

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}"

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}"

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}"

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

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}"

src/Tabs/Tab.svelte

@@ -43,6 +43,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   tabindex="-1"
   role="presentation"

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}"

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}"

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'}"

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

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}

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}"

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}"

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}

src/Tile/ExpandableTile.svelte

@@ -51,6 +51,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   bind:this="{ref}"
   type="button"

src/Tile/RadioTile.svelte

@@ -56,6 +56,7 @@
     }
   }}"
 />
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <label
   for="{id}"
   class:bx--tile="{true}"

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}"

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}"

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

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}"

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}

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}

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}

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}

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}"