Keyboard navigation

arkd.Dockerfile

@@ -1,5 +1,5 @@
 # First image used to build the sources
-FROM golang:1.25.3 AS builder
+FROM golang:1.25.5 AS builder
 
 ARG TARGETOS
 ARG TARGETARCH

arkdwallet.Dockerfile

@@ -1,5 +1,5 @@
 # First stage: build the ark-wallet-daemon binary
-FROM golang:1.25.3 AS builder
+FROM golang:1.25.5 AS builder
 
 ARG VERSION
 ARG TARGETOS

nak.Dockerfile

@@ -1,5 +1,5 @@
 # build stage
-FROM golang:1.25.3-alpine AS builder
+FROM golang:1.25.5-alpine AS builder
 
 # Install build dependencies for CGO (required by nak's lmdb dependency)
 RUN apk add --no-cache gcc musl-dev

src/App.tsx

@@ -30,6 +30,7 @@ import { pwaIsInstalled } from './lib/pwa'
 import FlexCol from './components/FlexCol'
 import WalletIcon from './icons/Wallet'
 import AppsIcon from './icons/Apps'
+import Focusable from './components/Focusable'
 
 setupIonicReact()
 
@@ -65,6 +66,16 @@ export default function App() {
       .finally(() => setJsCapabilitiesChecked(true))
   }, [])
 
+  // Global escape key to go back to wallet
+  useEffect(() => {
+    if (!navigate) return
+    const handleGlobalDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') navigate(Pages.Wallet)
+    }
+    window.addEventListener('keydown', handleGlobalDown)
+    return () => window.removeEventListener('keydown', handleGlobalDown)
+  }, [navigate])
+
   useEffect(() => {
     if (aspInfo.unreachable) return navigate(Pages.Unavailable)
     if (jsCapabilitiesChecked && !isCapable) return navigate(Pages.Unavailable)
@@ -137,23 +148,29 @@ export default function App() {
               {tab === Tabs.Settings ? comp : <></>}
             </IonTab>
             <IonTabBar slot='bottom'>
-              <IonTabButton tab={Tabs.Wallet} selected={tab === Tabs.Wallet} onClick={handleWallet}>
-                <FlexCol centered gap='6px' testId='tab-wallet'>
-                  <WalletIcon />
-                  Wallet
-                </FlexCol>
+              <IonTabButton tab={Tabs.Wallet} onClick={handleWallet} selected={tab === Tabs.Wallet}>
+                <Focusable>
+                  <FlexCol centered gap='6px' padding='5px' testId='tab-wallet'>
+                    <WalletIcon />
+                    Wallet
+                  </FlexCol>
+                </Focusable>
               </IonTabButton>
-              <IonTabButton tab={Tabs.Apps} selected={tab === Tabs.Apps} onClick={handleApps}>
-                <FlexCol centered gap='6px' testId='tab-apps'>
-                  <AppsIcon />
-                  Apps
-                </FlexCol>
+              <IonTabButton tab={Tabs.Apps} onClick={handleApps} selected={tab === Tabs.Apps}>
+                <Focusable>
+                  <FlexCol centered gap='6px' padding='5px' testId='tab-apps'>
+                    <AppsIcon />
+                    Apps
+                  </FlexCol>
+                </Focusable>
               </IonTabButton>
-              <IonTabButton tab={Tabs.Settings} selected={tab === Tabs.Settings} onClick={handleSettings}>
-                <FlexCol centered gap='6px' testId='tab-settings'>
-                  <SettingsIcon />
-                  Settings
-                </FlexCol>
+              <IonTabButton tab={Tabs.Settings} onClick={handleSettings} selected={tab === Tabs.Settings}>
+                <Focusable>
+                  <FlexCol centered gap='6px' padding='5px' testId='tab-settings'>
+                    <SettingsIcon />
+                    Settings
+                  </FlexCol>
+                </Focusable>
               </IonTabButton>
             </IonTabBar>
           </IonTabs>

src/components/ExpandAddresses.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Text, { TextSecondary } from './Text'
 import { prettyLongText } from '../lib/format'
 import ChevronDownIcon from '../icons/ChevronDown'
@@ -11,6 +11,7 @@ import { copyToClipboard } from '../lib/clipboard'
 import CheckMarkIcon from '../icons/CheckMark'
 import { useIonToast } from '@ionic/react'
 import { copiedToClipboard } from '../lib/toast'
+import Focusable from './Focusable'
 
 interface ExpandAddressesProps {
   bip21uri: string
@@ -32,6 +33,19 @@ export default function ExpandAddresses({
 
   const [present] = useIonToast()
 
+  useEffect(() => {
+    const handleArrowDown = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowDown') {
+        if (!expand) setExpand(true)
+      }
+      if (event.key === 'ArrowUp') {
+        if (expand) setExpand(false)
+      }
+    }
+    window.addEventListener('keydown', handleArrowDown)
+    return () => window.removeEventListener('keydown', handleArrowDown)
+  }, [expand])
+
   const handleCopy = async (value: string) => {
     await copyToClipboard(value)
     present(copiedToClipboard)
@@ -43,33 +57,42 @@ export default function ExpandAddresses({
     setExpand(!expand)
   }
 
-  const ExpandLine = ({ title, value }: { title: string; value: string }) => (
-    <FlexRow between onClick={() => onClick(value)}>
-      <FlexCol gap='0'>
-        <TextSecondary>{title}</TextSecondary>
-        <Text>{prettyLongText(value, 12)}</Text>
-      </FlexCol>
-      <Shadow flex onClick={() => handleCopy(value)}>
-        {copied === value ? <CheckMarkIcon /> : <CopyIcon />}
-      </Shadow>
-    </FlexRow>
+  const onEnter = (value: string) => {
+    handleCopy(value)
+    onClick(value)
+  }
+
+  const ExpandLine = ({ testId, title, value }: { testId: string; title: string; value: string }) => (
+    <Focusable onEnter={() => onEnter(value)}>
+      <FlexRow between onClick={() => onClick(value)}>
+        <FlexCol gap='0'>
+          <TextSecondary>{title}</TextSecondary>
+          <Text>{prettyLongText(value, 12)}</Text>
+        </FlexCol>
+        <Shadow flex onClick={() => handleCopy(value)} testId={testId + '-address-copy'}>
+          {copied === value ? <CheckMarkIcon /> : <CopyIcon />}
+        </Shadow>
+      </FlexRow>
+    </Focusable>
   )
 
   return (
     <div style={{ margin: '0 auto', maxWidth: '100%', width: '300px' }}>
-      <Shadow>
-        <FlexRow between onClick={handleExpand}>
-          <Text>Copy address</Text>
-          {expand ? <ChevronUpIcon /> : <ChevronDownIcon />}
-        </FlexRow>
-      </Shadow>
+      <Focusable onEnter={handleExpand}>
+        <Shadow>
+          <FlexRow between onClick={handleExpand}>
+            <Text>Copy address</Text>
+            {expand ? <ChevronUpIcon /> : <ChevronDownIcon />}
+          </FlexRow>
+        </Shadow>
+      </Focusable>
       {expand ? (
         <div style={{ padding: '1rem 0 0 0.5rem', width: '100%' }}>
           <FlexCol gap='0.21rem'>
-            {bip21uri ? <ExpandLine title='BIP21' value={bip21uri} /> : null}
-            {boardingAddr ? <ExpandLine title='BTC address' value={boardingAddr} /> : null}
-            {offchainAddr ? <ExpandLine title='Ark address' value={offchainAddr} /> : null}
-            {invoice ? <ExpandLine title='Lightning invoice' value={invoice} /> : null}
+            {bip21uri ? <ExpandLine testId='bip21' title='BIP21' value={bip21uri} /> : null}
+            {boardingAddr ? <ExpandLine testId='btc' title='BTC address' value={boardingAddr} /> : null}
+            {offchainAddr ? <ExpandLine testId='ark' title='Ark address' value={offchainAddr} /> : null}
+            {invoice ? <ExpandLine testId='invoice' title='Lightning invoice' value={invoice} /> : null}
           </FlexCol>
         </div>
       ) : null}

src/components/Focusable.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react'
+
+export default function Focusable({
+  ariaLabel,
+  children,
+  inactive,
+  onEscape,
+  onEnter,
+  round,
+  role,
+  fit,
+  id,
+}: {
+  ariaLabel?: string
+  children: ReactNode
+  inactive?: boolean
+  onEscape?: () => void
+  onEnter?: () => void
+  round?: boolean
+  role?: string
+  fit?: boolean
+  id?: string
+}) {
+  const style: React.CSSProperties = {
+    borderRadius: round ? '0.5rem' : undefined,
+    width: fit ? 'fit-content' : '100%',
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (onEnter && ['Enter', ' '].includes(e.key)) {
+      e.stopPropagation()
+      e.preventDefault()
+      onEnter()
+    }
+    if (onEscape && e.key === 'Escape') {
+      e.stopPropagation()
+      e.preventDefault()
+      onEscape()
+    }
+  }
+
+  return (
+    <div
+      id={id}
+      style={style}
+      className='focusable'
+      role={role ?? 'button'}
+      onKeyDown={handleKeyDown}
+      tabIndex={inactive ? -1 : 0}
+      aria-label={ariaLabel ?? 'Focusable element'}
+    >
+      {children}
+    </div>
+  )
+}

src/components/Header.tsx

@@ -4,6 +4,7 @@ import Shadow from './Shadow'
 import Text from './Text'
 import FlexRow from './FlexRow'
 import React from 'react'
+import Focusable from './Focusable'
 
 interface HeaderProps {
   auxAriaLabel?: string
@@ -15,8 +16,8 @@ interface HeaderProps {
 }
 
 export default function Header({ auxAriaLabel, auxFunc, auxText, back, text, auxIcon }: HeaderProps) {
-  const SideButton = (text: string, onClick = () => {}) => (
-    <Shadow onClick={onClick}>
+  const SideButton = (text: string) => (
+    <Shadow>
       <Text color='dark80' centered tiny wrap>
         {text}
       </Text>
@@ -34,18 +35,26 @@ export default function Header({ auxAriaLabel, auxFunc, auxText, back, text, aux
   return (
     <IonHeader style={{ boxShadow: 'none' }}>
       <FlexRow between>
-        <div style={{ minWidth: '4rem' }}>
+        <div style={{ minWidth: '4rem', marginLeft: '0.5rem' }}>
           {back ? (
-            <div onClick={back} style={{ cursor: 'pointer', marginLeft: '0.5rem' }} aria-label='Go back'>
-              <BackIcon />
-            </div>
+            <Focusable onEnter={back} fit round>
+              <div onClick={back} style={{ cursor: 'pointer' }} aria-label='Go back'>
+                <BackIcon />
+              </div>
+            </Focusable>
           ) : (
             '\u00A0'
           )}
         </div>
         <IonTitle className='ion-text-center'>{text}</IonTitle>
         <div style={style} onClick={auxFunc} aria-label={auxAriaLabel}>
-          {auxText ? SideButton(auxText) : auxIcon ? auxIcon : '\u00A0'}
+          {auxText || auxIcon ? (
+            <Focusable onEnter={auxFunc} fit round>
+              {auxText ? SideButton(auxText) : <div style={{ padding: '0.5rem' }}>{auxIcon}</div>}
+            </Focusable>
+          ) : (
+            '\u00A0'
+          )}
         </div>
       </FlexRow>
     </IonHeader>

src/components/InputAmount.tsx

@@ -5,6 +5,7 @@ import InputContainer from './InputContainer'
 import { ConfigContext } from '../providers/config'
 import { prettyNumber } from '../lib/format'
 import { LimitsContext } from '../providers/limits'
+import Focusable from './Focusable'
 
 interface InputAmountProps {
   disabled?: boolean
@@ -46,15 +47,12 @@ export default function InputAmount({
   const [error, setError] = useState('')
   const [otherValue, setOtherValue] = useState('')
 
-  const firstRun = useRef(true)
   const input = useRef<HTMLIonInputElement>(null)
 
+  // focus input when focus prop changes
   useEffect(() => {
-    if (focus && firstRun.current) {
-      firstRun.current = false
-      input.current?.setFocus()
-    }
-  })
+    if (focus && input.current) input.current.setFocus()
+  }, [focus])
 
   useEffect(() => {
     setOtherValue(useFiat ? prettyNumber(sats) : prettyNumber(toFiat(sats), 2))
@@ -98,16 +96,17 @@ export default function InputAmount({
           </IonText>
         </IonInput>
         {onMax && !disabled && !readOnly ? (
-          <IonText
-            slot='end'
-            style={{ ...fontStyle, marginLeft: '0.5rem', color: 'var(--purpletext)', cursor: 'pointer' }}
-            onClick={onMax}
-            role='button'
-            tabIndex={0}
-            aria-label='Set maximum amount'
-          >
-            Max
-          </IonText>
+          <Focusable onEnter={onMax} fit>
+            <IonText
+              slot='end'
+              role='button'
+              onClick={onMax}
+              aria-label='Set maximum amount'
+              style={{ ...fontStyle, marginLeft: '0.5rem', color: 'var(--purpletext)', cursor: 'pointer' }}
+            >
+              Max
+            </IonText>
+          </Focusable>
         ) : null}
       </InputContainer>
     </>

src/components/InputPassword.tsx

@@ -15,15 +15,12 @@ interface InputPasswordProps {
 export default function InputPassword({ focus, label, onChange, onEnter, strength, placeholder }: InputPasswordProps) {
   const right = strength ? <StrengthLabel strength={strength} /> : undefined
 
-  const firstRun = useRef(true)
   const input = useRef<HTMLIonInputElement>(null)
 
+  // focus input when focus prop changes
   useEffect(() => {
-    if (focus && firstRun.current) {
-      firstRun.current = false
-      input.current?.setFocus()
-    }
-  })
+    if (focus && input.current) input.current.setFocus()
+  }, [focus, input.current])
 
   return (
     <InputContainer label={label} right={right}>