Resolves #687 Add skip to content button (#1235)

melt-ui · Jun 28, 2024 · ab699b1 · ab699b1
1 parent 13275cf
commit ab699b1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/src/routes/(landing-ui)/popover.svelte b/src/routes/(landing-ui)/popover.svelte
@@ -25,8 25,13 @@
 
  export let contentClass = '';
 
  let popoverButton: HTMLButtonElement;
 
  onMount(() => {
  open.set(true);
  setTimeout(() => {
  popoverButton.blur();
  }, 100);
  });
 </script>
 

diff --git a/src/routes/ layout.svelte b/src/routes/ layout.svelte
@@ -29,6 29,7 @@
  import { ModeWatcher } from 'mode-watcher';
 
  $: isRoot = $page.url.pathname === '/';
  let skipToContent = false;
 </script>
 
 <svelte:head>
@@ -45,6 46,15 @@
 
 <ModeWatcher defaultMode="dark" />
 
 <a
  href="#main"
  on:blur={() => (skipToContent = false)}
  on:focus={() => (skipToContent = true)}
  class="force-dark focus:z-[1000] fixed top-[-20rem] z-0 ml-56 rounded-br-xl rounded-tl-xl bg-neutral-900 px-2 py-1 text-neutral-100 focus:top-4 max-sm:right-[6]"
  tabindex="0"
 >
  Skip to main content
 </a>
 <div class="relative flex min-h-screen flex-col md:flex-col-reverse" id="page">
  <div class="flex flex-1">
  <slot />

diff --git a/src/routes/docs/ layout.svelte b/src/routes/docs/ layout.svelte
@@ -22,7 22,7 @@
  </Switch>
  </div>
  </aside>
- <div class="mx-auto w-full min-w-0">
  <div id="main" class="mx-auto w-full min-w-0">
  <slot />
  </div>
 </div>