Add keyboard support to download modal for faster report downloads

NEWS.md

@@ -9,6 +9,10 @@
 * Supports `flextable` and `gtsummary` objects.
 * Soft deprecated `ReportCard`.
 
+### Enhancements
+
+* Enhanced keyboard accessibility in the download modal - users can now press Enter from any input field to trigger the download action.
+
 # teal.reporter 0.5.0
 
 ### Breaking changes

R/download.R

@@ -78,6 +78,7 @@ download_report_button_srv <- function(id,
       shiny::tags$div(
         class = "teal-reporter reporter-modal",
         .custom_css_dependency(),
+        shinyjs::extendShinyjs(text = "", functions = c("enterToSubmitModal")),
         shiny::modalDialog(
           easyClose = TRUE,
           shiny::tags$h3("Download the Report"),
@@ -105,6 +106,11 @@ download_report_button_srv <- function(id,
             showrcode = any_rcode_block(reporter),
             session = session
           ),
+          shiny::tags$script(
+            shiny::HTML(
+              sprintf("shinyjs.enterToSubmitModal('%s');", ns("download_data"))
+            )
+          ),
           footer = shiny::tagList(
             shiny::tags$button(
               type = "button",

inst/js/extendShinyJs.js

@@ -33,3 +33,27 @@ shinyjs.jumpToFocus = function(focus_id) {
     input.setSelectionRange(input.value.length, input.value.length);
   }
 }
+
+/* Enable pressing Enter anywhere in the modal to trigger a button click.
+ * This listens for Enter key events on all input fields within the modal.
+ * submit_id is the ID of the button to click when Enter is pressed.
+ */
+shinyjs.enterToSubmitModal = function(submit_id) {
+  document.getElementById('shiny-modal').addEventListener(
+    'shown.bs.modal',
+    () => {
+      const modal = document.getElementById('shiny-modal');
+      modal.addEventListener('keyup', (e) => {
+        // Check if Enter was pressed on an input or select element
+        const targetTag = e.target.tagName;
+        const isInputElement = targetTag === 'INPUT' || targetTag === 'SELECT';
+
+        if (e.key === 'Enter' && isInputElement) {
+          e.preventDefault();
+          document.getElementById(submit_id).click();
+        }
+      });
+    },
+    { once: true }
+  );
+}