From 6f334d43576fd0c049b9419b4da246efadde3fe5 Mon Sep 17 00:00:00 2001
From: Oliver-ctrlo <119069310+Oliver-ctrlo@users.noreply.github.com>
Date: Mon, 25 Sep 2023 11:21:04 +0100
Subject: [PATCH 1/3] Added keydown event for record popup

Added 'space' and 'enter' key-down functionality for the record pop-ups
---
 src/frontend/components/record-popup/lib/component.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/record-popup/lib/component.js b/src/frontend/components/record-popup/lib/component.js
index eb11ebef1..6ae895b81 100644
--- 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) {

From 923a03478d3120855e69f5164fac5f2b922620ac Mon Sep 17 00:00:00 2001
From: Oliver-ctrlo <119069310+Oliver-ctrlo@users.noreply.github.com>
Date: Mon, 25 Sep 2023 12:05:08 +0100
Subject: [PATCH 2/3] Stopped bubbling

Added a Stopprop to popover so it no longer bubbles up to the record pop-over.

Then added keyboard functionality and disabled default behaviour. As I was finding that the default button click (via keyboard) was being over-ridden by other events with specified key-down functionality.
---
 src/frontend/components/popover/lib/component.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/popover/lib/component.js b/src/frontend/components/popover/lib/component.js
index 922ae6b1d..1b640576f 100644
--- 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)

From 206060a941b7aa75cf6cccbe17ba8fad63226fdf Mon Sep 17 00:00:00 2001
From: Oliver-ctrlo <119069310+Oliver-ctrlo@users.noreply.github.com>
Date: Mon, 25 Sep 2023 12:15:40 +0100
Subject: [PATCH 3/3] Added keyboard functionality.

I was finding that the default keyboard click no longer worked when there was a parent element with a key-down event.
So resolved the issue by removing the default behaviour of this click event and replacing it with it's own specified keyboard functionality.
---
 .../components/more-less/lib/disclosure-widgets.js         | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/more-less/lib/disclosure-widgets.js b/src/frontend/components/more-less/lib/disclosure-widgets.js
index 113720f76..a8cd690b5 100644
--- 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)