aria grid roles, mobile keyboard entry, on-screen input switch

frontend/src/App.tsx

@@ -25,6 +25,7 @@ import { useNarrator } from './hooks/useNarrator'
 import { useSounds } from './hooks/useSounds'
 import { useStore } from './store'
 import { generateShareText } from './share'
+import * as api from './api'
 import * as offlineStore from './offline'
 
 export default function App() {
@@ -33,6 +34,7 @@ export default function App() {
   const error = useStore((s) => s.error)
   const solved = useStore((s) => s.solved)
   const inputMode = useStore((s) => s.inputMode)
+  const setInputMode = useStore((s) => s.setInputMode)
   const fetchSession = useStore((s) => s.fetchSession)
   const loadByShortId = useStore((s) => s.loadByShortId)
   const checkPendingReceipts = useStore((s) => s.checkPendingReceipts)
@@ -307,6 +309,16 @@ export default function App() {
             <div className="grid-column">
               <h2 className="visually-hidden">{t('app.crosswordGrid')}</h2>
               <Grid />
+              <div className="game-input-mode" role="group" aria-label={t('settings.display.inputMode')}>
+                {(['auto', 'keyboard', 'stylus'] as const).map(m => (
+                  <button key={m} type="button"
+                    className={`btn btn-sm ${inputMode === m ? 'btn-primary' : ''}`}
+                    aria-pressed={inputMode === m}
+                    onClick={() => { setInputMode(m); api.fetchSettings().then(s => api.saveSettings({ ...s, inputMode: m })) }}>
+                    {m === 'auto' ? t('settings.display.inputAuto') : m === 'keyboard' ? t('settings.display.inputKeyboard') : t('settings.display.inputStylus')}
+                  </button>
+                ))}
+              </div>
               {inputMode !== 'keyboard' && <ZoomStrip onDone={() => {}} />}
               <h2 className="visually-hidden">{t('app.gameControls')}</h2>
               <InfoBar />