Updates to modal and accessibility with RSVP block.

build/blocks/modal-manager/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => 'ce417fbf5d65acdac906', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '7c046a9bbf2bbab0cd44', 'type' => 'module');

build/blocks/rsvp-v2/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => 'e1613cf23a00236c7b5f', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '22c3b2beeb12d7cd5f38', 'type' => 'module');

src/blocks/modal-manager/view.js

@@ -5,10 +5,13 @@ import { store } from '@wordpress/interactivity';
 
 store('gatherpress', {
 	actions: {
-		openModal(event) {
-			event.preventDefault();
+		openModal(event = null, element = null) {
+			if (event) {
+				event.preventDefault();
+			}
+
+			element = element ?? event.target;
 
-			const element = event.target;
 			const modalManager = element.closest(
 				'.wp-block-gatherpress-modal-manager'
 			);
@@ -23,10 +26,13 @@ store('gatherpress', {
 				}
 			}
 		},
-		closeModal(event) {
-			event.preventDefault();
+		closeModal(event = null, element = null) {
+			if (event) {
+				event.preventDefault();
+			}
+
+			element = element ?? event.target;
 
-			const element = event.target;
 			const modalManager = element.closest(
 				'.wp-block-gatherpress-modal-manager'
 			);

src/blocks/rsvp-v2/view.js

@@ -8,14 +8,15 @@ import { store, getElement } from '@wordpress/interactivity';
  */
 import { getFromGlobal } from '../../helpers/globals';
 
-const { state } = store('gatherpress', {
+const { state, actions } = store('gatherpress', {
 	state: {
 		rsvpStatus:
 			getFromGlobal('eventDetails.currentUser.status') ?? 'no_status',
 	},
 	actions: {
 		updateRsvp() {
 			let status = 'not_attending';
+			const element = getElement();
 
 			if (['not_attending', 'no_status'].includes(state.rsvpStatus)) {
 				status = 'attending';
@@ -43,6 +44,7 @@ const { state } = store('gatherpress', {
 						state.activePostId = res.event_id;
 						state.rsvpResponseStatus = res.status;
 						state.rsvpStatus = res.status;
+						actions.closeModal(null, element.ref);
 					}
 				})
 				.catch(() => {});
@@ -54,12 +56,18 @@ const { state } = store('gatherpress', {
 			const status =
 				state.rsvpStatus ??
 				getFromGlobal('eventDetails.currentUser.status');
+
 			const innerBlocks =
 				element.ref.querySelectorAll('[data-rsvp-status]');
 
 			innerBlocks.forEach((innerBlock) => {
+				const parent = innerBlock.parentNode;
+
 				if (innerBlock.getAttribute('data-rsvp-status') === status) {
 					innerBlock.style.display = '';
+
+					// Move the visible block to the start of its parent.
+					parent.insertBefore(innerBlock, parent.firstChild);
 				} else {
 					innerBlock.style.display = 'none';
 				}