feat(site-2): Accessibility (#8579)

* Push

* Push

* Fix Contents order

* Skip link to left sidemenu

* Add text class

* use top-nav slot

* Improve imagetools

* Fix aria-label

* Bump site-kit

pnpm-lock.yaml

@@ -171,8 +171,8 @@ importers:
         specifier: ^1.16.3
         version: 1.16.3(svelte@)(vite@4.3.5)
       '@sveltejs/site-kit':
-        specifier: ^5.0.4
+        specifier: ^5.1.0
-        version: 5.0.4(@sveltejs/kit@1.16.3)(svelte@)
+        version: 5.1.0(@sveltejs/kit@1.16.3)(svelte@)
       '@types/marked':
         specifier: ^4.3.0
         version: 4.3.0
@@ -1614,6 +1614,19 @@ packages:
       esm-env: 1.0.0
       svelte: 'link:'
       svelte-local-storage-store: 0.4.0(svelte@)
+    dev: false
+
+  /@sveltejs/site-kit@5.1.0(@sveltejs/kit@1.16.3)(svelte@):
+    resolution: {integrity: sha512-L73wi7AoS/0jTD1OHyFaApsSfnSO8EhkH81KrACwR+aM/JbCjstWHykFLRUz8f/rsf3L5cV9CSEjKP/j78jNUg==}
+    peerDependencies:
+      '@sveltejs/kit': ^1.0.0
+      svelte: ^3.54.0
+    dependencies:
+      '@sveltejs/kit': 1.16.3(svelte@)(vite@4.3.5)
+      esm-env: 1.0.0
+      svelte: 'link:'
+      svelte-local-storage-store: 0.4.0(svelte@)
+    dev: true
 
   /@sveltejs/vite-plugin-svelte@2.2.0(svelte@)(vite@4.3.5):
     resolution: {integrity: sha512-KDtdva+FZrZlyug15KlbXuubntAPKcBau0K7QhAIqC5SAy0uDbjZwoexDRx0L0J2T4niEfC6FnA9GuQQJKg+Aw==}

sites/svelte.dev/package.json

@@ -29,7 +29,7 @@
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^2.4.3",
 		"@sveltejs/kit": "^1.16.3",
-		"@sveltejs/site-kit": "^5.0.4",
+		"@sveltejs/site-kit": "^5.1.0",
 		"@types/marked": "^4.3.0",
 		"@types/node": "^20.1.3",
 		"degit": "^2.8.4",

sites/svelte.dev/src/env.d.ts

@@ -0,0 +1,13 @@
+interface ImageToolsPictureData {
+	sources: Record<'avif' | 'webp' | 'png', { src: string; w: number }[]>;
+	img: {
+		src: string;
+		w: number;
+		h: number;
+	};
+}
+
+declare module '*?big-image' {
+	const value: ImageToolsPictureData;
+	export default value;
+}

sites/svelte.dev/src/routes/+layout.svelte

@@ -16,7 +16,7 @@
 
 <div style:display={$page.url.pathname !== '/docs' ? 'contents' : 'none'}>
 	<Shell nav_visible={$page.url.pathname !== '/repl/embed'}>
-		<Nav>
+		<Nav slot="top-nav">
 			<svelte:fragment slot="home">
 				<strong>svelte</strong>.dev
 			</svelte:fragment>

sites/svelte.dev/src/routes/+page.svelte

@@ -6,8 +6,9 @@
 	import Supporters from './_components/Supporters/index.svelte';
 	import Try from './_components/Try.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
-	import CollectiveLight from './svelte-collective-light.png?w=640;1280;2560;3800&format=avif;webp;png&as=picture';
+
-	import CollectiveDark from './svelte-collective-dark.png?w=640;1280;2560;3800&format=avif;webp;png&as=picture';
+	import CollectiveLight from './svelte-collective-light.png?big-image';
+	import CollectiveDark from './svelte-collective-dark.png?big-image';
 </script>
 
 <svelte:head>

sites/svelte.dev/src/routes/_components/Hero.svelte

@@ -1,7 +1,8 @@
 <script>
 	import Image from './Image.svelte';
-	import Machine from './svelte-machine.png?w=640;1280;2560;3840&q=95&format=avif;webp;png&as=picture';
 	import SvelteLogotype from './svelte-logotype.svg';
+
+	import Machine from './svelte-machine.png?big-image';
 </script>
 
 <div class="hero">

sites/svelte.dev/src/routes/_components/Image.svelte

@@ -1,5 +1,5 @@
 <script>
-	/** @type {any} */
+	/** @type {ImageToolsPictureData} */
 	export let src;
 
 	/** @type {string} */
@@ -9,14 +9,14 @@
 </script>
 
 <picture>
-	{#each Object.entries(src?.sources ?? {}) as [format, images]}
+	{#each Object.entries(src.sources) as [format, images]}
-		<source srcset={images?.map((i) => `${i?.src} ${i?.w}w`).join(', ')} type="image/{format}" />
+		<source srcset={images.map((i) => `${i.src} ${i.w}w`).join(', ')} type="image/{format}" />
 	{/each}
 	<img
 		loading={lazy ? 'lazy' : 'eager'}
 		height={src.img.h}
 		width={src.img.w}
-		src={src?.img?.src}
+		src={src.img.src}
 		{alt}
 	/>
 </picture>

sites/svelte.dev/src/routes/_components/Supporters/index.svelte

@@ -68,6 +68,10 @@
 		margin: 0 0 2em 0;
 	}
 
+	a[href] {
+		color: color-mix(in srgb, var(--sk-theme-1) 90%, var(--sk-text-1) 15%);
+	}
+
 	.supporter {
 		width: 100%;
 		aspect-ratio: 1;

sites/svelte.dev/src/routes/blog/[slug]/+page.svelte

@@ -2,7 +2,6 @@
 	import { page } from '$app/stores';
 	import '@sveltejs/site-kit/styles/code.css';
 
-	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
 
@@ -97,12 +96,12 @@
 		border-radius: 0 var(--sk-border-radius) var(--sk-border-radius) 0;
 	}
 
-	.post :global(code) {
+	/* .post :global(code) {
 		padding: 0.3rem 0.8rem 0.3rem;
 		margin: 0 0.2rem;
 		top: -0.1rem;
 		background: var(--sk-back-4);
-	}
+	} */
 
 	.post :global(pre) :global(code) {
 		padding: 0;

sites/svelte.dev/src/routes/docs/+layout.svelte

@@ -11,6 +11,14 @@
 </script>
 
 <div class="container">
+	<div class="toc-container" style="order: 1">
+		<Contents contents={data.sections} />
+
+		<div class="ts-toggle">
+			<TSToggle />
+		</div>
+	</div>
+
 	<div class="page content">
 		{#if title}
 			<h1>{title}</h1>
@@ -18,14 +26,6 @@
 
 		<slot />
 	</div>
-
-	<div class="toc-container">
-		<Contents contents={data.sections} />
-	</div>
-
-	<div class="ts-toggle">
-		<TSToggle />
-	</div>
 </div>
 
 <style>
@@ -33,11 +33,16 @@
 		--sidebar-menu-width: 28rem;
 		--sidebar-width: var(--sidebar-menu-width);
 		--ts-toggle-height: 4.2rem;
+
+		display: flex;
+		flex-direction: column;
 	}
 
 	.page {
 		--on-this-page-display: none;
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
+
+		min-width: 0 !important;
 	}
 
 	.page :global(hr) {
@@ -121,6 +126,7 @@
 	@media (min-width: 1200px) {
 		.container {
 			--sidebar-width: max(28rem, 23vw);
+			flex-direction: row;
 		}
 
 		.page {

sites/svelte.dev/src/routes/docs/Contents.svelte

@@ -1,10 +1,14 @@
 <script>
 	import { page } from '$app/stores';
+	import { SkipLink } from '@sveltejs/site-kit/components';
 
 	/** @type {ReturnType<typeof import('$lib/server/docs/get-docs').get_docs_list>}*/
 	export let contents = [];
 </script>
 
+<SkipLink href="#docs-content">Skip to documentation</SkipLink>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <nav aria-label="Docs">
 	<ul class="sidebar">
 		{#each contents as section}

sites/svelte.dev/src/routes/docs/[slug]/+page.svelte

@@ -21,7 +21,7 @@
 	<meta name="Description" content="{data.page.title} • Svelte documentation" />
 </svelte:head>
 
-<div class="text">
+<div class="text" id="docs-content">
 	{@html data.page.content}
 </div>
 

sites/svelte.dev/src/routes/faq/+page.svelte

@@ -1,6 +1,4 @@
 <script>
-	import '@sveltejs/site-kit/styles/code.css';
-
 	export let data;
 </script>
 
@@ -15,7 +13,7 @@
 <div class="faqs stretch">
 	<h1>Frequently Asked Questions</h1>
 	{#each data.faqs as faq}
-		<article class="faq">
+		<article class="faq text">
 			<h2>
 				<span id={faq.slug} class="offset-anchor" />
 				{faq.title}

sites/svelte.dev/src/routes/tutorial/[slug]/TableOfContents.svelte

@@ -7,6 +7,8 @@
 	export let slug;
 	export let selected;
 
+	let select_focused = false;
+
 	function navigate(e) {
 		goto(`/tutorial/${e.target.value}`);
 	}
@@ -22,7 +24,7 @@
 		<Icon name="arrow-left" />
 	</a>
 
-	<div>
+	<div style:box-shadow={select_focused ? 'var(--sk-focus-outline)' : null}>
 		<span>
 			<strong>
 				<span style="position: relative; top: -0.1em; margin: 0 0.5em 0 0"
@@ -33,7 +35,13 @@
 			{selected.chapter.title}
 		</span>
 
-		<select value={slug} on:change={navigate}>
+		<select
+			aria-label="Tutorial Chapter"
+			value={slug}
+			on:change={navigate}
+			on:focus={() => (select_focused = true)}
+			on:blur={() => (select_focused = false)}
+		>
 			{#each sections as section, i}
 				<optgroup label="{i + 1}. {section.title}">
 					{#each section.tutorials as chapter, i}

sites/svelte.dev/vite.config.js

@@ -1,11 +1,27 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import * as fs from 'fs';
-import { imagetools } from 'vite-imagetools';
 
 process.env.VITE_API_BASE = process.env.DOCS_PREVIEW
 	? 'http://localhost:8787'
 	: 'https://api.svelte.dev';
 
+const plugins = [raw(['.ttf']), sveltekit()];
+
+// Only enable sharp if we're not in a webcontainer env
+if (!process.versions.webcontainer) {
+	plugins.push(
+		(await import('vite-imagetools')).imagetools({
+			defaultDirectives: (url) => {
+				if (url.searchParams.has('big-image')) {
+					return new URLSearchParams('w=640;1280;2560;3840&format=avif;webp;png&as=picture');
+				}
+
+				return new URLSearchParams();
+			}
+		})
+	);
+}
+
 function raw(ext) {
 	return {
 		name: 'vite-plugin-raw',
@@ -21,7 +37,7 @@ function raw(ext) {
 /** @type {import('vite').UserConfig} */
 const config = {
 	logLevel: 'info',
-	plugins: [raw(['.ttf']), imagetools(), sveltekit()],
+	plugins,
 	optimizeDeps: {
 		exclude: ['@sveltejs/site-kit', '@sveltejs/repl']
 	},