Improve accessibility of modal dialogs (#974)

* improve details modal accessibility

* improve tag modal accessibility

* fix overlays in archive and shared pages

* update tests

* use buttons for closing dialogs

* replace description list

* hide preview image from screen readers

* update tests

bookmarks/frontend/behaviors/focus-utils.js

@@ -0,0 +1,59 @@
+let keyboardActive = false;
+
+window.addEventListener(
+  "keydown",
+  () => {
+    keyboardActive = true;
+  },
+  { capture: true },
+);
+
+window.addEventListener(
+  "mousedown",
+  () => {
+    keyboardActive = false;
+  },
+  { capture: true },
+);
+
+export function isKeyboardActive() {
+  return keyboardActive;
+}
+
+export class FocusTrapController {
+  constructor(element) {
+    this.element = element;
+    this.focusableElements = this.element.querySelectorAll(
+      'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])',
+    );
+    this.firstFocusableElement = this.focusableElements[0];
+    this.lastFocusableElement =
+      this.focusableElements[this.focusableElements.length - 1];
+
+    this.onKeyDown = this.onKeyDown.bind(this);
+
+    this.firstFocusableElement.focus({ focusVisible: keyboardActive });
+    this.element.addEventListener("keydown", this.onKeyDown);
+  }
+
+  destroy() {
+    this.element.removeEventListener("keydown", this.onKeyDown);
+  }
+
+  onKeyDown(event) {
+    if (event.key !== "Tab") {
+      return;
+    }
+    if (event.shiftKey) {
+      if (document.activeElement === this.firstFocusableElement) {
+        event.preventDefault();
+        this.lastFocusableElement.focus();
+      }
+    } else {
+      if (document.activeElement === this.lastFocusableElement) {
+        event.preventDefault();
+        this.firstFocusableElement.focus();
+      }
+    }
+  }
+}