Skip to content

Commit

Permalink
Fixes the login form so that it can be closed in a normal way (click …
Browse files Browse the repository at this point in the history 
…outside, esc) and closes if navigating out of it.
  • Loading branch information
@sfisher
sfisher committed Jan 22, 2025
1 parent 49a883b commit 8ff0a17
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 72 deletions.
4 changes: 3 additions & 1 deletion dev/includes/login-modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<div id="js-login-modal" class="login-modal" aria-expanded="false" role="dialog" aria-labelledby="login-modal__title">
<div class="login-modal__header">
<div id="login-modal__title" class="login-modal__title">Access your account</div>
<img id="js-login-modal__close" src="images/icon_cross.svg" alt="close" class="login-modal__close">
<button type="button" id="js-login-modal__close" class="login-modal__close" aria-label="Close modal">
<img src="images/icon_cross.svg" alt="close">
</button>
</div>
<form id="js-login-modal__form" action="url-here" class="login-modal__form">
<div class="login-modal__form-element fcontrol__group-stacked">
Expand Down
66 changes: 26 additions & 40 deletions dev/js/main2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,36 +59,6 @@ $(document).ready(function () {
$(this).siblings('.fcontrol__text-label-inline').addClass('fcontrol__label-required');
});

// ***** Modal Login ***** //


/*
// Toggle open and closed from login button
$('#js-header__loginout-button').click(function () {
if ($('#js-login-modal').attr('aria-expanded') == 'false') {
$('#js-login-modal').attr('aria-expanded', 'true');
} else {
$('#js-login-modal').attr('aria-expanded', 'false');
}
$('#js-login-modal').fadeToggle(200);
});
// Close when close icon is clicked
$('#js-login-modal__close').click(function (e) {
e.preventDefault();
$('#js-login-modal').attr('aria-expanded', 'false');
$('#js-login-modal').fadeToggle(200);
});
// Close when form is submitted
$('#js-login-modal__form').submit(function () {
$('#js-login-modal').attr('aria-expanded', 'false');
$('#js-login-modal').fadeToggle(200);
});
*/

}); // Close $(document).ready(function()

// ***** The "Learn" menu needs more flexibility for keyboard navigation ***** //
Expand Down Expand Up @@ -148,14 +118,18 @@ document.addEventListener('DOMContentLoaded', () => {
});



// ***** Modal Login ***** //
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('js-login-modal');
const closeButton = document.getElementById('js-login-modal__close');
const closeButton = document.getElementById('js-login-modal__close').parentElement;
const formElements = modal.querySelectorAll('input, button, a');
const firstFocusable = formElements[0];
const lastFocusable = formElements[formElements.length - 1];
const openButton = document.getElementById('js-header__loginout-button');

// Ensure aria-expanded is set to false initially
modal.setAttribute('aria-expanded', 'false');
modal.style.display = 'none';

const openModal = () => {
modal.setAttribute('aria-expanded', 'true');
Expand All @@ -165,13 +139,13 @@ document.addEventListener('DOMContentLoaded', () => {
};

const closeModal = (event) => {
console.log("Closing modal");
if (event) {
event.preventDefault();
}
modal.setAttribute('aria-expanded', 'false');
modal.style.display = 'none';
// modal.classList.remove('open');
openButton.focus();
};

const handleKeydown = (event) => {
Expand All @@ -180,37 +154,49 @@ document.addEventListener('DOMContentLoaded', () => {
}

if (event.key === 'Tab') {
// Manage focus trapping
// Allow tabbing outside and close modal if tabbing out
if (event.shiftKey) {
// Shift + Tab: focus backwards
if (document.activeElement === firstFocusable) {
event.preventDefault();
lastFocusable.focus();
closeModal();
}
} else {
// Tab: focus forwards
if (document.activeElement === lastFocusable) {
event.preventDefault();
firstFocusable.focus();
closeModal();
}
}
}
};

// Add event listeners
// Close modal when clicking outside
document.addEventListener('click', (event) => {
if (!modal.contains(event.target) && event.target !== openButton &&
modal.getAttribute('aria-expanded') === 'true') {
closeModal();
}
});

closeButton.addEventListener('click', closeModal);
closeButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
closeModal(event);
}
});
document.addEventListener('keydown', handleKeydown);

const openButton = document.getElementById('js-header__loginout-button');

if (openButton) {
openButton.addEventListener('click', () => {
const expanded = modal.getAttribute('aria-expanded');
if (expanded === null || expanded === 'false') {
console.log("Opening modal");
openModal();
} else {
closeModal();
}
});
}
});

81 changes: 50 additions & 31 deletions static_src/javascripts/main2.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30912,32 +30912,32 @@ $(document).ready(function () {
// ***** Modal Login ***** //


/*
// Toggle open and closed from login button
$('#js-header__loginout-button').click(function () {
if ($('#js-login-modal').attr('aria-expanded') == 'false') {
$('#js-login-modal').attr('aria-expanded', 'true');
} else {
$('#js-login-modal').attr('aria-expanded', 'false');
}
$('#js-login-modal').fadeToggle(200);
});
/*
// Toggle open and closed from login button
$('#js-header__loginout-button').click(function () {
if ($('#js-login-modal').attr('aria-expanded') == 'false') {
$('#js-login-modal').attr('aria-expanded', 'true');
} else {
$('#js-login-modal').attr('aria-expanded', 'false');
}
$('#js-login-modal').fadeToggle(200);
});

// Close when close icon is clicked
// Close when close icon is clicked

$('#js-login-modal__close').click(function (e) {
e.preventDefault();
$('#js-login-modal').attr('aria-expanded', 'false');
$('#js-login-modal').fadeToggle(200);
});
$('#js-login-modal__close').click(function (e) {
e.preventDefault();
$('#js-login-modal').attr('aria-expanded', 'false');
$('#js-login-modal').fadeToggle(200);
});

// Close when form is submitted
// Close when form is submitted

$('#js-login-modal__form').submit(function () {
$('#js-login-modal').attr('aria-expanded', 'false');
$('#js-login-modal').fadeToggle(200);
});
*/
$('#js-login-modal__form').submit(function () {
$('#js-login-modal').attr('aria-expanded', 'false');
$('#js-login-modal').fadeToggle(200);
});
*/

}); // Close $(document).ready(function()

Expand Down Expand Up @@ -30998,14 +30998,18 @@ document.addEventListener('DOMContentLoaded', () => {
});



// ***** Modal Login ***** //
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('js-login-modal');
const closeButton = document.getElementById('js-login-modal__close');
const closeButton = document.getElementById('js-login-modal__close').parentElement;
const formElements = modal.querySelectorAll('input, button, a');
const firstFocusable = formElements[0];
const lastFocusable = formElements[formElements.length - 1];
const openButton = document.getElementById('js-header__loginout-button');

// Ensure aria-expanded is set to false initially
modal.setAttribute('aria-expanded', 'false');
modal.style.display = 'none';

const openModal = () => {
modal.setAttribute('aria-expanded', 'true');
Expand All @@ -31022,6 +31026,7 @@ document.addEventListener('DOMContentLoaded', () => {
modal.setAttribute('aria-expanded', 'false');
modal.style.display = 'none';
// modal.classList.remove('open');
openButton.focus();
};

const handleKeydown = (event) => {
Expand All @@ -31030,37 +31035,51 @@ document.addEventListener('DOMContentLoaded', () => {
}

if (event.key === 'Tab') {
// Manage focus trapping
// Allow tabbing outside and close modal if tabbing out
if (event.shiftKey) {
// Shift + Tab: focus backwards
if (document.activeElement === firstFocusable) {
event.preventDefault();
lastFocusable.focus();
closeModal();
}
} else {
// Tab: focus forwards
if (document.activeElement === lastFocusable) {
event.preventDefault();
firstFocusable.focus();
closeModal();
}
}
}
};

// Add event listeners
// Close modal when clicking outside
document.addEventListener('click', (event) => {
console.log("event target", event.target);
console.log("contains event target", modal.contains(event.target))
if (!modal.contains(event.target) && event.target !== openButton &&
modal.getAttribute('aria-expanded') === 'true') {
closeModal();
}
});

closeButton.addEventListener('click', closeModal);
closeButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
closeModal(event);
}
});
document.addEventListener('keydown', handleKeydown);

const openButton = document.getElementById('js-header__loginout-button');

if (openButton) {
openButton.addEventListener('click', () => {
const expanded = modal.getAttribute('aria-expanded');
if (expanded === null || expanded === 'false') {
console.log("Opening modal");
openModal();
} else {
closeModal();
}
});
}
});

0 comments on commit 8ff0a17

Please sign in to comment.