Skip to content

Commit

Permalink
Merge pull request #8 from 10up/fix/contact-button-accessibility
Browse files Browse the repository at this point in the history 
Internal : Conversion center - Contact buttons Accessibility
  • Loading branch information
@willhowat
willhowat authored Jun 12, 2024
2 parents 497b3c7 + b064017 commit e76c633
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 63 deletions.
93 changes: 82 additions & 11 deletions modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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' );
Expand Down Expand Up @@ -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();
Expand All @@ -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 ) {
Expand All @@ -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();
Expand All @@ -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 ) {
Expand All @@ -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();
Expand Down Expand Up @@ -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();
}
Expand All @@ -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();
}
}
}
}
16 changes: 8 additions & 8 deletions modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

&__chat-button {

&[aria-expanded="false"] {
&[aria-expanded="true"] {
background-color: var(--e-contact-buttons-active-button-bg);

svg {
Expand All @@ -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);
Expand Down Expand Up @@ -113,7 +113,7 @@
position: absolute;
inset-inline-end: 0;
top: 0;

&:hover,
&:focus {
background: none;
Expand Down Expand Up @@ -168,7 +168,7 @@
}

&.has-icon-position-start {

.e-contact-buttons__contact-icon-container {
order: 1;
}
Expand Down
45 changes: 26 additions & 19 deletions modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
width: auto;

&.has-h-alignment-end {

.e-contact-buttons__chat-button-container {
padding-inline-end: 0;
}
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -206,7 +213,7 @@
line-height: 25px;
padding: 4px 14px;
position: relative;

&::after {
border-style: solid;
content: "";
Expand All @@ -218,4 +225,4 @@
}
}
}
}
}
Loading

0 comments on commit e76c633

Please sign in to comment.