From 8c0f44b09cbc84e3c5512dbe7474d52ee5733826 Mon Sep 17 00:00:00 2001
From: Will Howat-Comandre <willhowat@gmail.com>
Date: Tue, 11 Jun 2024 15:38:00 +0200
Subject: [PATCH 1/6] Fix: Conversion center - Contact button - accessibility
 for expandable state

---
 .../js/frontend/handlers/contact-buttons.js   | 37 ++++++++++++++++++-
 .../render/contact-buttons-render-base.php    |  2 +-
 2 files changed, 36 insertions(+), 3 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
index a5de4a9755eb..3161c87b6e94 100644
--- a/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
+++ b/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
@@ -192,10 +192,11 @@ export default class ContactButtonsHandler extends Base {
 
 		if ( this.elements.contentWrapper ) {
 			this.elements.contentWrapper.classList.remove( hidden );
+			this.elements.contentWrapper.setAttribute( 'aria-hidden', 'false' );
 		}
 
 		if ( this.elements.chatButton ) {
-			this.elements.chatButton.setAttribute( 'aria-expanded', 'false' );
+			this.elements.chatButton.setAttribute( 'aria-expanded', 'true' );
 		}
 
 		if ( this.elements.closeButton ) {
@@ -214,10 +215,11 @@ export default class ContactButtonsHandler extends Base {
 
 		if ( this.elements.contentWrapper ) {
 			this.elements.contentWrapper.classList.add( hidden );
+			this.elements.contentWrapper.setAttribute( 'aria-hidden', 'true' );
 		}
 
 		if ( this.elements.chatButton ) {
-			this.elements.chatButton.setAttribute( 'aria-expanded', 'true' );
+			this.elements.chatButton.setAttribute( 'aria-expanded', 'false' );
 		}
 
 		if ( this.elements.closeButton ) {
@@ -274,6 +276,37 @@ export default class ContactButtonsHandler extends Base {
 	}
 
 	initDefaultState() {
+		// Manage a11ly
+		const { hidden } = this.getSettings( 'constants' );
+		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.elements.contentWrapper
+			? this.elements.contentWrapper.classList.contains( hidden )
+			: false;
+
+		if ( this.elements.contentWrapper ) {
+			this.elements.contentWrapper.setAttribute( 'id', wrapperID );
+			this.elements.contentWrapper.setAttribute( 'aria-hidden', isHidden );
+		}
+
+		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();
 		}
diff --git a/modules/conversion-center/classes/render/contact-buttons-render-base.php b/modules/conversion-center/classes/render/contact-buttons-render-base.php
index 61da4712a212..63a2a1f2b641 100644
--- a/modules/conversion-center/classes/render/contact-buttons-render-base.php
+++ b/modules/conversion-center/classes/render/contact-buttons-render-base.php
@@ -83,7 +83,7 @@ protected function render_chat_button(): void {
 
 		?>
 		<div class="e-contact-buttons__chat-button-container">
-			<button <?php echo $this->widget->get_render_attribute_string( 'button' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> type="button" aria-label="<?php echo esc_attr__( 'Open Contact Buttons', 'elementor' ); ?>">
+			<button <?php echo $this->widget->get_render_attribute_string( 'button' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> type="button" aria-label="<?php echo esc_attr__( 'Toggle Contact Buttons', 'elementor' ); ?>">
 				<?php
 					$this->render_chat_button_icon();
 				?>

From aa8eb29909bac1374a4ee0b0baa61fd3667ebdbd Mon Sep 17 00:00:00 2001
From: Will Howat-Comandre <willhowat@gmail.com>
Date: Tue, 11 Jun 2024 16:16:54 +0200
Subject: [PATCH 2/6] additional checks for elements

---
 .../js/frontend/handlers/contact-buttons.js   | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 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
index 3161c87b6e94..4d31017557be 100644
--- a/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
+++ b/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
@@ -277,33 +277,31 @@ export default class ContactButtonsHandler extends Base {
 
 	initDefaultState() {
 		// Manage a11ly
-		const { hidden } = this.getSettings( 'constants' );
-		const randomishId = String(
-			Date.now().toString( 32 ) +
-				Math.random().toString( 16 ),
-		).replace( /\./g, '' );
+		if ( this.elements.contentWrapper ) {
+			const { hidden } = this.getSettings( 'constants' );
+			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 wrapperID = this.elements.contentWrapper.id
+				? this.elements.contentWrapper.id
+				: `e-contact-buttons__content-wrapper-${ randomishId }`;
 
-		const isHidden = this.elements.contentWrapper
-			? this.elements.contentWrapper.classList.contains( hidden )
-			: false;
+			const isHidden = this.elements.contentWrapper.classList.contains( hidden );
 
-		if ( this.elements.contentWrapper ) {
 			this.elements.contentWrapper.setAttribute( 'id', wrapperID );
 			this.elements.contentWrapper.setAttribute( 'aria-hidden', isHidden );
-		}
 
-		if ( this.elements.chatButton ) {
-			this.elements.chatButton.setAttribute( 'aria-expanded', ! isHidden );
-			this.elements.chatButton.setAttribute( 'aria-controls', 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 );
+			if ( this.elements.closeButton ) {
+				this.elements.closeButton.setAttribute( 'aria-expanded', ! isHidden );
+				this.elements.closeButton.setAttribute( 'aria-controls', wrapperID );
+			}
 		}
 
 		// Default to open in Editor
@@ -323,8 +321,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();
+			}
 		}
 	}
 }

From e5991f9b9816a07d4d15da315d942496228c1fc7 Mon Sep 17 00:00:00 2001
From: Will Howat-Comandre <willhowat@gmail.com>
Date: Tue, 11 Jun 2024 17:01:34 +0200
Subject: [PATCH 3/6] fix styling assocaited with toggle aria states

---
 .../scss/widgets/contact-buttons-var-3.scss   | 16 +++---
 .../scss/widgets/contact-buttons-var-4.scss   | 45 ++++++++++-------
 .../scss/widgets/contact-buttons-var-8.scss   | 50 +++++++++++--------
 3 files changed, 62 insertions(+), 49 deletions(-)

diff --git a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss
index fcfa44dc21a4..3ac7a25292e8 100644
--- a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss
+++ b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss
@@ -48,7 +48,7 @@
 
 		&__chat-button {
 
-			&[aria-expanded="false"] {
+			&[aria-expanded="true"] {
 				background-color: var(--e-contact-buttons-active-button-bg);
 
 				svg {
@@ -63,27 +63,27 @@
 			&.has-size-small {
 				height: var(--e-contact-buttons-size-small);
 				width: var(--e-contact-buttons-size-small);
-		
+
 				svg {
 					height: var(--e-contact-buttons-svg-size-small);
 					width: var(--e-contact-buttons-svg-size-small);
 				}
 			}
-		
+
 			&.has-size-medium {
 				height: var(--e-contact-buttons-size-medium);
 				width: var(--e-contact-buttons-size-medium);
-		
+
 				svg {
 					height: var(--e-contact-buttons-svg-size-medium);
 					width: var(--e-contact-buttons-svg-size-medium);
 				}
 			}
-		
+
 			&.has-size-large {
 				height: var(--e-contact-buttons-size-large);
 				width: var(--e-contact-buttons-size-large);
-		
+
 				svg {
 					height: var(--e-contact-buttons-svg-size-large);
 					width: var(--e-contact-buttons-svg-size-large);
@@ -113,7 +113,7 @@
 				position: absolute;
 				inset-inline-end: 0;
 				top: 0;
-		
+
 				&:hover,
 				&:focus {
 					background: none;
@@ -168,7 +168,7 @@
 			}
 
 			&.has-icon-position-start {
-				
+
 				.e-contact-buttons__contact-icon-container {
 					order: 1;
 				}
diff --git a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss
index dfd13a949f20..034330e8a3aa 100644
--- a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss
+++ b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss
@@ -13,7 +13,7 @@
 	width: auto;
 
 	&.has-h-alignment-end {
-		
+
 		.e-contact-buttons__chat-button-container {
 			padding-inline-end: 0;
 		}
@@ -91,7 +91,7 @@
 		& .e-contact-buttons__contact-icon-container {
 			height: var(--e-contact-buttons-size-small);
 			width: var(--e-contact-buttons-size-small);
-	
+
 			svg {
 				height: var(--e-contact-buttons-icon-small);
 				width: var(--e-contact-buttons-icon-small);
@@ -105,7 +105,7 @@
 		& .e-contact-buttons__contact-icon-container {
 			height: var(--e-contact-buttons-size-medium);
 			width: var(--e-contact-buttons-size-medium);
-	
+
 			svg {
 				height: var(--e-contact-buttons-icon-medium);
 				width: var(--e-contact-buttons-icon-medium);
@@ -119,7 +119,7 @@
 		& .e-contact-buttons__contact-icon-container {
 			height: var(--e-contact-buttons-size-large);
 			width: var(--e-contact-buttons-size-large);
-	
+
 			svg {
 				height: var(--e-contact-buttons-icon-large);
 				width: var(--e-contact-buttons-icon-large);
@@ -132,7 +132,7 @@
 		&__chat-buttons-container {
 			display: flex;
 		}
-	
+
 		&__close-button {
 			background-color: var(--e-contact-buttons-active-button-bg);
 			color: var(--e-contact-buttons-active-button-color);
@@ -142,28 +142,35 @@
 			position: relative;
 			top: unset;
 		}
-	
-		&__close-button,
+
+
 		&__chat-button {
-	
+
+			&[aria-expanded="true"] {
+				display: none;
+			}
+		}
+
+		&__close-button {
+
 			&[aria-expanded="false"] {
 				display: none;
 			}
 		}
-	
+
 		&__content {
 			border-radius: 0;
 			box-shadow: none;
 			margin: 0;
 			overflow: visible;
 		}
-	
+
 		&__contact-links {
 			display: flex;
 			flex-direction: column;
 			gap: var(--e-contact-buttons-contact-gap);
 		}
-	
+
 		&__contact-icon-container {
 			align-items: center;
 			background-color: var(--e-contact-buttons-contact-button-bg);
@@ -172,31 +179,31 @@
 			justify-content: center;
 			transition: $transition-hover;
 		}
-	
+
 		&__contact-icon-link {
 			align-items: center;
 			display: flex;
 			flex-direction: row;
 			gap: 14px;
-	
+
 			svg {
 				fill: var(--e-contact-buttons-contact-button-icon);
 			}
-	
+
 			&:hover,
 			&:focus {
-	
+
 				.e-contact-buttons__contact-icon-container {
 					background-color: var(--e-contact-buttons-contact-button-bg-hover);
 					transition: $transition-hover;
 				}
-	
+
 				svg {
 					fill: var(--e-contact-buttons-contact-button-icon-hover);
 				}
 			}
 		}
-	
+
 		&__contact-tooltip {
 			background-color: var(--e-contact-buttons-tooltip-bg);
 			border-radius: 16px;
@@ -206,7 +213,7 @@
 			line-height: 25px;
 			padding: 4px 14px;
 			position: relative;
-	
+
 			&::after {
 				border-style: solid;
 				content: "";
@@ -218,4 +225,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-8.scss b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-8.scss
index ba8eba9c724d..391126190fda 100644
--- a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-8.scss
+++ b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-8.scss
@@ -22,23 +22,23 @@
 		&.has-platform-url {
 			--e-contact-buttons-contact-button-icon: #467FF7;
 		}
-	
+
 		&.has-platform-whatsapp {
 			--e-contact-buttons-contact-button-icon: #25D366;
 		}
-		
+
 		&.has-platform-skype {
 			--e-contact-buttons-contact-button-icon: #00AFF0;
 		}
-	
+
 		&.has-platform-messenger {
 			--e-contact-buttons-contact-button-icon: #168AFF;
 		}
-	
+
 		&.has-platform-viber {
 			--e-contact-buttons-contact-button-icon: #7360F2;
 		}
-	
+
 		&.has-platform-waze {
 			--e-contact-buttons-contact-button-icon: #33CCFF;
 		}
@@ -79,7 +79,7 @@
 		&__chat-buttons-container {
 			display: flex;
 		}
-	
+
 		&__close-button {
 			background-color: var(--e-contact-buttons-active-button-bg);
 			border-radius: 50%;
@@ -89,34 +89,40 @@
 			position: relative;
 			top: unset;
 		}
-	
-		&__close-button,
+
 		&__chat-button {
-	
+
+			&[aria-expanded="true"] {
+				display: none;
+			}
+		}
+
+		&__close-button {
+
 			&[aria-expanded="false"] {
 				display: none;
 			}
 		}
-	
+
 		&__top-bar-title {
 			font-size: 16px;
 			line-height: 24px;
 			font-weight: 600;
 		}
-	
+
 		&__top-bar-subtitle {
 			font-size: 12px;
 			line-height: 16px;
 			font-weight: 500px;
 		}
-	
+
 		&__contact-links {
 			display: flex;
 			flex-direction: column;
 			gap: 12px;
 			padding: 12px;
 		}
-	
+
 		&__contact-icon-link {
 			background-color: var(--e-contact-buttons-contact-button-bg);
 			border-start-end-radius: 15px;
@@ -128,39 +134,39 @@
 			grid-column-gap: 12px;
 			grid-row-gap: 0;
 			padding: 10px 20px;
-	
+
 			svg {
 				fill: var(--e-contact-buttons-contact-button-icon);
 			}
 		}
-	
+
 		&__contact-icon-link.has-size-small {
 			svg {
 				height: 22px;
 				width: 22px;
 			}
 		}
-	
+
 		&__contact-icon-link.has-size-medium {
 			svg {
 				height: 28px;
 				width: 28px;
 			}
 		}
-	
+
 		&__contact-icon-link.has-size-large {
 			svg {
 				height: 36px;
 				width: 36px;
 			}
 		}
-	
+
 		&__contact-icon-container {
 			align-items: center;
 			display: flex;
 			grid-area: 1 / 1 / 3 / 2;
 		}
-	
+
 		&__contact-title {
 			color: var(--e-contact-buttons-contact-title-text-color);
 			grid-area: 1 / 2 / 2 / 3;
@@ -168,7 +174,7 @@
 			font-weight: 600;
 			line-height: 24px;
 		}
-	
+
 		&__contact-description {
 			color: var(--e-contact-buttons-contact-description-text-color);
 			grid-area: 2 / 2 / 3 / 3;
@@ -176,9 +182,9 @@
 			font-weight: 300;
 			line-height: 16px;
 		}
-	
+
 		&__links-container {
 			background-color: var(--e-contact-buttons-chat-box-bg);
 		}
 	}
-}
\ No newline at end of file
+}

From e018e832c26c25c5eef4b898e6565225b59a6b6f Mon Sep 17 00:00:00 2001
From: Will Howat-Comandre <willhowat@gmail.com>
Date: Tue, 11 Jun 2024 18:01:12 +0200
Subject: [PATCH 4/6] added focus and esc binding

---
 .../js/frontend/handlers/contact-buttons.js   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js b/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
index 4d31017557be..ebea228de681 100644
--- 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,19 @@ export default class ContactButtonsHandler extends Base {
 		} );
 	}
 
+	onDocumentKeyup( event ) {
+		// Bail if not ESC key
+		if ( event.keyCode !== 27 || ! this.elements.contentWrapper ) {
+			return;
+		}
+
+		const { hidden } = this.getSettings( 'constants' );
+
+		if ( ! this.elements.contentWrapper.classList.contains( hidden ) ) {
+			this.closeChatBox();
+		}
+	}
+
 	onChatButtonTrackClick( event ) {
 		const targetElement = event.target || event.srcElement;
 		const selectors = this.getSettings( 'selectors' );
@@ -202,6 +216,12 @@ export default class ContactButtonsHandler extends Base {
 		if ( this.elements.closeButton ) {
 			this.elements.closeButton.setAttribute( 'aria-expanded', 'true' );
 		}
+
+		// Manage initial focus
+		if ( this.elements.content ) {
+			this.elements.content.setAttribute( 'tabindex', '0' );
+			this.elements.content.focus( { focusVisible: true } );
+		}
 	}
 
 	closeChatBox() {
@@ -220,6 +240,7 @@ export default class ContactButtonsHandler extends Base {
 
 		if ( this.elements.chatButton ) {
 			this.elements.chatButton.setAttribute( 'aria-expanded', 'false' );
+			this.elements.chatButton.focus( { focusVisible: true } );
 		}
 
 		if ( this.elements.closeButton ) {

From ba92fee67a99b85cb96074d6c6af69f5803f853d Mon Sep 17 00:00:00 2001
From: Will Howat-Comandre <willhowat@gmail.com>
Date: Wed, 12 Jun 2024 10:25:34 +0200
Subject: [PATCH 5/6] improved focus state and checks for

---
 .../js/frontend/handlers/contact-buttons.js   | 57 +++++++++++++------
 1 file changed, 40 insertions(+), 17 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
index ebea228de681..b61fa71e8cbf 100644
--- a/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
+++ b/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
@@ -73,17 +73,44 @@ 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.contentWrapper ) {
+		if ( event.keyCode !== 27 || ! this.elements.main ) {
 			return;
 		}
 
-		const { hidden } = this.getSettings( 'constants' );
-
-		if ( ! this.elements.contentWrapper.classList.contains( hidden ) ) {
+		/* 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 ) {
@@ -196,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();
@@ -205,8 +232,7 @@ export default class ContactButtonsHandler extends Base {
 		}
 
 		if ( this.elements.contentWrapper ) {
-			this.elements.contentWrapper.classList.remove( hidden );
-			this.elements.contentWrapper.setAttribute( 'aria-hidden', 'false' );
+			this.contentWrapperIsHidden( false );
 		}
 
 		if ( this.elements.chatButton ) {
@@ -225,7 +251,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();
@@ -234,8 +260,7 @@ export default class ContactButtonsHandler extends Base {
 		}
 
 		if ( this.elements.contentWrapper ) {
-			this.elements.contentWrapper.classList.add( hidden );
-			this.elements.contentWrapper.setAttribute( 'aria-hidden', 'true' );
+			this.contentWrapperIsHidden( true );
 		}
 
 		if ( this.elements.chatButton ) {
@@ -249,9 +274,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();
@@ -297,9 +320,8 @@ export default class ContactButtonsHandler extends Base {
 	}
 
 	initDefaultState() {
-		// Manage a11ly
+		// Manage accessibility
 		if ( this.elements.contentWrapper ) {
-			const { hidden } = this.getSettings( 'constants' );
 			const randomishId = String(
 				Date.now().toString( 32 ) +
 					Math.random().toString( 16 ),
@@ -309,10 +331,11 @@ export default class ContactButtonsHandler extends Base {
 				? this.elements.contentWrapper.id
 				: `e-contact-buttons__content-wrapper-${ randomishId }`;
 
-			const isHidden = this.elements.contentWrapper.classList.contains( hidden );
+			const isHidden = this.contentWrapperIsHidden();
 
 			this.elements.contentWrapper.setAttribute( 'id', wrapperID );
-			this.elements.contentWrapper.setAttribute( 'aria-hidden', isHidden );
+			// Looks like passing isHidden is redundant, but additional attributes are added
+			this.contentWrapperIsHidden( isHidden );
 
 			if ( this.elements.chatButton ) {
 				this.elements.chatButton.setAttribute( 'aria-expanded', ! isHidden );

From b064017b7f2cc4fc54d5892a9997aef19204846b Mon Sep 17 00:00:00 2001
From: Will Howat-Comandre <willhowat@gmail.com>
Date: Wed, 12 Jun 2024 11:52:56 +0200
Subject: [PATCH 6/6] setup common attributes for contact buttosn wrapper to
 ensure consistency and addressed minor markup errors

---
 .../assets/js/frontend/handlers/contact-buttons.js   | 10 ++--------
 .../classes/render/contact-buttons-core-render.php   | 12 +++++++++++-
 .../classes/render/contact-buttons-render-base.php   |  2 +-
 3 files changed, 14 insertions(+), 10 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
index b61fa71e8cbf..3d135e94abbd 100644
--- a/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
+++ b/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
@@ -233,6 +233,8 @@ export default class ContactButtonsHandler extends Base {
 
 		if ( this.elements.contentWrapper ) {
 			this.contentWrapperIsHidden( false );
+			this.elements.contentWrapper.setAttribute( 'tabindex', '0' );
+			this.elements.contentWrapper.focus( { focusVisible: true } );
 		}
 
 		if ( this.elements.chatButton ) {
@@ -242,12 +244,6 @@ export default class ContactButtonsHandler extends Base {
 		if ( this.elements.closeButton ) {
 			this.elements.closeButton.setAttribute( 'aria-expanded', 'true' );
 		}
-
-		// Manage initial focus
-		if ( this.elements.content ) {
-			this.elements.content.setAttribute( 'tabindex', '0' );
-			this.elements.content.focus( { focusVisible: true } );
-		}
 	}
 
 	closeChatBox() {
@@ -334,8 +330,6 @@ export default class ContactButtonsHandler extends Base {
 			const isHidden = this.contentWrapperIsHidden();
 
 			this.elements.contentWrapper.setAttribute( 'id', wrapperID );
-			// Looks like passing isHidden is redundant, but additional attributes are added
-			this.contentWrapperIsHidden( isHidden );
 
 			if ( this.elements.chatButton ) {
 				this.elements.chatButton.setAttribute( 'aria-expanded', ! isHidden );
diff --git a/modules/conversion-center/classes/render/contact-buttons-core-render.php b/modules/conversion-center/classes/render/contact-buttons-core-render.php
index 397ebde88c38..6dab6b2dcbee 100644
--- a/modules/conversion-center/classes/render/contact-buttons-core-render.php
+++ b/modules/conversion-center/classes/render/contact-buttons-core-render.php
@@ -13,6 +13,7 @@ class Contact_Buttons_Core_Render extends Contact_Buttons_Render_Base {
 
 	public function render(): void {
 		$this->build_layout_render_attribute();
+		$this->add_content_wrapper_render_attribute();
 
 		$content_classnames = 'e-contact-buttons__content';
 		$animation_duration = $this->settings['style_chat_box_animation_duration'];
@@ -26,7 +27,7 @@ public function render(): void {
 		] );
 		?>
 		<div <?php echo $this->widget->get_render_attribute_string( 'layout' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
-			<div class="e-contact-buttons__content-wrapper hidden">
+			<div <?php echo $this->widget->get_render_attribute_string( 'content-wrapper' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
 				<div <?php echo $this->widget->get_render_attribute_string( 'content' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
 					<?php
 					$this->render_top_bar();
@@ -50,4 +51,13 @@ protected function add_layout_render_attribute( $layout_classnames ) {
 		] );
 	}
 
+	protected function add_content_wrapper_render_attribute() {
+		$this->widget->add_render_attribute( 'content-wrapper', [
+			'aria-hidden' => "true",
+			'aria-label' => __( 'Contact Buttons window', 'elementor' ),
+			'class' => "e-contact-buttons__content-wrapper hidden",
+			'id' => uniqid('e-contact-buttons__content-wrapper-'),
+		] );
+	}
+
 }
diff --git a/modules/conversion-center/classes/render/contact-buttons-render-base.php b/modules/conversion-center/classes/render/contact-buttons-render-base.php
index 63a2a1f2b641..e8fa7810707d 100644
--- a/modules/conversion-center/classes/render/contact-buttons-render-base.php
+++ b/modules/conversion-center/classes/render/contact-buttons-render-base.php
@@ -94,7 +94,7 @@ protected function render_chat_button(): void {
 
 	protected function render_close_button(): void {
 		?>
-			<button type="button" class="e-contact-buttons__close-button" aria-label=<?php echo esc_attr__( 'Close Contact Buttons', 'elementor' ); ?>>
+			<button type="button" class="e-contact-buttons__close-button" aria-label="<?php echo esc_attr__( 'Close Contact Buttons', 'elementor' ); ?>">
 				<i class="eicon-close"></i>
 			</button>
 		<?php