docs: improve website a11y

astro.config.ts

@@ -15,6 +15,7 @@ import { remarkHeadings } from './docs/plugins/remark-headings'
 import { colorTheme } from './docs/utils/shiki-theme'
 
 let dirname = fileURLToPath(path.dirname(import.meta.url))
+let site = 'https://perfectionist.dev'
 
 export default defineConfig({
   markdown: {
@@ -40,22 +41,6 @@ export default defineConfig({
     ],
     remarkPlugins: [remarkSectionize, remarkHeadings],
   },
-  vite: {
-    css: {
-      lightningcss: {
-        targets: browserslistToTargets(
-          browserslist(null, {
-            config: path.join(dirname, './.browserslistrc'),
-          }),
-        ),
-      },
-      transformer: 'lightningcss',
-    },
-    plugins: [
-      // @ts-ignore
-      svelteSvg(),
-    ],
-  },
   integrations: [
     compress({
       JavaScript: true,
@@ -70,9 +55,27 @@ export default defineConfig({
         discloseVersion: false,
       },
     }),
-    sitemap(),
+    sitemap({
+      filter: page => !new RegExp(`^${site}/guide$`).test(page),
+    }),
     mdx(),
   ],
+  vite: {
+    css: {
+      lightningcss: {
+        targets: browserslistToTargets(
+          browserslist(null, {
+            config: path.join(dirname, './.browserslistrc'),
+          }),
+        ),
+      },
+      transformer: 'lightningcss',
+    },
+    plugins: [
+      // @ts-ignore
+      svelteSvg(),
+    ],
+  },
   prefetch: {
     defaultStrategy: 'viewport',
     prefetchAll: true,
@@ -91,6 +94,6 @@ export default defineConfig({
   },
   srcDir: path.join(dirname, './docs'),
   root: path.join(dirname, './docs'),
-  site: 'https://perfectionist.dev',
   compressHTML: true,
+  site,
 })

docs/components/Button.svelte

@@ -8,6 +8,7 @@
   class:button-primary={color === 'primary'}
   on:click={onClick}
   class="button"
+  type="button"
 >
   <slot />
 </button>

docs/components/CodeTabs.svelte

@@ -47,6 +47,7 @@
       }}
       class:active-tab={mounted && $codeSettings[type] === codeValue.value}
       aria-selected={$codeSettings[type] === codeValue.value}
+      type="button"
       class="tab"
       role="tab"
     >
@@ -74,6 +75,7 @@
       class:copy-button-copied={copied}
       class="copy-button"
       on:click={copyCode}
+      type="button"
     >
       {#if copied}
         <CopyCopiedIcon class="copy-icon" />

docs/components/Container.astro

@@ -10,7 +10,16 @@ let { class: className, tag = 'div', size = 'm', ...rest } = Astro.props
 let Tag = tag
 ---
 
-<Tag class:list={['container', `size-${size}`, className]} {...rest}>
+<Tag
+  class:list={Array.from(
+    new Set([
+      'container',
+      `size-${size}`,
+      ...(className?.split(' ').flat() ?? []),
+    ]),
+  )}
+  {...rest}
+>
   <slot />
 </Tag>
 

docs/components/Header.astro

@@ -14,7 +14,12 @@ let { border = false } = Astro.props
 <header class:list={['header', border && 'border']}>
   <SkipToContent />
   <div class="home">
-    <button aria-label="Toggle navigation" class="menu-button" id="menu-button">
+    <button
+      aria-label="Toggle navigation"
+      class="menu-button"
+      id="menu-button"
+      type="button"
+    >
       <Icon name="menu" size="m" />
     </button>
     <a aria-label="Perfectionist home page" class="home-link" href="/">

docs/components/Icon.astro

@@ -46,11 +46,15 @@ let stripSvgWrapper = (svgString: string): string => {
 ---
 
 <svg
-  class:list={{
-    [`size-${size}`]: true,
-    icon: true,
-    ...classList,
-  }}
+  class:list={Array.from(
+    new Set([
+      `size-${size}`,
+      'icon',
+      ...Object.keys(classList)
+        .map(currentClass => currentClass.split(' '))
+        .flat(),
+    ]),
+  )}
   {...extractSvgAttributes(icon)}
   {...props}
 >

docs/components/Navigation.astro

@@ -18,7 +18,12 @@ import Icon from './Icon.astro'
       <hr class="hr" />
     </li>
     <li class="item">
-      <button aria-label="Toggle theme" id="toggle-theme" class="link">
+      <button
+        aria-label="Toggle theme"
+        id="toggle-theme"
+        type="button"
+        class="link"
+      >
         <Icon class="icon icon-dark" name="sun" />
         <Icon class="icon icon-light" name="moon" />
       </button>

docs/components/Sidebar/Sidebar.astro

@@ -16,6 +16,7 @@ let { isMobileOnly = false } = Astro.props
       aria-label="Toggle navigation"
       id="menu-close-button"
       class="menu-button"
+      type="button"
     >
       <Icon name="cross" size="m" />
     </button>