← All changes | back/Partial/forms/popup.php +66 -7 11.0.1 → 11.1.0 View file →

		@@ -3,8 +3,11 @@
3	3	defined('ABSPATH') || die('Restricted Access');
4	4	?>
5	5	<div id="acym_fulldiv_<?php echo esc_attr($form->form_tag_name); ?>"
6	6	class="acym__subscription__form__popup__overlay acym__subscription__form-erase"
	7	+ role="dialog"
	8	+ aria-modal="true"
	9	+ aria-label="<?php echo esc_attr(acym_translation('ACYM_SUBSCRIPTION')); ?>"
7	10	<?php
8	11	if (!$edition && isset($form->settings['display']['scroll']) && $form->settings['display']['scroll'] != 0) {
9	12	echo 'style="display: none;"';
10	13	}
		@@ -9,9 +12,9 @@
9	12	echo 'style="display: none;"';
10	13	}
11	14	?>>
12	15	<div class="acym__subscription__form__popup">
13		- <div class="acym__subscription__form__popup__close acymicon-close"></div>
	16	+ <button type="button" class="acym__subscription__form__popup__close acymicon-close" aria-label="<?php echo esc_attr(acym_translation('ACYM_CLOSE')); ?>"></button>
14	17	<?php
15	18	if ($edition) {
16	19	echo '<form action="#" onsubmit="return false;" id="'.esc_attr($form->form_tag_name).'">';
17	20	} else {
		@@ -24,10 +27,11 @@
24	27	echo '<form acym-data-id="'.esc_attr($form->id).'"
25	28	acym-data-cookie="'.intval($cookieExpiration).'"
26	29	action="'.esc_url($form->form_tag_action).'"
27	30	id="'.esc_attr($form->form_tag_name).'"
28		- name="'.esc_attr($form->form_tag_name).'"
29		- enctype="multipart/form-data"
	31	+ name="'.esc_attr($form->form_tag_name).'"
	32	+ aria-label="'.esc_attr(acym_translation('ACYM_SUBSCRIPTION')).'"
	33	+ enctype="multipart/form-data"
30	34	onsubmit="return submitAcymForm(\'subscribe\',\''.esc_attr($form->form_tag_name).'\', \'acymSubmitSubForm\')">';
31	35	}
32	36	if (in_array($form->settings['style']['position'], ['image-top', 'image-left'])) {
33	37	if (!empty($form->settings['message']['text']) && $form->settings['message']['position'] === 'before-image') {
		@@ -88,8 +92,13 @@
88	92	right: 10px;
89	93	font-weight: bold;
90	94	font-size: 1rem;
91	95	cursor: pointer;
	96	+ background: none;
	97	+ border: none;
	98	+ padding: 0;
	99	+ line-height: 1;
	100	+ color: inherit;
92	101	}
93	102
94	103	#acym_fulldiv_<?php echo esc_html($form->form_tag_name); ?> .acym__subscription__form__popup{
95	104	position: fixed;
		@@ -181,12 +190,62 @@
181	190	return;
182	191	}
183	192
184	193	const isDisplayButton = <?php echo $isButton ? 'true' : 'false'; ?>;
	194	+ let acymLastFocusedElement = null;
185	195
	196	+ function acymGetFocusableElements() {
	197	+ return acym_popupForm.querySelectorAll(
	198	+ 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])'
	199	+ );
	200	+ }
	201	+
	202	+ function acymPopupKeydown(event) {
	203	+ if (event.key === 'Escape' || event.key === 'Esc') {
	204	+ acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(acym_popupForm);
	205	+ return;
	206	+ }
	207	+
	208	+ if (event.key !== 'Tab') {
	209	+ return;
	210	+ }
	211	+
	212	+ const focusable = acymGetFocusableElements();
	213	+ if (focusable.length === 0) {
	214	+ return;
	215	+ }
	216	+
	217	+ const first = focusable[0];
	218	+ const last = focusable[focusable.length - 1];
	219	+
	220	+ if (event.shiftKey && document.activeElement === first) {
	221	+ event.preventDefault();
	222	+ last.focus();
	223	+ } else if (!event.shiftKey && document.activeElement === last) {
	224	+ event.preventDefault();
	225	+ first.focus();
	226	+ }
	227	+ }
	228	+
	229	+ function acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>() {
	230	+ acymLastFocusedElement = document.activeElement;
	231	+ acym_popupForm.style.display = 'inline';
	232	+ acym_popupForm.addEventListener('keydown', acymPopupKeydown);
	233	+
	234	+ const focusable = acymGetFocusableElements();
	235	+ if (focusable.length > 0) {
	236	+ focusable[0].focus();
	237	+ }
	238	+ }
	239	+
186	240	function acym_closePopupform<?php echo esc_html($form->form_tag_name); ?>(element) {
187	241	element.style.display = 'none';
	242	+ acym_popupForm.removeEventListener('keydown', acymPopupKeydown);
188	243
	244	+ if (acymLastFocusedElement && typeof acymLastFocusedElement.focus === 'function') {
	245	+ acymLastFocusedElement.focus();
	246	+ }
	247	+
189	248	if (isDisplayButton) {
190	249	return;
191	250	}
192	251
		@@ -222,9 +281,9 @@
222	281	return;
223	282	}
224	283
225	284	button.addEventListener('click', function () {
226		- acym_popupForm.style.display = 'inline';
	285	+ acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
227	286	});
228	287	}
229	288
230	289	function displayByDelayAndScroll() {
		@@ -249,9 +308,9 @@
249	308	if (!delayRemaining && (
250	309	windowSize <= browserHeight || !scrollRemaining
251	310	)) {
252	311	scrollRemaining = false;
253		- acym_popupForm.style.display = 'inline';
	312	+ acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
254	313	} else {
255	314	function displayAcymPopupForm() {
256	315	let scrollPercent = Math.round((
257	316	window.scrollY
		@@ -261,9 +320,9 @@
261	320	if (scrollPercent >= scrollPercentLimit) {
262	321	scrollRemaining = false;
263	322	window.removeEventListener('scroll', displayAcymPopupForm);
264	323	if (!delayRemaining && acym_popupForm) {
265		- acym_popupForm.style.display = 'inline';
	324	+ acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
266	325	}
267	326	}
268	327	}
269	328
		@@ -277,9 +336,9 @@
277	336	setTimeout(function () {
278	337	if (acym_popupForm !== null) {
279	338	delayRemaining = false;
280	339	if (!scrollRemaining) {
281		- acym_popupForm.style.display = 'inline';
	340	+ acym_openPopupform<?php echo esc_html($form->form_tag_name); ?>();
282	341	window.removeEventListener('scroll', displayAcymPopupForm);
283	342	}
284	343	}
285	344	}, delayInMs);