From d581538a8cedd6448e9599755480323079abacf3 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Thu, 11 May 2023 18:38:07 +0530
Subject: [PATCH] Push

---
 sites/svelte.dev/src/routes/+page.svelte             |  3 ++-
 .../src/routes/_components/Supporters/index.svelte   |  4 ++++
 sites/svelte.dev/src/routes/blog/[slug]/+page.svelte |  8 ++++----
 sites/svelte.dev/src/routes/faq/+page.svelte         |  4 +---
 .../src/routes/tutorial/[slug]/+page.svelte          |  3 ++-
 .../routes/tutorial/[slug]/TableOfContents.svelte    | 12 ++++++++++--
 6 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index e55e130df9..42f6cdcb6f 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -22,7 +22,8 @@
 
 <div class="blurb-shifter">
 	<Blurb>
-		<div slot="one">
+		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<div slot="one" id="main" tabindex="0">
 			<h2>Write less code</h2>
 			<p>
 				Build boilerplate-free components using languages you already know — HTML, CSS and
diff --git a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
index a523e8819c..8771799bdb 100644
--- a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
+++ b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
@@ -67,6 +67,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;
diff --git a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
index ad1bcfd029..cdd4ecac00 100644
--- a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/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>
 
@@ -18,7 +17,8 @@
 	<meta name="og:image" content="https://svelte.dev/blog/{$page.params.slug}/card.png" />
 </svelte:head>
 
-<article class="post listify text">
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<article class="post listify text" id="main" tabindex="0">
 	<h1>{data.post.title}</h1>
 	<p class="standfirst">{data.post.description}</p>
 
@@ -97,12 +97,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;
diff --git a/sites/svelte.dev/src/routes/faq/+page.svelte b/sites/svelte.dev/src/routes/faq/+page.svelte
index 45cce24598..7327998b26 100644
--- a/sites/svelte.dev/src/routes/faq/+page.svelte
+++ b/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}
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index 2d8f88a875..fcca417385 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -132,7 +132,8 @@
 			</div>
 		</div>
 
-		<div class="tutorial-repl">
+		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<div class="tutorial-repl" id="main" tabindex="0">
 			{#if browser}
 				<Repl
 					bind:this={repl}
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/TableOfContents.svelte b/sites/svelte.dev/src/routes/tutorial/[slug]/TableOfContents.svelte
index f05b1052bb..1c48e7d52d 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/TableOfContents.svelte
+++ b/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="{selected.section.title} / {selected.chapter.title}"
+			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}