Issue/216 plus 218 fix modal focus

CHANGELOG.md

@@ -4,7 +4,9 @@ This app allows the user to explore HMLR price-paid open linked data.
 
 ## 1.7.7 - 2024-08
 
+- (Dan) updates the search results modal focus flow to meet accessibility requirments [GH-216](https://github.com/epimorphics/ppd-explorer/issues/216)
 - (Dan) updates the form to meet various accessibility requirments [GH-217](https://github.com/epimorphics/ppd-explorer/issues/217)
+- (Dan) updates the search results modal focus flow to meet accessibility requirments [GH-218](https://github.com/epimorphics/ppd-explorer/issues/218)
 
 ## 1.7.6 - 2024-03-08
 

app/assets/javascripts/modal.js

@@ -0,0 +1,61 @@
+document.addEventListener("DOMContentLoaded", function () {
+  function handleModal(
+    modalSelector,
+    focusableElementsSelector,
+    openButtonsSelector,
+    focusOnOpenIndex
+  ) {
+    if (focusOnOpenIndex === undefined) focusOnOpenIndex = 0
+
+    var modal = document.querySelector(modalSelector)
+    var focusableElements = modal.querySelectorAll(focusableElementsSelector)
+    var firstFocusableElement = focusableElements[0]
+    var lastFocusableElement = focusableElements[focusableElements.length - 1]
+    var focusOnOpenElement = focusableElements[focusOnOpenIndex]
+    var openButtons = document.querySelectorAll(openButtonsSelector)
+
+    function onModalOpen() {
+      if (modalSelector === "#help-dialog") {
+        setTimeout(function () {
+          focusOnOpenElement.focus()
+        }, 10)
+      }
+
+      document.addEventListener("keydown", function (e) {
+        var isTabPressed = e.key === "Tab"
+
+        if (!isTabPressed) {
+          return
+        }
+
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableElement) {
+            lastFocusableElement.focus()
+            e.preventDefault()
+          }
+        } else {
+          if (document.activeElement === lastFocusableElement) {
+            firstFocusableElement.focus()
+            e.preventDefault()
+          }
+        }
+      })
+    }
+
+    openButtons.forEach(function (button) {
+      button.addEventListener("click", function (event) {
+        event.preventDefault()
+        onModalOpen()
+      })
+    })
+  }
+
+  handleModal("#bookmark-dialog", "input, .btn, .close", ".action-bookmark")
+
+  handleModal(
+    "#help-dialog",
+    ".close, .trouble-shooting, .email-address, .btn",
+    ".action-help",
+    1
+  )
+})

app/views/ppd/_bookmark_modal.html.haml

@@ -1,11 +1,12 @@
 -# frozen_string_literal: true
 
 #bookmark-modal.modal
-  .modal-dialog
+  #bookmark-dialog.modal-dialog{role: "dialog", "aria-labelledby": "bookmark-link", "aria-modal": "true"}
     .modal-content
       .modal-header
         %button.close{ type: "button", data: {dismiss: "modal"}, aria: {hidden: "true"}}
           ×
+        #bookmark-link 
         %h2.modal-title
           Link to the current search
       .modal-body
@@ -23,10 +24,6 @@
           .twitter
             %a.twitter-share-button{ href: "https://twitter.com/share", data: {url: "", text: "Open data from Land Registry", hashtags: "opendata"}}
               Tweet
-          .gplus
-            #plus-one
-          .facebook
-            .fb-share-button{ data: {href: "", type: "button_count"}}
 
       .modal-footer
         .row

app/views/ppd/_help_modal.html.haml

@@ -1,18 +1,19 @@
 -# frozen_string_literal: true
 
 #help-modal.modal
-  .modal-dialog
+  #help-dialog.modal-dialog{role: "dialog", "aria-labelledby": "help-title", "aria-modal": "true"}
     .modal-content
       .modal-header
         %button.close{ type: "button", data: {dismiss: "modal"}, aria: {hidden: "true"}}
           ×
+          #help-title
         %h2.modal-title
           Help and suggestions
       .modal-body
         %h3 Troubleshooting guide
         %p
           See the
-          %a{href: "https://www.gov.uk/about-the-price-paid-data#price-paid-data-report-builder"} troubleshooting guide
+          %a.trouble-shooting{href: "https://www.gov.uk/about-the-price-paid-data#price-paid-data-report-builder"} troubleshooting guide
           for answers to commonly encountered difficulties in using this
           dataset.
         %h3 Tips
@@ -39,7 +40,7 @@
         %p
           If you have additional questions, or you have feedback on this beta service,
           please email
-          = mail_to(Rails.application.config.contact_email_address)
+          .email-address= mail_to(Rails.application.config.contact_email_address)
 
       .modal-footer
         .row