fix: support KaiOS arrow navigation on public pages (#12251)

4 files changed, 29 insertions, 3 deletions

diff --git a/app/javascript/mastodon/load_keyboard_extensions.js b/app/javascript/mastodon/load_keyboard_extensions.js
new file mode 100644
index 000000000..2dd0e45fa
--- /dev/null
+++ b/app/javascript/mastodon/load_keyboard_extensions.js
@@ -0,0 +1,16 @@
+// On KaiOS, we may not be able to use a mouse cursor or navigate using Tab-based focus, so we install
+// special left/right focus navigation keyboard listeners, at least on public pages (i.e. so folks
+// can at least log in using KaiOS devices).
+
+function importArrowKeyNavigation() {
+  return import(/* webpackChunkName: "arrow-key-navigation" */ 'arrow-key-navigation');
+}
+
+export default function loadKeyboardExtensions() {
+  if (/KAIOS/.test(navigator.userAgent)) {
+    return importArrowKeyNavigation().then(arrowKeyNav => {
+      arrowKeyNav.register();
+    });
+  }
+  return Promise.resolve();
+}
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index ed713f335..6a7f8831d 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -2,6 +2,7 @@ import escapeTextContentForBrowser from 'escape-html';
 import loadPolyfills from '../mastodon/load_polyfills';
 import ready from '../mastodon/ready';
 import { start } from '../mastodon/common';
+import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
 
 start();
 
@@ -259,6 +260,9 @@ function main() {
   });
 }
 
-loadPolyfills().then(main).catch(error => {
-  console.error(error);
-});
+loadPolyfills()
+  .then(main)
+  .then(loadKeyboardExtensions)
+  .catch(error => {
+    console.error(error);
+  });
diff --git a/package.json b/package.json
index 8341ba228..62929ad0a 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@babel/runtime": "^7.5.4",
     "@clusterws/cws": "^0.15.2",
     "array-includes": "^3.0.3",
+    "arrow-key-navigation": "^1.0.2",
     "autoprefixer": "^9.6.1",
     "axios": "^0.19.0",
     "babel-loader": "^8.0.6",
diff --git a/yarn.lock b/yarn.lock
index c9bd6ae74..35eb1ec33 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1657,6 +1657,11 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
+arrow-key-navigation@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/arrow-key-navigation/-/arrow-key-navigation-1.0.2.tgz#c1b5886240819db6c0b2b84702de1313786ce53e"
+  integrity sha512-Wj67sJpfK7vrj0/aOstIsRMsUQtpVODBTQDcRaDvvPZdzZMotj8oYGsEsoYiDohShDlDU6ywVkHLtXGH4TfEtQ==
+
 asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"