Merge branch 'feature/20240710-develop' into feature/19518660-add-waz…

…e-link
10up · Jun 14, 2024 · c2eeca6 · c2eeca6
2 parents 54ec2c9 + a2c184f
commit c2eeca6
Show file tree

Hide file tree

Showing 13 changed files with 1,219 additions and 253 deletions.
diff --git a/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js b/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
@@ -63,6 +63,7 @@ export default class ContactButtonsHandler extends Base {
 
 		if ( this.elements.contentWrapper ) {
 			this.elements.contentWrapper.addEventListener( 'click', this.onChatButtonTrackClick.bind( this ) );
+			window.addEventListener( 'keyup', this.onDocumentKeyup.bind( this ) );
 		}
 
 		window.addEventListener( 'beforeunload', () => {
@@ -72,6 +73,46 @@ export default class ContactButtonsHandler extends Base {
 		} );
 	}
 
+	contentWrapperIsHidden( hide ) {
+		if ( ! this.elements.contentWrapper ) {
+			return false;
+		}
+
+		const { hidden } = this.getSettings( 'constants' );
+
+		// Set current state
+		if ( true === hide ) {
+			this.elements.contentWrapper.classList.add( hidden );
+			this.elements.contentWrapper.setAttribute( 'aria-hidden', 'true' );
+			return;
+		}
+
+		if ( false === hide ) {
+			this.elements.contentWrapper.classList.remove( hidden );
+			this.elements.contentWrapper.setAttribute( 'aria-hidden', 'false' );
+			return;
+		}
+
+		// Get current state
+		return this.elements.contentWrapper.classList.contains( hidden );
+	}
+
+	onDocumentKeyup( event ) {
+		// Bail if not ESC key
+		if ( event.keyCode !== 27 || ! this.elements.main ) {
+			return;
+		}
+
+		/* eslint-disable @wordpress/no-global-active-element */
+		if (
+			! this.contentWrapperIsHidden() &&
+			this.elements.main.contains( document.activeElement )
+		) {
+			this.closeChatBox();
+		}
+		/* eslint-enable @wordpress/no-global-active-element */
+	}
+
 	onChatButtonTrackClick( event ) {
 		const targetElement = event.target || event.srcElement;
 		const selectors = this.getSettings( 'selectors' );
@@ -182,7 +223,7 @@ export default class ContactButtonsHandler extends Base {
 	}
 
 	openChatBox() {
-		const { hasAnimations, visible, hidden } = this.getSettings( 'constants' );
+		const { hasAnimations, visible } = this.getSettings( 'constants' );
 
 		if ( this.elements.main && this.elements.main.classList.contains( hasAnimations ) ) {
 			this.chatBoxEntranceAnimation();
@@ -191,11 +232,13 @@ export default class ContactButtonsHandler extends Base {
 		}
 
 		if ( this.elements.contentWrapper ) {
-			this.elements.contentWrapper.classList.remove( hidden );
+			this.contentWrapperIsHidden( false );
+			this.elements.contentWrapper.setAttribute( 'tabindex', '0' );
+			this.elements.contentWrapper.focus( { focusVisible: true } );
 		}
 
 		if ( this.elements.chatButton ) {
-			this.elements.chatButton.setAttribute( 'aria-expanded', 'false' );
+			this.elements.chatButton.setAttribute( 'aria-expanded', 'true' );
 		}
 
 		if ( this.elements.closeButton ) {
@@ -204,7 +247,7 @@ export default class ContactButtonsHandler extends Base {
 	}
 
 	closeChatBox() {
-		const { hasAnimations, visible, hidden } = this.getSettings( 'constants' );
+		const { hasAnimations, visible } = this.getSettings( 'constants' );
 
 		if ( this.elements.main && this.elements.main.classList.contains( hasAnimations ) ) {
 			this.chatBoxExitAnimation();
@@ -213,11 +256,12 @@ export default class ContactButtonsHandler extends Base {
 		}
 
 		if ( this.elements.contentWrapper ) {
-			this.elements.contentWrapper.classList.add( hidden );
+			this.contentWrapperIsHidden( true );
 		}
 
 		if ( this.elements.chatButton ) {
-			this.elements.chatButton.setAttribute( 'aria-expanded', 'true' );
+			this.elements.chatButton.setAttribute( 'aria-expanded', 'false' );
+			this.elements.chatButton.focus( { focusVisible: true } );
 		}
 
 		if ( this.elements.closeButton ) {
@@ -226,9 +270,7 @@ export default class ContactButtonsHandler extends Base {
 	}
 
 	onChatButtonClick() {
-		const { hidden } = this.getSettings( 'constants' );
-
-		if ( this.elements.contentWrapper && this.elements.contentWrapper.classList.contains( hidden ) ) {
+		if ( this.elements.contentWrapper && this.contentWrapperIsHidden() ) {
 			this.openChatBox();
 		} else {
 			this.closeChatBox();
@@ -274,6 +316,33 @@ export default class ContactButtonsHandler extends Base {
 	}
 
 	initDefaultState() {
+		// Manage accessibility
+		if ( this.elements.contentWrapper ) {
+			const randomishId = String(
+				Date.now().toString( 32 ) +
+					Math.random().toString( 16 ),
+			).replace( /\./g, '' );
+
+			const wrapperID = this.elements.contentWrapper.id
+				? this.elements.contentWrapper.id
+				: `e-contact-buttons__content-wrapper-${ randomishId }`;
+
+			const isHidden = this.contentWrapperIsHidden();
+
+			this.elements.contentWrapper.setAttribute( 'id', wrapperID );
+
+			if ( this.elements.chatButton ) {
+				this.elements.chatButton.setAttribute( 'aria-expanded', ! isHidden );
+				this.elements.chatButton.setAttribute( 'aria-controls', wrapperID );
+			}
+
+			if ( this.elements.closeButton ) {
+				this.elements.closeButton.setAttribute( 'aria-expanded', ! isHidden );
+				this.elements.closeButton.setAttribute( 'aria-controls', wrapperID );
+			}
+		}
+
+		// Default to open in Editor
 		if ( elementorFrontend.isEditMode() ) {
 			this.openChatBox();
 		}
@@ -290,8 +359,10 @@ export default class ContactButtonsHandler extends Base {
 
 		this.initDefaultState();
 
-		if ( this.elements.chatButton.classList.contains( hasEntranceAnimation ) ) {
-			this.initChatButtonEntranceAnimation();
+		if ( this.elements.chatButton ) {
+			if ( this.elements.chatButton.classList.contains( hasEntranceAnimation ) ) {
+				this.initChatButtonEntranceAnimation();
+			}
 		}
 	}
 }
diff --git a/modules/conversion-center/assets/scss/frontend.scss b/modules/conversion-center/assets/scss/frontend.scss
@@ -13,3 +13,5 @@
 @import "widgets/contact-buttons-var-6";
 @import "widgets/contact-buttons-var-7";
 @import "widgets/contact-buttons-var-8";
+@import "widgets/contact-buttons-var-9";
+@import "widgets/contact-buttons-var-10";