Move focus managment to keyux library

hplush · Feb 18, 2024 · dcb528f · dcb528f
1 parent 1e75965
commit dcb528f
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 538 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/web/lib/hotkeys.ts b/web/lib/hotkeys.ts
diff --git a/web/main/browser.ts b/web/main/browser.ts
@@ -1,6 +1,14 @@
 import { isFastRoute, router, theme } from '@slowreader/core'
+import {
+  hiddenKeyUX,
+  hotkeyKeyUX,
+  jumpKeyUX,
+  likelyWithKeyboard,
+  menuKeyUX,
+  pressKeyUX,
+  startKeyUX
+} from 'keyux'
 
-import { jumpBack, likelyToHavePhysicalKeyboard } from '../lib/hotkeys.js'
 import { locale } from '../stores/locale.js'
 
 let root = document.documentElement
@@ -18,12 +26,14 @@ locale.subscribe(localeValue => {
   root.lang = localeValue
 })
 
-if (!likelyToHavePhysicalKeyboard()) {
+if (!likelyWithKeyboard(window)) {
   root.classList.add('is-hotkey-disabled')
 }
 
-document.body.addEventListener('keydown', e => {
-  if (e.key === 'Escape') {
-    if (!e.defaultPrevented) jumpBack()
-  }
-})
+startKeyUX(window, [
+  pressKeyUX('is-pseudo-active'),
+  hotkeyKeyUX(),
+  menuKeyUX(),
+  jumpKeyUX(),
+  hiddenKeyUX()
+])
diff --git a/web/package.json b/web/package.json
@@ -34,6 +34,7 @@
     "@slowreader/core": "link:../core",
     "@sveltejs/vite-plugin-svelte": "3.0.2",
     "autoprefixer": "10.4.17",
+    "keyux": "0.1.2",
     "nanoid": "5.0.5",
     "nanostores": "0.9.5",
     "picocolors": "1.0.0",

diff --git a/web/pages/feeds/add.svelte b/web/pages/feeds/add.svelte
@@ -12,11 +12,9 @@
     previewUrl,
     previewUrlError,
     setPreviewCandidate,
-    setPreviewUrl,
     previewMessages as t
   } from '@slowreader/core'
 
-  import { jumpInto } from '../../lib/hotkeys.js'
   import Button from '../../ui/button.svelte'
   import CardLink from '../../ui/card-link.svelte'
   import CardLinks from '../../ui/card-links.svelte'
@@ -28,14 +26,14 @@
   import FeedsEdit from './edit.svelte'
   import FeedsPosts from './posts.svelte'
 
-  let links: HTMLUListElement
   let feed: HTMLDivElement
 </script>
 
 <TwoStepsPage title={$t.title}>
   <div slot="one">
     <Card>
       <TextField
+        controls="feeds-add_links"
         enterHint={$previewCandidates.length > 0}
         error={$previewUrlError ? $t[$previewUrlError] : undefined}
         errorId={$previewNoResults ? 'feeds-add-no-results' : undefined}
@@ -46,24 +44,14 @@
         on:input={e => {
           onPreviewUrlType(e.detail.value)
         }}
-        on:enter={e => {
-          setPreviewUrl(e.detail.value)
-          if ($previewCandidates.length > 0) {
-            jumpInto(links)
-          }
-        }}
       />
 
       {#if $previewCandidates.length > 0}
-        <CardLinks
-          bind:node={links}
-          on:enter={() => {
-            jumpInto(feed)
-          }}
-        >
+        <CardLinks id="feeds-add_links">
           {#each $previewCandidates as candidate (candidate.url)}
             <CardLink
               name={candidate.title}
+              controls="feeds-add_feed"
               current={$previewCandidate === candidate.url}
               on:click={() => {
                 setPreviewCandidate(candidate.url)
@@ -93,10 +81,10 @@
       </div>
     {/if}
   </div>
-  <div bind:this={feed} id="add_feed" slot="two">
+  <div bind:this={feed} id="feeds-add_feed" slot="two">
     {#if $previewCandidate}
       {#if $previewCandidateAdded === undefined}
-        <Loader zoneId="add_feed" />
+        <Loader zoneId="feeds-add_feed" />
         {#if $previewPosts}
           <FeedsPosts posts={$previewPosts} />
         {/if}

diff --git a/web/pages/feeds/categories.svelte b/web/pages/feeds/categories.svelte
@@ -79,6 +79,7 @@
                   {#each feeds as feed (feed.id)}
                     <CardLink
                       name={feed.title}
+                      controls="feeds-categories_edit"
                       current={feed.id === feedId}
                       first={feed.id === firstId(feeds)}
                       href={getURL({
@@ -95,7 +96,7 @@
       </ul>
     {/if}
   </div>
-  <div slot="two">
+  <div id="feeds-categories_edit" slot="two">
     {#if feedId}
       <FeedsEdit {feedId} />
     {/if}

diff --git a/web/stories/ui/radio.stories.svelte b/web/stories/ui/radio.stories.svelte
@@ -60,7 +60,7 @@
       />
     </Card>
   </Section>
-  <Section focus="label:first-of-type" width={500}>
+  <Section focus="label:first-of-type input" width={500}>
     <Card>
       <RadioField
         current="1"
@@ -143,7 +143,7 @@
       />
     </Card>
   </Section>
-  <Section focus="label:first-of-type" width={500}>
+  <Section focus="label:first-of-type input" width={500}>
     <Card>
       <RadioField
         current="1"