improve accessibility

app/javascript/elements/download_button.js

@@ -5,6 +5,12 @@ export default targetable(class extends HTMLElement {
 
   connectedCallback () {
     this.addEventListener('click', () => this.downloadFiles())
+    this.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        this.downloadFiles()
+      }
+    })
   }
 
   toggleState () {

app/javascript/elements/modal_button.js

@@ -0,0 +1,18 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const dialog = document.getElementById(this.dataset.target)
+
+    this.querySelector('button').addEventListener('click', () => {
+      if (dialog) {
+        dialog.inert = false
+        dialog.showModal()
+      }
+    })
+
+    if (dialog) {
+      dialog.addEventListener('close', () => {
+        dialog.inert = true
+      })
+    }
+  }
+}

app/javascript/elements/scroll_buttons.js

@@ -47,11 +47,13 @@ export default class extends HTMLElement {
 
     this.classList.remove('hidden', '-translate-y-10', 'opacity-0')
     this.classList.add('translate-y-0', 'opacity-100')
+    this.querySelectorAll('[tabindex]').forEach((el) => { el.tabIndex = 0 })
   }
 
   hideButtons () {
     this.classList.remove('translate-y-0', 'opacity-100')
     this.classList.add('-translate-y-10', 'opacity-0')
+    this.querySelectorAll('[tabindex]').forEach((el) => { el.tabIndex = -1 })
 
     setTimeout(() => {
       if (this.classList.contains('-translate-y-10')) {