← All changes | includes/widgets/toggle.php +86 -210 4.2.2 → 3.0.2 View file →

		@@ -42,9 +42,9 @@
42	42	*
43	43	* @return string Widget title.
44	44	*/
45	45	public function get_title() {
46		- return esc_html__( 'Toggle', 'elementor' );
	46	+ return __( 'Toggle', 'elementor' );
47	47	}
48	48
49	49	/**
50	50	* Get widget icon.
		@@ -73,55 +73,21 @@
73	73	public function get_keywords() {
74	74	return [ 'tabs', 'accordion', 'toggle' ];
75	75	}
76	76
77		- protected function is_dynamic_content(): bool {
78		- return false;
79		- }
80		-
81	77	/**
82		- * Get style dependencies.
83		- *
84		- * Retrieve the list of style dependencies the widget requires.
85		- *
86		- * @since 3.24.0
87		- * @access public
88		- *
89		- * @return array Widget style dependencies.
90		- */
91		- public function get_style_depends(): array {
92		- return [ 'widget-toggle' ];
93		- }
94		-
95		- /**
96		- * Hide widget from panel.
97		- *
98		- * Hide the toggle widget from the panel if nested-accordion experiment is active.
99		- *
100		- * @since 3.15.0
101		- * @return bool
102		- */
103		- public function show_in_panel(): bool {
104		- return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements', true );
105		- }
106		-
107		- public function has_widget_inner_wrapper(): bool {
108		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
109		- }
110		-
111		- /**
112	78	* Register toggle widget controls.
113	79	*
114	80	* Adds different input fields to allow the user to change and customize the widget settings.
115	81	*
116		- * @since 3.1.0
	82	+ * @since 1.0.0
117	83	* @access protected
118	84	*/
119		- protected function register_controls() {
	85	+ protected function _register_controls() {
120	86	$this->start_controls_section(
121	87	'section_toggle',
122	88	[
123		- 'label' => esc_html__( 'Toggle', 'elementor' ),
	89	+ 'label' => __( 'Toggle', 'elementor' ),
124	90	]
125	91	);
126	92
127	93	$repeater = new Repeater();
		@@ -128,11 +94,11 @@
128	94
129	95	$repeater->add_control(
130	96	'tab_title',
131	97	[
132		- 'label' => esc_html__( 'Title', 'elementor' ),
	98	+ 'label' => __( 'Title & Description', 'elementor' ),
133	99	'type' => Controls_Manager::TEXT,
134		- 'default' => esc_html__( 'Toggle Title', 'elementor' ),
	100	+ 'default' => __( 'Toggle Title', 'elementor' ),
135	101	'label_block' => true,
136	102	'dynamic' => [
137	103	'active' => true,
138	104	],
		@@ -141,42 +107,29 @@
141	107
142	108	$repeater->add_control(
143	109	'tab_content',
144	110	[
145		- 'label' => esc_html__( 'Content', 'elementor' ),
	111	+ 'label' => __( 'Content', 'elementor' ),
146	112	'type' => Controls_Manager::WYSIWYG,
147		- 'default' => esc_html__( 'Toggle Content', 'elementor' ),
148		- 'dynamic' => [
149		- 'active' => true,
150		- ],
	113	+ 'default' => __( 'Toggle Content', 'elementor' ),
	114	+ 'show_label' => false,
151	115	]
152	116	);
153	117
154		- if ( Plugin::$instance->widgets_manager->get_widget_types( 'nested-accordion' ) ) {
155		- $this->add_deprecation_message(
156		- '3.15.0',
157		- esc_html__(
158		- 'You are currently editing a Toggle widget in its old version. Drag a new Accordion widget onto your page to use a newer version, providing nested capabilities.',
159		- 'elementor'
160		- ),
161		- 'nested-accordion'
162		- );
163		- }
164		-
165	118	$this->add_control(
166	119	'tabs',
167	120	[
168		- 'label' => esc_html__( 'Toggle Items', 'elementor' ),
	121	+ 'label' => __( 'Toggle Items', 'elementor' ),
169	122	'type' => Controls_Manager::REPEATER,
170	123	'fields' => $repeater->get_controls(),
171	124	'default' => [
172	125	[
173		- 'tab_title' => esc_html__( 'Toggle #1', 'elementor' ),
174		- 'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
	126	+ 'tab_title' => __( 'Toggle #1', 'elementor' ),
	127	+ 'tab_content' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
175	128	],
176	129	[
177		- 'tab_title' => esc_html__( 'Toggle #2', 'elementor' ),
178		- 'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
	130	+ 'tab_title' => __( 'Toggle #2', 'elementor' ),
	131	+ 'tab_content' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
179	132	],
180	133	],
181	134	'title_field' => '{{{ tab_title }}}',
182	135	]
		@@ -182,11 +135,20 @@
182	135	]
183	136	);
184	137
185	138	$this->add_control(
	139	+ 'view',
	140	+ [
	141	+ 'label' => __( 'View', 'elementor' ),
	142	+ 'type' => Controls_Manager::HIDDEN,
	143	+ 'default' => 'traditional',
	144	+ ]
	145	+ );
	146	+
	147	+ $this->add_control(
186	148	'selected_icon',
187	149	[
188		- 'label' => esc_html__( 'Icon', 'elementor' ),
	150	+ 'label' => __( 'Icon', 'elementor' ),
189	151	'type' => Controls_Manager::ICONS,
190	152	'separator' => 'before',
191	153	'fa4compatibility' => 'icon',
192	154	'default' => [
		@@ -212,9 +174,9 @@
212	174
213	175	$this->add_control(
214	176	'selected_active_icon',
215	177	[
216		- 'label' => esc_html__( 'Active Icon', 'elementor' ),
	178	+ 'label' => __( 'Active Icon', 'elementor' ),
217	179	'type' => Controls_Manager::ICONS,
218	180	'fa4compatibility' => 'icon_active',
219	181	'default' => [
220	182	'value' => 'fas fa-caret-up',
		@@ -242,9 +204,9 @@
242	204
243	205	$this->add_control(
244	206	'title_html_tag',
245	207	[
246		- 'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
	208	+ 'label' => __( 'Title HTML Tag', 'elementor' ),
247	209	'type' => Controls_Manager::SELECT,
248	210	'options' => [
249	211	'h1' => 'H1',
250	212	'h2' => 'H2',
		@@ -258,23 +220,14 @@
258	220	'separator' => 'before',
259	221	]
260	222	);
261	223
262		- $this->add_control(
263		- 'faq_schema',
264		- [
265		- 'label' => esc_html__( 'FAQ Schema', 'elementor' ),
266		- 'type' => Controls_Manager::SWITCHER,
267		- 'separator' => 'before',
268		- ]
269		- );
270		-
271	224	$this->end_controls_section();
272	225
273	226	$this->start_controls_section(
274	227	'section_toggle_style',
275	228	[
276		- 'label' => esc_html__( 'Toggle', 'elementor' ),
	229	+ 'label' => __( 'Toggle', 'elementor' ),
277	230	'tab' => Controls_Manager::TAB_STYLE,
278	231	]
279	232	);
280	233
		@@ -280,22 +233,19 @@
280	233
281	234	$this->add_control(
282	235	'border_width',
283	236	[
284		- 'label' => esc_html__( 'Border Width', 'elementor' ),
	237	+ 'label' => __( 'Border Width', 'elementor' ),
285	238	'type' => Controls_Manager::SLIDER,
286		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
287	239	'range' => [
288	240	'px' => [
289		- 'max' => 20,
	241	+ 'min' => 0,
	242	+ 'max' => 10,
290	243	],
291		- 'em' => [
292		- 'max' => 2,
293		- ],
294	244	],
295	245	'selectors' => [
296		- '{{WRAPPER}} .elementor-tab-title' => 'border-width: {{SIZE}}{{UNIT}};',
297		- '{{WRAPPER}} .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
	246	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-title' => 'border-width: {{SIZE}}{{UNIT}};',
	247	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
298	248	],
299	249	]
300	250	);
301	251
		@@ -301,13 +251,13 @@
301	251
302	252	$this->add_control(
303	253	'border_color',
304	254	[
305		- 'label' => esc_html__( 'Border Color', 'elementor' ),
	255	+ 'label' => __( 'Border Color', 'elementor' ),
306	256	'type' => Controls_Manager::COLOR,
307	257	'selectors' => [
308		- '{{WRAPPER}} .elementor-tab-content' => 'border-block-end-color: {{VALUE}};',
309		- '{{WRAPPER}} .elementor-tab-title' => 'border-color: {{VALUE}};',
	258	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-content' => 'border-bottom-color: {{VALUE}};',
	259	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-title' => 'border-color: {{VALUE}};',
310	260	],
311	261	]
312	262	);
313	263
		@@ -313,24 +263,18 @@
313	263
314	264	$this->add_responsive_control(
315	265	'space_between',
316	266	[
317		- 'label' => esc_html__( 'Space Between', 'elementor' ),
	267	+ 'label' => __( 'Space Between', 'elementor' ),
318	268	'type' => Controls_Manager::SLIDER,
319		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
320	269	'range' => [
321	270	'px' => [
	271	+ 'min' => 0,
322	272	'max' => 100,
323	273	],
324		- 'em' => [
325		- 'max' => 10,
326		- ],
327		- 'rem' => [
328		- 'max' => 10,
329		- ],
330	274	],
331	275	'selectors' => [
332		- '{{WRAPPER}} .elementor-toggle-item:not(:last-child)' => 'margin-block-end: {{SIZE}}{{UNIT}}',
	276	+ '{{WRAPPER}} .elementor-toggle .elementor-toggle-item:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}}',
333	277	],
334	278	]
335	279	);
336	280
		@@ -337,9 +281,9 @@
337	281	$this->add_group_control(
338	282	Group_Control_Box_Shadow::get_type(),
339	283	[
340	284	'name' => 'box_shadow',
341		- 'selector' => '{{WRAPPER}} .elementor-toggle-item',
	285	+ 'selector' => '{{WRAPPER}} .elementor-toggle .elementor-toggle-item',
342	286	]
343	287	);
344	288
345	289	$this->end_controls_section();
		@@ -346,9 +290,9 @@
346	290
347	291	$this->start_controls_section(
348	292	'section_toggle_style_title',
349	293	[
350		- 'label' => esc_html__( 'Title', 'elementor' ),
	294	+ 'label' => __( 'Title', 'elementor' ),
351	295	'tab' => Controls_Manager::TAB_STYLE,
352	296	]
353	297	);
354	298
		@@ -354,12 +298,12 @@
354	298
355	299	$this->add_control(
356	300	'title_background',
357	301	[
358		- 'label' => esc_html__( 'Background', 'elementor' ),
	302	+ 'label' => __( 'Background', 'elementor' ),
359	303	'type' => Controls_Manager::COLOR,
360	304	'selectors' => [
361		- '{{WRAPPER}} .elementor-tab-title' => 'background-color: {{VALUE}};',
	305	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-title' => 'background-color: {{VALUE}};',
362	306	],
363	307	]
364	308	);
365	309
		@@ -366,13 +310,12 @@
366	310	// The title selector specificity is to override Theme Style
367	311	$this->add_control(
368	312	'title_color',
369	313	[
370		- 'label' => esc_html__( 'Color', 'elementor' ),
	314	+ 'label' => __( 'Color', 'elementor' ),
371	315	'type' => Controls_Manager::COLOR,
372	316	'selectors' => [
373	317	'{{WRAPPER}} .elementor-toggle-title, {{WRAPPER}} .elementor-toggle-icon' => 'color: {{VALUE}};',
374		- '{{WRAPPER}} .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
375	318	],
376	319	'global' => [
377	320	'default' => Global_Colors::COLOR_PRIMARY,
378	321	],
		@@ -381,9 +324,9 @@
381	324
382	325	$this->add_control(
383	326	'tab_active_color',
384	327	[
385		- 'label' => esc_html__( 'Active Color', 'elementor' ),
	328	+ 'label' => __( 'Active Color', 'elementor' ),
386	329	'type' => Controls_Manager::COLOR,
387	330	'selectors' => [
388	331	'{{WRAPPER}} .elementor-tab-title.elementor-active a, {{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon' => 'color: {{VALUE}};',
389	332	],
		@@ -396,9 +339,9 @@
396	339	$this->add_group_control(
397	340	Group_Control_Typography::get_type(),
398	341	[
399	342	'name' => 'title_typography',
400		- 'selector' => '{{WRAPPER}} .elementor-toggle-title',
	343	+ 'selector' => '{{WRAPPER}} .elementor-toggle .elementor-toggle-title',
401	344	'global' => [
402	345	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
403	346	],
404	347	]
		@@ -403,24 +346,16 @@
403	346	],
404	347	]
405	348	);
406	349
407		- $this->add_group_control(
408		- Group_Control_Text_Shadow::get_type(),
409		- [
410		- 'name' => 'title_shadow',
411		- 'selector' => '{{WRAPPER}} .elementor-toggle-title',
412		- ]
413		- );
414		-
415	350	$this->add_responsive_control(
416	351	'title_padding',
417	352	[
418		- 'label' => esc_html__( 'Padding', 'elementor' ),
	353	+ 'label' => __( 'Padding', 'elementor' ),
419	354	'type' => Controls_Manager::DIMENSIONS,
420		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	355	+ 'size_units' => [ 'px', 'em', '%' ],
421	356	'selectors' => [
422		- '{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	357	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
423	358	],
424	359	]
425	360	);
426	361
		@@ -428,9 +363,9 @@
428	363
429	364	$this->start_controls_section(
430	365	'section_toggle_style_icon',
431	366	[
432		- 'label' => esc_html__( 'Icon', 'elementor' ),
	367	+ 'label' => __( 'Icon', 'elementor' ),
433	368	'tab' => Controls_Manager::TAB_STYLE,
434	369	'condition' => [
435	370	'selected_icon[value]!' => '',
436	371	],
		@@ -439,17 +374,17 @@
439	374
440	375	$this->add_control(
441	376	'icon_align',
442	377	[
443		- 'label' => esc_html__( 'Alignment', 'elementor' ),
	378	+ 'label' => __( 'Alignment', 'elementor' ),
444	379	'type' => Controls_Manager::CHOOSE,
445	380	'options' => [
446	381	'left' => [
447		- 'title' => esc_html__( 'Start', 'elementor' ),
	382	+ 'title' => __( 'Start', 'elementor' ),
448	383	'icon' => 'eicon-h-align-left',
449	384	],
450	385	'right' => [
451		- 'title' => esc_html__( 'End', 'elementor' ),
	386	+ 'title' => __( 'End', 'elementor' ),
452	387	'icon' => 'eicon-h-align-right',
453	388	],
454	389	],
455	390	'default' => is_rtl() ? 'right' : 'left',
		@@ -459,13 +394,13 @@
459	394
460	395	$this->add_control(
461	396	'icon_color',
462	397	[
463		- 'label' => esc_html__( 'Color', 'elementor' ),
	398	+ 'label' => __( 'Color', 'elementor' ),
464	399	'type' => Controls_Manager::COLOR,
465	400	'selectors' => [
466		- '{{WRAPPER}} .elementor-tab-title .elementor-toggle-icon i:before' => 'color: {{VALUE}};',
467		- '{{WRAPPER}} .elementor-tab-title .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
	401	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-title .elementor-toggle-icon i:before' => 'color: {{VALUE}};',
	402	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-title .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
468	403	],
469	404	]
470	405	);
471	406
		@@ -471,13 +406,13 @@
471	406
472	407	$this->add_control(
473	408	'icon_active_color',
474	409	[
475		- 'label' => esc_html__( 'Active Color', 'elementor' ),
	410	+ 'label' => __( 'Active Color', 'elementor' ),
476	411	'type' => Controls_Manager::COLOR,
477	412	'selectors' => [
478		- '{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon i:before' => 'color: {{VALUE}};',
479		- '{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
	413	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon i:before' => 'color: {{VALUE}};',
	414	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
480	415	],
481	416	]
482	417	);
483	418
		@@ -483,24 +418,19 @@
483	418
484	419	$this->add_responsive_control(
485	420	'icon_space',
486	421	[
487		- 'label' => esc_html__( 'Spacing', 'elementor' ),
	422	+ 'label' => __( 'Spacing', 'elementor' ),
488	423	'type' => Controls_Manager::SLIDER,
489		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
490	424	'range' => [
491	425	'px' => [
	426	+ 'min' => 0,
492	427	'max' => 100,
493	428	],
494		- 'em' => [
495		- 'max' => 10,
496		- ],
497		- 'rem' => [
498		- 'max' => 10,
499		- ],
500	429	],
501	430	'selectors' => [
502		- '{{WRAPPER}} .elementor-toggle-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	431	+ '{{WRAPPER}} .elementor-toggle .elementor-toggle-icon.elementor-toggle-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	432	+ '{{WRAPPER}} .elementor-toggle .elementor-toggle-icon.elementor-toggle-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
503	433	],
504	434	]
505	435	);
506	436
		@@ -508,9 +438,9 @@
508	438
509	439	$this->start_controls_section(
510	440	'section_toggle_style_content',
511	441	[
512		- 'label' => esc_html__( 'Content', 'elementor' ),
	442	+ 'label' => __( 'Content', 'elementor' ),
513	443	'tab' => Controls_Manager::TAB_STYLE,
514	444	]
515	445	);
516	446
		@@ -516,12 +446,12 @@
516	446
517	447	$this->add_control(
518	448	'content_background_color',
519	449	[
520		- 'label' => esc_html__( 'Background', 'elementor' ),
	450	+ 'label' => __( 'Background', 'elementor' ),
521	451	'type' => Controls_Manager::COLOR,
522	452	'selectors' => [
523		- '{{WRAPPER}} .elementor-tab-content' => 'background-color: {{VALUE}};',
	453	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-content' => 'background-color: {{VALUE}};',
524	454	],
525	455	]
526	456	);
527	457
		@@ -527,12 +457,12 @@
527	457
528	458	$this->add_control(
529	459	'content_color',
530	460	[
531		- 'label' => esc_html__( 'Color', 'elementor' ),
	461	+ 'label' => __( 'Color', 'elementor' ),
532	462	'type' => Controls_Manager::COLOR,
533	463	'selectors' => [
534		- '{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
	464	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-content' => 'color: {{VALUE}};',
535	465	],
536	466	'global' => [
537	467	'default' => Global_Colors::COLOR_TEXT,
538	468	],
		@@ -542,9 +472,9 @@
542	472	$this->add_group_control(
543	473	Group_Control_Typography::get_type(),
544	474	[
545	475	'name' => 'content_typography',
546		- 'selector' => '{{WRAPPER}} .elementor-tab-content',
	476	+ 'selector' => '{{WRAPPER}} .elementor-toggle .elementor-tab-content',
547	477	'global' => [
548	478	'default' => Global_Typography::TYPOGRAPHY_TEXT,
549	479	],
550	480	]
		@@ -549,24 +479,16 @@
549	479	],
550	480	]
551	481	);
552	482
553		- $this->add_group_control(
554		- Group_Control_Text_Shadow::get_type(),
555		- [
556		- 'name' => 'content_shadow',
557		- 'selector' => '{{WRAPPER}} .elementor-tab-content',
558		- ]
559		- );
560		-
561	483	$this->add_responsive_control(
562	484	'content_padding',
563	485	[
564		- 'label' => esc_html__( 'Padding', 'elementor' ),
	486	+ 'label' => __( 'Padding', 'elementor' ),
565	487	'type' => Controls_Manager::DIMENSIONS,
566		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	488	+ 'size_units' => [ 'px', 'em', '%' ],
567	489	'selectors' => [
568		- '{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	490	+ '{{WRAPPER}} .elementor-toggle .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
569	491	],
570	492	]
571	493	);
572	494
		@@ -599,9 +521,9 @@
599	521	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
600	522	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
601	523
602	524	?>
603		- <div class="elementor-toggle">
	525	+ <div class="elementor-toggle" role="tablist">
604	526	<?php
605	527	foreach ( $settings['tabs'] as $index => $item ) :
606	528	$tab_count = $index + 1;
607	529
		@@ -612,11 +534,10 @@
612	534	$this->add_render_attribute( $tab_title_setting_key, [
613	535	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
614	536	'class' => [ 'elementor-tab-title' ],
615	537	'data-tab' => $tab_count,
616		- 'role' => 'button',
	538	+ 'role' => 'tab',
617	539	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
618		- 'aria-expanded' => 'false',
619	540	] );
620	541
621	542	$this->add_render_attribute( $tab_content_setting_key, [
622	543	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
		@@ -621,9 +542,9 @@
621	542	$this->add_render_attribute( $tab_content_setting_key, [
622	543	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
623	544	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
624	545	'data-tab' => $tab_count,
625		- 'role' => 'region',
	546	+ 'role' => 'tabpanel',
626	547	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
627	548	] );
628	549
629	550	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -628,9 +549,9 @@
628	549
629	550	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
630	551	?>
631	552	<div class="elementor-toggle-item">
632		- <<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?> <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>>
	553	+ <<?php echo esc_html( $settings['title_html_tag'] ); ?> <?php echo $this->get_render_attribute_string( $tab_title_setting_key ); ?>>
633	554	<?php if ( $has_icon ) : ?>
634	555	<span class="elementor-toggle-icon elementor-toggle-icon-<?php echo esc_attr( $settings['icon_align'] ); ?>" aria-hidden="true">
635	556	<?php
636	557	if ( $is_new || $migrated ) { ?>
		@@ -641,35 +562,13 @@
641	562	<i class="elementor-toggle-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
642	563	<?php } ?>
643	564	</span>
644	565	<?php endif; ?>
645		- <a class="elementor-toggle-title" tabindex="0"><?php $this->print_unescaped_setting( 'tab_title', 'tabs', $index ); ?></a>
646		- </<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
647		-
648		- <div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php Utils::print_unescaped_internal_string( $this->parse_text_editor( $item['tab_content'] ) ); ?></div>
	566	+ <a href="" class="elementor-toggle-title"><?php echo $item['tab_title']; ?></a>
	567	+ </<?php echo esc_html( $settings['title_html_tag'] ); ?>>
	568	+ <div <?php echo $this->get_render_attribute_string( $tab_content_setting_key ); ?>><?php echo $this->parse_text_editor( $item['tab_content'] ); ?></div>
649	569	</div>
650	570	<?php endforeach; ?>
651		- <?php
652		- if ( isset( $settings['faq_schema'] ) && 'yes' === $settings['faq_schema'] ) {
653		- $json = [
654		- '@context' => 'https://schema.org',
655		- '@type' => 'FAQPage',
656		- 'mainEntity' => [],
657		- ];
658		-
659		- foreach ( $settings['tabs'] as $index => $item ) {
660		- $json['mainEntity'][] = [
661		- '@type' => 'Question',
662		- 'name' => wp_strip_all_tags( $item['tab_title'] ),
663		- 'acceptedAnswer' => [
664		- '@type' => 'Answer',
665		- 'text' => $this->parse_text_editor( $item['tab_content'] ),
666		- ],
667		- ];
668		- }
669		- ?>
670		- <script type="application/ld+json"><?php echo wp_json_encode( $json ); ?></script>
671		- <?php } ?>
672	571	</div>
673	572	<?php
674	573	}
675	574
		@@ -682,16 +581,15 @@
682	581	* @access protected
683	582	*/
684	583	protected function content_template() {
685	584	?>
686		- <div class="elementor-toggle">
	585	+ <div class="elementor-toggle" role="tablist">
687	586	<#
688	587	if ( settings.tabs ) {
689	588	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
690	589	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
691	590	iconActiveHTML = elementor.helpers.renderIcon( view, settings.selected_active_icon, {}, 'i' , 'object' ),
692		- migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
693		- titleHTMLTag = elementor.helpers.validateHTMLTag( settings.title_html_tag );
	591	+ migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
694	592
695	593	_.each( settings.tabs, function( item, index ) {
696	594	var tabCount = index + 1,
697	595	tabTitleKey = view.getRepeaterSettingKey( 'tab_title', 'tabs', index ),
		@@ -700,11 +598,10 @@
700	598	view.addRenderAttribute( tabTitleKey, {
701	599	'id': 'elementor-tab-title-' + tabindex + tabCount,
702	600	'class': [ 'elementor-tab-title' ],
703	601	'data-tab': tabCount,
704		- 'role': 'button',
705		- 'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
706		- 'aria-expanded': 'false',
	602	+ 'role': 'tab',
	603	+ 'aria-controls': 'elementor-tab-content-' + tabindex + tabCount
707	604	} );
708	605
709	606	view.addRenderAttribute( tabContentKey, {
710	607	'id': 'elementor-tab-content-' + tabindex + tabCount,
		@@ -709,9 +606,9 @@
709	606	view.addRenderAttribute( tabContentKey, {
710	607	'id': 'elementor-tab-content-' + tabindex + tabCount,
711	608	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
712	609	'data-tab': tabCount,
713		- 'role': 'region',
	610	+ 'role': 'tabpanel',
714	611	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
715	612	} );
716	613
717	614	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -716,9 +613,9 @@
716	613
717	614	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
718	615	#>
719	616	<div class="elementor-toggle-item">
720		- <{{{ titleHTMLTag }}} {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
	617	+ <{{{ settings.title_html_tag }}} {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
721	618	<# if ( settings.icon || settings.selected_icon ) { #>
722	619	<span class="elementor-toggle-icon elementor-toggle-icon-{{ settings.icon_align }}" aria-hidden="true">
723	620	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon || migrated ) ) { #>
724	621	<span class="elementor-toggle-icon-closed">{{{ iconHTML.value }}}</span>
		@@ -728,10 +625,10 @@
728	625	<i class="elementor-toggle-icon-opened {{ settings.icon_active }}"></i>
729	626	<# } #>
730	627	</span>
731	628	<# } #>
732		- <a class="elementor-toggle-title" tabindex="0">{{{ item.tab_title }}}</a>
733		- </{{{ titleHTMLTag }}}>
	629	+ <a href="">{{{ item.tab_title }}}</a>
	630	+ </{{{ settings.title_html_tag }}}>
734	631	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
735	632	</div>
736	633	<#
737	634	} );
		@@ -737,27 +634,6 @@
737	634	} );
738	635	} #>
739	636	</div>
740	637	<?php
741		- }
742		-
743		- public function render_markdown(): string {
744		- $settings = $this->get_settings_for_display();
745		- if ( empty( $settings['tabs'] ) ) {
746		- return '';
747		- }
748		- $sections = [];
749		- foreach ( $settings['tabs'] as $item ) {
750		- $title = Utils::html_to_plain_text( $item['tab_title'] ?? '' );
751		- $content = \Elementor\Modules\MarkdownRender\Html_To_Markdown::convert( $item['tab_content'] ?? '' );
752		- if ( empty( $title ) && empty( $content ) ) {
753		- continue;
754		- }
755		- $section = '### ' . $title;
756		- if ( ! empty( $content ) ) {
757		- $section .= "\n\n" . $content;
758		- }
759		- $sections[] = $section;
760		- }
761		- return implode( "\n\n", $sections );
762	638	}
763	639	}