refactor(components): convert const to reactive where appropriate

- Inline class assignments to avoid script-level clutter
- Ignore a11y-missing-attribute instead of redundant href

src/components/Accordion/Accordion.Skeleton.svelte

@@ -8,12 +8,15 @@
   import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
   import { cx, fillArray } from '../../lib';
   import SkeletonText from '../SkeletonText';
-
-  const _class = cx('--accordion', '--skeleton', className);
-  const items = fillArray(open ? count - 1 : count);
 </script>
 
-<ul on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
+<ul
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--accordion', '--skeleton', className)}
+  {style}>
   {#if open}
     <li class={cx('--accordion__item', '--accordion__item--active')}>
       <span class={cx('--accordion__heading')}>
@@ -27,7 +30,7 @@
       </div>
     </li>
   {/if}
-  {#each items as item, i (item)}
+  {#each fillArray(open ? count - 1 : count) as item, i (item)}
     <li class={cx('--accordion__item')}>
       <span class={cx('--accordion__heading')}>
         <ChevronRight16 class={cx('--accordion__arrow')} />

src/components/Accordion/Accordion.svelte

@@ -4,10 +4,8 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const _class = cx('--accordion', className);
 </script>
 
-<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<ul on:click on:mouseover on:mouseenter on:mouseleave class={cx('--accordion', className)} {style}>
   <slot />
 </ul>

src/components/Accordion/AccordionItem.svelte

@@ -10,17 +10,10 @@
   import { cx } from '../../lib';
 
   let animation = undefined;
-
-  $: _class = cx(
-    '--accordion__item',
-    open && '--accordion__item--active',
-    animation && `--accordion__item--${animation}`,
-    className
-  );
 </script>
 
 <li
-  class={_class}
+  class={cx('--accordion__item', open && '--accordion__item--active', animation && `--accordion__item--${animation}`, className)}
   on:animationend
   on:animationend={() => {
     animation = undefined;
@@ -40,8 +33,8 @@
     on:mouseenter
     on:mouseleave
     on:keydown
-    on:keydown={event => {
-      if (open && event.key === 'Escape') {
+    on:keydown={({ key }) => {
+      if (open && key === 'Escape') {
         open = false;
       }
     }}>