From 52a22583ad481d70cbca27ee9b068c11bc879f50 Mon Sep 17 00:00:00 2001
From: "Azat S." <to@azat.io>
Date: Wed, 17 Jul 2024 22:39:08 +0300
Subject: [PATCH] docs: improve website a11y

---
 astro.config.ts                       | 39 ++++++++++++++-------------
 docs/components/Button.svelte         |  1 +
 docs/components/CodeTabs.svelte       |  2 ++
 docs/components/Container.astro       | 11 +++++++-
 docs/components/Header.astro          |  7 ++++-
 docs/components/Icon.astro            | 14 ++++++----
 docs/components/Navigation.astro      |  7 ++++-
 docs/components/Sidebar/Sidebar.astro |  1 +
 8 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index 59a4b53a..0af0c188 100644
--- a/astro.config.ts
+++ b/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,
 })
diff --git a/docs/components/Button.svelte b/docs/components/Button.svelte
index bf4745e3..65cc20b6 100644
--- a/docs/components/Button.svelte
+++ b/docs/components/Button.svelte
@@ -8,6 +8,7 @@
   class:button-primary={color === 'primary'}
   on:click={onClick}
   class="button"
+  type="button"
 >
   <slot />
 </button>
diff --git a/docs/components/CodeTabs.svelte b/docs/components/CodeTabs.svelte
index 6356b8c5..5d996b85 100644
--- a/docs/components/CodeTabs.svelte
+++ b/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" />
diff --git a/docs/components/Container.astro b/docs/components/Container.astro
index 404e9114..e1b24aff 100644
--- a/docs/components/Container.astro
+++ b/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>
 
diff --git a/docs/components/Header.astro b/docs/components/Header.astro
index b47de9e2..dd0a7729 100644
--- a/docs/components/Header.astro
+++ b/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="/">
diff --git a/docs/components/Icon.astro b/docs/components/Icon.astro
index 39305dee..d0cc9079 100644
--- a/docs/components/Icon.astro
+++ b/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}
 >
diff --git a/docs/components/Navigation.astro b/docs/components/Navigation.astro
index 49b5e30f..d3639885 100644
--- a/docs/components/Navigation.astro
+++ b/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>
diff --git a/docs/components/Sidebar/Sidebar.astro b/docs/components/Sidebar/Sidebar.astro
index 545d3a2e..c3b09a6a 100644
--- a/docs/components/Sidebar/Sidebar.astro
+++ b/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>