Merge pull request #235 from Oliver-ctrlo/uiux

Keyboard functionality for the record-popup
ctrlo · Sep 25, 2023 · 7d6a86a · 7d6a86a
2 parents e923313 + 206060a
commit 7d6a86a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/src/frontend/components/more-less/lib/disclosure-widgets.js b/src/frontend/components/more-less/lib/disclosure-widgets.js
@@ -89,7 +89,12 @@ const onDisclosureMouseout = function(e) {
 }
 
 const setupDisclosureWidgets = function(context) {
-  $('.trigger[aria-expanded]', context).on('click', onDisclosureClick)
+  $('.trigger[aria-expanded]', context).on('click keydown', function(ev) {
+    if (ev.type === 'click' || (ev.type === 'keydown' && (ev.which === 13 || ev.which === 32))) {
+      ev.preventDefault();
+      onDisclosureClick.call(this, ev);
+    }
+  });
 
   // Also show/hide disclosures on hover for widgets with the data-expand-on-hover attribute set to true
   $('.trigger[aria-expanded][data-expand-on-hover=true]', context).on('mouseover', onDisclosureMouseover)

diff --git a/src/frontend/components/popover/lib/component.js b/src/frontend/components/popover/lib/component.js
@@ -19,13 +19,17 @@ class PopoverComponent extends Component {
 
       this.popover.removeClass(this.strShowClassName)
       this.arrow.removeClass(this.strShowClassName)
-      button.click( (ev) => { this.handleClick(ev) })
+      button.on('click keydown', (ev) => {
+        if (ev.type === 'click' || (ev.type === 'keydown' && (ev.which === 13 || ev.which === 32))) {
+          ev.preventDefault()
+          this.handleClick(ev) }
+        })
   }
 
   handleClick(ev) {
     const target = $(ev.target)
-
     this.togglePopover()
+    ev.stopPropagation();
 
     // TODO: add listener to document when clicking outside the popover to close it
     // (disabled for now because it caused errors)

diff --git a/src/frontend/components/record-popup/lib/component.js b/src/frontend/components/record-popup/lib/component.js
@@ -9,7 +9,11 @@ class RecordPopupComponent extends Component {
   }
 
   initRecordPopup() {
-    $(this.element).on('click', (ev) => { this.handleClick(ev) })
+    $(this.element).on('click keydown', (ev) => {
+      if (ev.type === 'click' || (ev.type === 'keydown' && (ev.which === 13 || ev.which === 32))) {
+        this.handleClick(ev)
+      })
+    }
   }
 
   handleClick(ev) {