fix(site-2): styles

CHANGELOG.md

@@ -3,6 +3,9 @@
 ## Unreleased
 
 * Add `bind:innerText` for `contenteditable` elements ([#3311](https://github.com/sveltejs/svelte/issues/3311))
+* Relax `a11y-no-noninteractive-element-to-interactive-role` warning ([#8402](https://github.com/sveltejs/svelte/pull/8402))
+* Add `a11y-interactive-supports-focus` warning ([#8392](https://github.com/sveltejs/svelte/pull/8392))
+* Fix equality check when updating dynamic text ([#5931](https://github.com/sveltejs/svelte/issues/5931))
 
 ## 3.57.0
 

elements/index.d.ts

@@ -1586,6 +1586,7 @@ export interface SvelteHTMLElements {
 
 	// Svelte specific
 	'svelte:window': SvelteWindowAttributes;
+	'svelte:document': HTMLAttributes<Document>;
 	'svelte:body': HTMLAttributes<HTMLElement>;
 	'svelte:fragment': { slot?: string };
 	'svelte:options': { [name: string]: any };

site/content/docs/06-accessibility-warnings.md

@@ -137,6 +137,17 @@ Enforce that attributes important for accessibility have a valid value. For exam
 
 ---
 
+### `a11y-interactive-supports-focus`
+
+Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.
+
+```sv
+<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
+<div role="button" on:keypress={() => {}} />
+```
+
+---
+
 ### `a11y-label-has-associated-control`
 
 Enforce that a label tag has a text label and an associated control.

site/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte

@@ -4,7 +4,7 @@
 	const handleSelectionChange = (e) => selection = document.getSelection();
 </script>
 
-<svelte:body />
+<svelte:document />
 
 <p>Select this text to fire events</p>
 <p>Selection: {selection}</p>