← All changes | includes/widgets/Woo_Product_Tabs/script.js +23 -7 51.1.63 → 51.1.87 View file →

		@@ -1,7 +1,14 @@
1	1	(function () {
2	2	'use strict';
3	3
	4	+ const errorMarkup = (wrapper) => {
	5	+ const text = wrapper.dataset.errorText || 'Could not load content.';
	6	+ const node = document.createElement('div');
	7	+ node.textContent = text;
	8	+ return '<div class="ka-woo-tabs__error">' + node.innerHTML + '</div>';
	9	+ };
	10	+
4	11	const loadTabContent = async (wrapper, key) => {
5	12	const ajax = wrapper.dataset.ajax === 'yes';
6	13	if (!ajax) {
7	14	return true;
		@@ -11,8 +18,13 @@
11	18	if (!panel || !panel.querySelector('.ka-woo-tabs__placeholder')) {
12	19	return true;
13	20	}
14	21
	22	+ // In accordion layout the placeholder sits inside the body, below the
	23	+ // header button - replacing the panel's own innerHTML would delete the
	24	+ // header the visitor just clicked.
	25	+ const target = panel.querySelector('.ka-woo-tabs__accordion-body') || panel;
	26	+
15	27	const ajaxUrl = wrapper.dataset.ajaxUrl;
16	28	const nonce = wrapper.dataset.nonce;
17	29	const productId = wrapper.dataset.productId;
18	30
		@@ -36,15 +48,15 @@
36	48	});
37	49
38	50	const result = await response.json();
39	51	if (result && result.success && result.data && typeof result.data.html === 'string') {
40		- panel.innerHTML = result.data.html;
	52	+ target.innerHTML = result.data.html;
41	53	panel.dataset.loaded = 'yes';
42	54	} else {
43		- panel.innerHTML = '<div class="ka-woo-tabs__error">Could not load content.</div>';
	55	+ target.innerHTML = errorMarkup(wrapper);
44	56	}
45	57	} catch (e) {
46		- panel.innerHTML = '<div class="ka-woo-tabs__error">Could not load content.</div>';
	58	+ target.innerHTML = errorMarkup(wrapper);
47	59	}
48	60
49	61	panel.classList.remove('is-loading');
50	62	return true;
		@@ -55,15 +67,19 @@
55	67	const panels = wrapper.querySelectorAll('.ka-woo-tabs__panel');
56	68	const accordions = wrapper.querySelectorAll('.ka-woo-tabs__accordion-toggle');
57	69
58	70	const setActive = (key) => {
59		- tabs.forEach((btn) => btn.classList.toggle('is-active', btn.dataset.tab === key));
	71	+ tabs.forEach((btn) => {
	72	+ const active = btn.dataset.tab === key;
	73	+ btn.classList.toggle('is-active', active);
	74	+ btn.setAttribute('aria-selected', active ? 'true' : 'false');
	75	+ });
60	76	panels.forEach((panel) => {
61	77	const active = panel.dataset.tab === key;
62	78	panel.classList.toggle('is-active', active);
63		- const body = panel.querySelector('.ka-woo-tabs__accordion-body');
64		- if (body) {
65		- body.style.display = active ? 'block' : 'none';
	79	+ const toggle = panel.querySelector('.ka-woo-tabs__accordion-toggle');
	80	+ if (toggle) {
	81	+ toggle.setAttribute('aria-expanded', active ? 'true' : 'false');
66	82	}
67	83	});
68	84	};
69	85