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/Tabs/Tab.svelte

@@ -1,5 +1,4 @@
 <script>
-  // TODO: fix space not selecting
   let className = undefined;
   export { className as class };
   export let role = 'presentation';
@@ -23,17 +22,11 @@
   $: if (selected && anchorRef) {
     anchorRef.focus();
   }
-  $: _class = cx(
-    '--tabs__nav-item',
-    disabled && '--tabs__nav-item--disabled',
-    selected && '--tabs__nav-item--selected',
-    className
-  );
 </script>
 
 <li
   tabindex="-1"
-  class={_class}
+  class={cx('--tabs__nav-item', disabled && '--tabs__nav-item--disabled', selected && '--tabs__nav-item--selected', className)}
   on:click|preventDefault={() => {
     if (!disabled) {
       update(id);
@@ -42,16 +35,15 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:keydown={event => {
-    if (disabled) {
-      return;
-    }
-    if (event.key === 'ArrowRight') {
-      change(1);
-    } else if (event.key === 'ArrowLeft') {
-      change(-1);
-    } else if (event.key === ' ' || event.key === 'Enter') {
-      update(id);
+  on:keydown={({ key }) => {
+    if (!disabled) {
+      if (key === 'ArrowRight') {
+        change(1);
+      } else if (key === 'ArrowLeft') {
+        change(-1);
+      } else if (key === ' ' || key === 'Enter') {
+        update(id);
+      }
     }
   }}
   {role}
@@ -59,10 +51,10 @@
   <a
     bind:this={anchorRef}
     role="tab"
-    class={cx('--tabs__nav-link')}
     tabindex={disabled ? '-1' : tabindex}
     aria-selected={selected}
     aria-disabled={disabled}
+    class={cx('--tabs__nav-link')}
     {href}>
     {label}
   </a>