feat: left/right keys can change columns or focus (#1516)

* feat: left/right keys can change columns or focus

* fixup

* fixup, add tests

src/routes/_components/NavShortcuts.html

@@ -8,6 +8,10 @@
 <Shortcut key="s" on:pressed="goto('/search')"/>
 <Shortcut key="h|?" on:pressed="showShortcutHelpDialog()"/>
 <Shortcut key="c|7" on:pressed="showComposeDialog()"/>
+{#if !$leftRightChangesFocus}
+  <Shortcut key="ArrowLeft" on:pressed="goLeftOrRight(true)" />
+  <Shortcut key="ArrowRight" on:pressed="goLeftOrRight(false)" />
+{/if}
 {#each $navPages as navPage, i}
   <Shortcut key={(i + 1).toString()} on:pressed="goto(navPage.href)" />
 {/each}
@@ -35,6 +39,21 @@
       async showComposeDialog () {
         const showComposeDialog = await importShowComposeDialog()
         showComposeDialog()
+      },
+      goLeftOrRight (left) {
+        let { currentPage, navPages } = this.store.get()
+        if (currentPage === 'notifications/mentions') { // special case
+          currentPage = 'notifications'
+        }
+        const idx = navPages.findIndex(_ => _.name === currentPage)
+        if (idx === -1) {
+          return
+        }
+        if (left && idx > 0) {
+          goto(navPages[idx - 1].href)
+        } else if (!left && idx < navPages.length - 1) {
+          goto(navPages[idx + 1].href)
+        }
       }
     }
   }

src/routes/_components/ShortcutHelpInfo.html

@@ -6,8 +6,19 @@
 {@html `
   <h2>Global</h2>
   <div class="hotkey-group">
+    ${$leftRightChangesFocus ?
+    `
+      <ul>
+        <li><kbd>→</kbd> to go to the next focusable element</li>
+        <li><kbd>←</kbd> to go to the previous focusable element</li>
+      </ul>
+    ` : ''}
     <ul>
-      <li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li>
+      <li>
+        <kbd>1</kbd> - <kbd>6</kbd>
+        ${$leftRightChangesFocus ? '' : `or <kbd>←</kbd>/<kbd>→</kbd>`}
+        to switch columns
+      </li>
       <li><kbd>7</kbd> or <kbd>c</kbd> to compose a new toot</li>
       <li><kbd>s</kbd> to search</li>
       <li><kbd>g</kbd> + <kbd>h</kbd> to go home</li>
@@ -40,7 +51,7 @@
   <h2>Media</h2>
   <div class="hotkey-group">
     <ul>
-      <li><kbd>&#8592;</kbd> - <kbd>&#8594;</kbd> to go to next or previous</li>
+      <li><kbd>←</kbd> / <kbd>→</kbd> to go to next or previous</li>
     </ul>
   </div>
 `}
@@ -83,7 +94,10 @@
   }
 </style>
 <script>
+  import { store } from '../_store/store'
+
   export default {
+    store: () => store,
     data: () => ({
       inDialog: false
     })

src/routes/_components/dialog/components/MediaDialog.html

@@ -82,8 +82,10 @@
   </div>
 </ModalDialog>
 
-<Shortcut scope='modal-{id}' key="ArrowLeft" on:pressed="prev()" />
-<Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" />
+{#if !$leftRightChangesFocus }
+  <Shortcut scope='modal-{id}' key="ArrowLeft" on:pressed="prev()" />
+  <Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" />
+{/if}
 <style>
   :global(.media-modal-dialog) {
     max-width: 100%;

src/routes/_pages/settings/hotkeys.html

@@ -3,10 +3,21 @@
 
   <h2 class="sr-only">Preferences</h2>
   <form class="ui-settings" aria-label="Hotkey settings">
-    <label class="setting-group">
+    <label class="setting-group {allowChangeHotkeySetting ? '' : 'disabled-style'}">
       <input type="checkbox" id="choice-disable-hotkeys"
-             bind:checked="$disableHotkeys" on:change="onChange()">
-      Disable hotkeys
+             bind:checked="$disableHotkeys"
+             on:change="onChange()"
+             disabled={!allowChangeHotkeySetting}
+      >
+      Disable all hotkeys
+    </label>
+    <label class="setting-group  {allowChangeLeftRightSetting ? '' : 'disabled-style'}">
+      <input type="checkbox" id="choice-left-right-focus"
+             bind:checked="$leftRightChangesFocus"
+             on:change="onChange()"
+             disabled={!allowChangeLeftRightSetting}
+      >
+      Left/right arrow keys change focus rather than columns/media
     </label>
   </form>
 
@@ -28,6 +39,10 @@
     padding: 5px 0;
   }
 
+  label.disabled-style {
+    color: var(--deemphasized-text-color);
+  }
+
   @media (max-width: 240px) {
     .ui-settings {
       padding: 20px 10px;
@@ -38,9 +53,18 @@
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
   import ShortcutHelpInfo from '../../_components/ShortcutHelpInfo.html'
   import { store } from '../../_store/store'
+  import { isKaiOS } from '../../_utils/userAgent'
 
   export default {
     store: () => store,
+    data: () => ({
+      allowChangeHotkeySetting: !isKaiOS() // In general KaiOS users cannot change this because they need the hotkeys
+    }),
+    computed: {
+      allowChangeLeftRightSetting: ({ $disableHotkeys }) => (
+        !$disableHotkeys && !isKaiOS()
+      )
+    },
     methods: {
       onChange () {
         this.store.save()

src/routes/_store/observers/leftRightFocusObservers.js

@@ -0,0 +1,114 @@
+// Makes it so the left and right arrows change focus, ala Tab/Shift+Tab. This is mostly designed
+// for KaiOS devices.
+
+export function leftRightFocusObservers (store) {
+  if (!process.browser) {
+    return
+  }
+
+  function getDialogParent (element) {
+    let parent = element.parentElement
+    while (parent) {
+      if (parent.classList.contains('modal-dialog')) {
+        return parent
+      }
+      parent = parent.parentElement
+    }
+  }
+
+  function getFocusableElements (activeElement) {
+    const query = `
+    a,
+    button, 
+    textarea, 
+    input[type=text], 
+    input[type=number],
+    input[type=search],
+    input[type=radio],
+    input[type=checkbox],
+    select, 
+    [tabindex="0"]
+  `
+
+    // Respect focus trap inside of dialogs
+    const dialogParent = getDialogParent(activeElement)
+    const root = dialogParent || document
+
+    return Array.from(root.querySelectorAll(query))
+      .filter(element => {
+        if (element === activeElement) {
+          return true
+        }
+        return !element.disabled &&
+          element.getAttribute('tabindex') !== '-1' &&
+          (element.offsetWidth > 0 || element.offsetHeight > 0)
+      })
+  }
+
+  function shouldIgnoreEvent (activeElement, key) {
+    const isTextarea = activeElement.tagName === 'TEXTAREA'
+    const isTextInput = activeElement.tagName === 'INPUT' &&
+      ['input', 'search'].includes(activeElement.getAttribute('type'))
+
+    if (!isTextarea && !isTextInput) {
+      return false
+    }
+
+    const { selectionStart, selectionEnd } = activeElement
+    // if the cursor is at the start or end of the textarea and the user wants to navigate out of it,
+    // then do so
+    if (key === 'ArrowLeft' && selectionStart === selectionEnd && selectionStart === 0) {
+      return false
+    } else if (key === 'ArrowRight' && selectionStart === selectionEnd && selectionStart === activeElement.value.length) {
+      return false
+    }
+    return true
+  }
+
+  function focusNextOrPrevious (e, key) {
+    const { activeElement } = document
+    if (shouldIgnoreEvent(activeElement, key)) {
+      return
+    }
+    const focusable = getFocusableElements(activeElement)
+    const index = focusable.indexOf(activeElement)
+    let element
+    if (key === 'ArrowLeft') {
+      console.log('focus previous')
+      element = focusable[index - 1] || focusable[0]
+    } else { // ArrowRight
+      console.log('focus next')
+      element = focusable[index + 1] || focusable[focusable.length - 1]
+    }
+    element.focus()
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  function handleEnter (e) {
+    const { activeElement } = document
+    if (activeElement.tagName === 'INPUT' && ['checkbox', 'radio'].includes(activeElement.getAttribute('type'))) {
+      // Explicitly override "enter" on an input and make it fire the checkbox/radio
+      activeElement.click()
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
+
+  function keyListener (e) {
+    const { key } = e
+    if (key === 'ArrowRight' || key === 'ArrowLeft') {
+      focusNextOrPrevious(e, key)
+    } else if (key === 'Enter') {
+      handleEnter(e)
+    }
+  }
+
+  store.observe('leftRightChangesFocus', leftRightChangesFocus => {
+    if (leftRightChangesFocus) {
+      window.addEventListener('keydown', keyListener)
+    } else {
+      window.removeEventListener('keydown', keyListener)
+    }
+  })
+}

src/routes/_store/observers/observers.js

@@ -7,6 +7,7 @@ import { setupLoggedInObservers } from './setupLoggedInObservers'
 import { logOutObservers } from './logOutObservers'
 import { touchObservers } from './touchObservers'
 import { grayscaleObservers } from './grayscaleObservers'
+import { leftRightFocusObservers } from './leftRightFocusObservers'
 
 export function observers (store) {
   onlineObservers(store)
@@ -17,5 +18,6 @@ export function observers (store) {
   touchObservers(store)
   logOutObservers(store)
   grayscaleObservers(store)
+  leftRightFocusObservers(store)
   setupLoggedInObservers(store)
 }

src/routes/_store/store.js

@@ -3,6 +3,7 @@ import { computations } from './computations/computations'
 import { mixins } from './mixins/mixins'
 import { LocalStorageStore } from './LocalStorageStore'
 import { observe } from 'svelte-extras'
+import { isKaiOS } from '../_utils/userAgent'
 
 const persistedState = {
   autoplayGifs: false,
@@ -15,7 +16,7 @@ const persistedState = {
   disableFavCounts: false,
   disableFollowerCounts: false,
   disableHotkeys: false,
-  disableInfiniteScroll: false,
+  disableInfiniteScroll: isKaiOS(),
   disableLongAriaLabels: false,
   disableNotificationBadge: false,
   disableReblogCounts: false,
@@ -23,6 +24,7 @@ const persistedState = {
   enableGrayscale: false,
   hideCards: false,
   largeInlineMedia: false,
+  leftRightChangesFocus: isKaiOS(),
   instanceNameInSearch: '',
   instanceThemes: {},
   instanceSettings: {},

src/routes/_utils/runMediumPriorityTask.js

@@ -3,7 +3,7 @@ import { store } from '../_store/store'
 
 // Rough guess at whether this is a "mobile" device or not, for the purposes
 // of "device class" estimations
-const IS_MOBILE = process.browser && navigator.userAgent.match(/(?:iPhone|iPod|iPad|Android)/)
+const IS_MOBILE = process.browser && navigator.userAgent.match(/(?:iPhone|iPod|iPad|Android|KAIOS)/)
 
 // Run a task that doesn't need to be processed immediately, but should
 // probably be delayed if we're on a mobile device. Also run it sooner

src/routes/_utils/shortcuts.js

@@ -179,7 +179,8 @@ function acceptShortcutEvent (event) {
     (event.shiftKey && event.key !== '?') || // '?' is a special case - it is allowed
     (target && (
       target.isContentEditable ||
-        ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)
+        ['TEXTAREA', 'SELECT'].includes(target.tagName) ||
+        (target.tagName === 'INPUT' && !['radio', 'checkbox'].includes(target.getAttribute('type')))
     ))
   )
 }

src/routes/_utils/userAgent.js

@@ -0,0 +1,3 @@
+import { thunk } from './thunk'
+
+export const isKaiOS = thunk(() => process.browser && /KAIOS/.test(navigator.userAgent))

tests/spec/024-shortcuts-navigation.js

@@ -1,10 +1,13 @@
 import {
+  disableHotkeys,
+  getActiveElementAriaLabel,
   getNthStatus,
-  getUrl, isNthStatusActive,
+  getUrl, homeNavButton, isNthStatusActive, leftRightChangesFocus, modalDialog,
   modalDialogContents,
-  notificationsNavButton, scrollToStatus
+  notificationsNavButton, scrollToStatus, settingsNavButton, sleep
 } from '../utils'
 import { loginAsFoobar } from '../roles'
+import { Selector as $ } from 'testcafe'
 
 fixture`024-shortcuts-navigation.js`
   .page`http://localhost:4002`
@@ -122,3 +125,66 @@ test('Shortcut . scrolls to top and focuses', async t => {
     .pressKey('.')
     .expect(isNthStatusActive(1)).ok()
 })
+
+test('Shortcut left and right changes columns', async t => {
+  await loginAsFoobar(t)
+
+  const steps = [
+    ['right', 'notifications'],
+    ['right', 'local'],
+    ['right', 'community'],
+    ['right', 'search'],
+    ['right', 'settings'],
+    ['right', 'settings'],
+    ['left', 'search'],
+    ['left', 'community'],
+    ['left', 'local'],
+    ['left', 'notifications'],
+    ['left', ''],
+    ['left', '']
+  ]
+
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/')
+
+  for (const [key, page] of steps) {
+    await t.pressKey(key)
+      .expect(getUrl()).eql('http://localhost:4002/' + page)
+  }
+})
+
+test('Shortcut left and right can change focus', async t => {
+  await loginAsFoobar(t)
+  await t
+    .click(settingsNavButton)
+    .click($('a[href="/settings/hotkeys"]'))
+    .click(leftRightChangesFocus)
+    .expect(leftRightChangesFocus.checked).ok()
+    .click(homeNavButton)
+  await sleep(1000)
+  await t
+    .pressKey('right')
+    .expect(getActiveElementAriaLabel()).eql('Home (current page)')
+    .pressKey('right')
+    .expect(getActiveElementAriaLabel()).eql('Notifications')
+    .pressKey('left')
+    .expect(getActiveElementAriaLabel()).eql('Home (current page)')
+})
+
+test('Shortcuts can be disabled', async t => {
+  await loginAsFoobar(t)
+  await t
+    .click(settingsNavButton)
+    .click($('a[href="/settings/hotkeys"]'))
+    .click(disableHotkeys)
+    .expect(disableHotkeys.checked).ok()
+    .click(homeNavButton)
+    .pressKey('2')
+  await sleep(500)
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .pressKey('h')
+  await sleep(500)
+  await t
+    .expect(modalDialog.exists).false
+})

tests/utils.js

@@ -50,6 +50,8 @@ export const neverMarkMediaSensitiveInput = $('#choice-never-mark-media-sensitiv
 export const removeEmojiFromDisplayNamesInput = $('#choice-omit-emoji-in-display-names')
 export const disableInfiniteScroll = $('#choice-disable-infinite-scroll')
 export const disableUnreadNotifications = $('#choice-disable-unread-notification-counts')
+export const leftRightChangesFocus = $('#choice-left-right-focus')
+export const disableHotkeys = $('#choice-disable-hotkeys')
 export const dialogOptionsOption = $('.modal-dialog button')
 export const emojiSearchInput = $('.emoji-mart-search input')
 export const confirmationDialogOKButton = $('.confirmation-dialog-form-flex button:nth-child(1)')
@@ -136,6 +138,10 @@ export const getActiveElementAriaPosInSet = exec(() => (
   (document.activeElement && document.activeElement.getAttribute('aria-posinset')) || ''
 ))
 
+export const getActiveElementAriaLabel = exec(() => (
+  (document.activeElement && document.activeElement.getAttribute('aria-label')) || ''
+))
+
 export const getActiveElementInsideNthStatus = exec(() => {
   let element = document.activeElement
   while (element) {