Use accessible indentation (#2253)

5 files changed, 192 insertions, 188 deletions

diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro
index c822aaee9..649e02c29 100644
--- a/examples/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro
@@ -1,68 +1,70 @@
 ---
 import ThemeToggleButton from './ThemeToggleButton.tsx';
 import * as CONFIG from '../../config';
-const {editHref} = Astro.props;
-const showMoreSection = (CONFIG.COMMUNITY_INVITE_URL || editHref);
+const { editHref } = Astro.props;
+const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
 ---
-<style>
-  .edit-on-github {
-    text-decoration: none;
-    font: inherit;
-    color: inherit;
-    font-size: 1rem;
-  }
-</style>
+
 {showMoreSection && <h2 class="heading">More</h2>}
 <ul>
-  {editHref &&
-    <li class={`header-link depth-2`}>
-      <a class="edit-on-github" href={editHref} target="_blank">
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="pen"
-          class="svg-inline--fa fa-pen fa-w-16"
-          role="img"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-          height="1em"
-          width="1em"
-        >
-          <path
-            fill="currentColor"
-            d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
-          ></path>
-        </svg>
-        <span>Edit this page</span>
-      </a>
-    </li>
-  }
-  {CONFIG.COMMUNITY_INVITE_URL && 
-    <li class={`header-link depth-2`}>
-      <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="comment-alt"
-          class="svg-inline--fa fa-comment-alt fa-w-16"
-          role="img"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-          height="1em"
-          width="1em"
-        >
-          <path
-            fill="currentColor"
-            d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
-          ></path>
-        </svg>
-        <span>Join our community</span>
-      </a>
-    </li>
-  }
+	{editHref && (
+		<li class={`header-link depth-2`}>
+			<a class="edit-on-github" href={editHref} target="_blank">
+				<svg
+					aria-hidden="true"
+					focusable="false"
+					data-prefix="fas"
+					data-icon="pen"
+					class="svg-inline--fa fa-pen fa-w-16"
+					role="img"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 512 512"
+					height="1em"
+					width="1em"
+				>
+					<path
+						fill="currentColor"
+						d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
+					></path>
+				</svg>
+				<span>Edit this page</span>
+			</a>
+		</li>
+	)}
+	{CONFIG.COMMUNITY_INVITE_URL && (
+		<li class={`header-link depth-2`}>
+			<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
+				<svg
+					aria-hidden="true"
+					focusable="false"
+					data-prefix="fas"
+					data-icon="comment-alt"
+					class="svg-inline--fa fa-comment-alt fa-w-16"
+					role="img"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 512 512"
+					height="1em"
+					width="1em"
+				>
+					<path
+						fill="currentColor"
+						d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+					></path>
+				</svg>
+				<span>Join our community</span>
+			</a>
+		</li>
+	)}
 </ul>
 <div style="margin: 2rem 0; text-align: center;">
-  <ThemeToggleButton client:visible />
+	<ThemeToggleButton client:visible />
 </div>
+
+<style>
+	.edit-on-github {
+		text-decoration: none;
+		font: inherit;
+		color: inherit;
+		font-size: 1rem;
+	}
+</style>
diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro
index 5e0a86b78..a0b5779dc 100644
--- a/examples/docs/src/components/RightSidebar/RightSidebar.astro
+++ b/examples/docs/src/components/RightSidebar/RightSidebar.astro
@@ -1,25 +1,27 @@
 ---
 import TableOfContents from './TableOfContents.tsx';
 import MoreMenu from './MoreMenu.astro';
-const {content, githubEditUrl} = Astro.props;
+const { content, githubEditUrl } = Astro.props;
 const headers = content.astro.headers;
 ---
+
+<nav class="sidebar-nav" aria-labelledby="grid-right">
+	<div class="sidebar-nav-inner">
+		<TableOfContents client:media="(min-width: 50em)" {headers} />
+		<MoreMenu editHref={githubEditUrl} />
+	</div>
+</nav>
+
 <style>
-  .sidebar-nav {
-    width: 100%;
-    position: sticky;
-    top: 0;
-  }
-  .sidebar-nav-inner {
-    height: 100%;
-    padding: 0;
-    padding-top: var(--doc-padding);
-    overflow: auto;
-  }
+	.sidebar-nav {
+		width: 100%;
+		position: sticky;
+		top: 0;
+	}
+	.sidebar-nav-inner {
+		height: 100%;
+		padding: 0;
+		padding-top: var(--doc-padding);
+		overflow: auto;
+	}
 </style>
-<nav class="sidebar-nav" aria-labelledby="grid-right">
-  <div class="sidebar-nav-inner">
-    <TableOfContents client:media="(min-width: 50em)" headers={headers} />
-    <MoreMenu editHref={githubEditUrl} />
-  </div>
-</nav>
\ No newline at end of file
diff --git a/examples/docs/src/components/RightSidebar/TableOfContents.tsx b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
index d8ea998d4..578d2aa98 100644
--- a/examples/docs/src/components/RightSidebar/TableOfContents.tsx
+++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
@@ -3,43 +3,43 @@ import { h, Fragment } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 
 const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => {
-  const itemOffsets = useRef([]);
-  const [activeId, setActiveId] = useState<string>(undefined);
+	const itemOffsets = useRef([]);
+	const [activeId, setActiveId] = useState<string>(undefined);
 
-  useEffect(() => {
-    const getItemOffsets = () => {
-      const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
-      itemOffsets.current = Array.from(titles).map((title) => ({
-        id: title.id,
-        topOffset: title.getBoundingClientRect().top + window.scrollY,
-      }));
-    };
+	useEffect(() => {
+		const getItemOffsets = () => {
+			const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
+			itemOffsets.current = Array.from(titles).map((title) => ({
+				id: title.id,
+				topOffset: title.getBoundingClientRect().top + window.scrollY,
+			}));
+		};
 
-    getItemOffsets();
-    window.addEventListener('resize', getItemOffsets);
+		getItemOffsets();
+		window.addEventListener('resize', getItemOffsets);
 
-    return () => {
-      window.removeEventListener('resize', getItemOffsets);
-    };
-  }, []);
+		return () => {
+			window.removeEventListener('resize', getItemOffsets);
+		};
+	}, []);
 
-  return (
-    <>
-      <h2 class="heading">On this page</h2>
-      <ul>
-        <li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
-          <a href="#overview">Overview</a>
-        </li>
-        {headers
-          .filter(({ depth }) => depth > 1 && depth < 4)
-          .map((header) => (
-            <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}>
-              <a href={`#${header.slug}`}>{header.text}</a>
-            </li>
-          ))}
-      </ul>
-    </>
-  );
+	return (
+		<>
+			<h2 class="heading">On this page</h2>
+			<ul>
+				<li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
+					<a href="#overview">Overview</a>
+				</li>
+				{headers
+					.filter(({ depth }) => depth > 1 && depth < 4)
+					.map((header) => (
+						<li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}>
+							<a href={`#${header.slug}`}>{header.text}</a>
+						</li>
+					))}
+			</ul>
+		</>
+	);
 };
 
 export default TableOfContents;
diff --git a/examples/docs/src/components/RightSidebar/ThemeToggleButton.css b/examples/docs/src/components/RightSidebar/ThemeToggleButton.css
index 7de231d1b..dc5ba46d9 100644
--- a/examples/docs/src/components/RightSidebar/ThemeToggleButton.css
+++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.css
@@ -1,37 +1,37 @@
 .theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25em;
-  padding: 0.33em 0.67em;
-  border-radius: 99em;
-  background-color: var(--theme-code-inline-bg);
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25em;
+	padding: 0.33em 0.67em;
+	border-radius: 99em;
+	background-color: var(--theme-code-inline-bg);
 }
 
 .theme-toggle > label:focus-within {
-  outline: 2px solid transparent;
-  box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
+	outline: 2px solid transparent;
+	box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
 }
 
 .theme-toggle > label {
-  color: var(--theme-code-inline-text);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.5;
+	color: var(--theme-code-inline-text);
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0.5;
 }
 
 .theme-toggle .checked {
-  color: var(--theme-accent);
-  opacity: 1;
+	color: var(--theme-accent);
+	opacity: 1;
 }
 
 input[name='theme-toggle'] {
-  position: absolute;
-  opacity: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
+	position: absolute;
+	opacity: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
 }
diff --git a/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx
index 75ea775f4..6bdf45f02 100644
--- a/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx
+++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx
@@ -6,66 +6,66 @@ import './ThemeToggleButton.css';
 const themes = ['light', 'dark'];
 
 const icons = [
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-    <path
-      fillRule="evenodd"
-      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-      clipRule="evenodd"
-    />
-  </svg>,
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-  </svg>,
+	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+		<path
+			fillRule="evenodd"
+			d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+			clipRule="evenodd"
+		/>
+	</svg>,
+	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+		<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+	</svg>,
 ];
 
 const ThemeToggle: FunctionalComponent = () => {
-  const [theme, setTheme] = useState(() => {
-    if (import.meta.env.SSR) {
-      return undefined;
-    }
-    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-      return localStorage.getItem('theme');
-    }
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  });
+	const [theme, setTheme] = useState(() => {
+		if (import.meta.env.SSR) {
+			return undefined;
+		}
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+			return localStorage.getItem('theme');
+		}
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		}
+		return 'light';
+	});
 
-  useEffect(() => {
-    const root = document.documentElement;
-    if (theme === 'light') {
-      root.classList.remove('theme-dark');
-    } else {
-      root.classList.add('theme-dark');
-    }
-  }, [theme]);
+	useEffect(() => {
+		const root = document.documentElement;
+		if (theme === 'light') {
+			root.classList.remove('theme-dark');
+		} else {
+			root.classList.add('theme-dark');
+		}
+	}, [theme]);
 
-  return (
-    <div class="theme-toggle">
-      {themes.map((t, i) => {
-        const icon = icons[i];
-        const checked = t === theme;
-        return (
-          <label className={checked ? ' checked' : ''}>
-            {icon}
-            <input
-              type="radio"
-              name="theme-toggle"
-              checked={checked}
-              value={t}
-              title={`Use ${t} theme`}
-              aria-label={`Use ${t} theme`}
-              onChange={() => {
-                localStorage.setItem('theme', t);
-                setTheme(t);
-              }}
-            />
-          </label>
-        );
-      })}
-    </div>
-  );
+	return (
+		<div class="theme-toggle">
+			{themes.map((t, i) => {
+				const icon = icons[i];
+				const checked = t === theme;
+				return (
+					<label className={checked ? ' checked' : ''}>
+						{icon}
+						<input
+							type="radio"
+							name="theme-toggle"
+							checked={checked}
+							value={t}
+							title={`Use ${t} theme`}
+							aria-label={`Use ${t} theme`}
+							onChange={() => {
+								localStorage.setItem('theme', t);
+								setTheme(t);
+							}}
+						/>
+					</label>
+				);
+			})}
+		</div>
+	);
 };
 
 export default ThemeToggle;