add skip-links javascript

app/webpacker/javascript/skip_links.js

@@ -0,0 +1,21 @@
+// Ensure skip-links behave correctly when using VoiceOver on iOS or TalkBack on
+// Android. See https://axesslab.com/skip-links/ for a discussion of the issue
+// and suggested fixes (including the one below from Mike Foskett).
+
+(_ => {
+  const skip_lnk = document.querySelector('.skiplink');
+  if (!skip_lnk) return false;
+  skip_lnk.addEventListener('click', e => {
+    e.preventDefault();
+    const to_obj = document.getElementById(skip_lnk.href.split('#')[1]);
+    if (to_obj) {
+      to_obj.setAttribute('tabindex', '-1');
+      to_obj.addEventListener('blur', e => {
+        to_obj.removeAttribute('tabindex');
+      }, {
+        once: true
+      });
+      to_obj.focus();
+    }
+  });
+})();

app/webpacker/packs/application.js

@@ -11,6 +11,7 @@ require.context('../documents', true);
 
 require('../javascript/perfume');
 require('../javascript/zendesk_chat_reload');
+require('../javascript/skip_links');
 
 Rails.start();
 Turbolinks.start();