← All changes | includes/widgets/accordion.php +28 -72 4.0.7 → 3.6.6 View file →

		@@ -6,9 +6,8 @@
6	6	}
7	7
8	8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10		-
11	10	/**
12	11	* Elementor accordion widget.
13	12	*
14	13	* Elementor widget that displays a collapsible display of content in an
		@@ -73,43 +72,9 @@
73	72	public function get_keywords() {
74	73	return [ 'accordion', 'tabs', 'toggle' ];
75	74	}
76	75
77		- protected function is_dynamic_content(): bool {
78		- return false;
79		- }
80		-
81	76	/**
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-accordion' ];
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	77	* Register accordion widget controls.
113	78	*
114	79	* Adds different input fields to allow the user to change and customize the widget settings.
115	80	*
		@@ -128,9 +93,9 @@
128	93
129	94	$repeater->add_control(
130	95	'tab_title',
131	96	[
132		- 'label' => esc_html__( 'Title', 'elementor' ),
	97	+ 'label' => esc_html__( 'Title & Description', 'elementor' ),
133	98	'type' => Controls_Manager::TEXT,
134	99	'default' => esc_html__( 'Accordion Title', 'elementor' ),
135	100	'dynamic' => [
136	101	'active' => true,
		@@ -144,22 +109,12 @@
144	109	[
145	110	'label' => esc_html__( 'Content', 'elementor' ),
146	111	'type' => Controls_Manager::WYSIWYG,
147	112	'default' => esc_html__( 'Accordion Content', 'elementor' ),
	113	+ 'show_label' => false,
148	114	]
149	115	);
150	116
151		- if ( Plugin::$instance->widgets_manager->get_widget_types( 'nested-accordion' ) ) {
152		- $this->add_deprecation_message(
153		- '3.15.0',
154		- esc_html__(
155		- 'You are currently editing an Accordion Widget in its old version. Any new Accordion widget dragged into the canvas will be the new Accordion widget, with the improved Nested capabilities.',
156		- 'elementor'
157		- ),
158		- 'nested-accordion'
159		- );
160		- }
161		-
162	117	$this->add_control(
163	118	'tabs',
164	119	[
165	120	'label' => esc_html__( 'Accordion Items', 'elementor' ),
		@@ -179,8 +134,17 @@
179	134	]
180	135	);
181	136
182	137	$this->add_control(
	138	+ 'view',
	139	+ [
	140	+ 'label' => esc_html__( 'View', 'elementor' ),
	141	+ 'type' => Controls_Manager::HIDDEN,
	142	+ 'default' => 'traditional',
	143	+ ]
	144	+ );
	145	+
	146	+ $this->add_control(
183	147	'selected_icon',
184	148	[
185	149	'label' => esc_html__( 'Icon', 'elementor' ),
186	150	'type' => Controls_Manager::ICONS,
		@@ -279,16 +243,13 @@
279	243	'border_width',
280	244	[
281	245	'label' => esc_html__( 'Border Width', 'elementor' ),
282	246	'type' => Controls_Manager::SLIDER,
283		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
284	247	'range' => [
285	248	'px' => [
286		- 'max' => 20,
	249	+ 'min' => 0,
	250	+ 'max' => 10,
287	251	],
288		- 'em' => [
289		- 'max' => 2,
290		- ],
291	252	],
292	253	'selectors' => [
293	254	'{{WRAPPER}} .elementor-accordion-item' => 'border-width: {{SIZE}}{{UNIT}};',
294	255	'{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
		@@ -303,10 +264,10 @@
303	264	'label' => esc_html__( 'Border Color', 'elementor' ),
304	265	'type' => Controls_Manager::COLOR,
305	266	'selectors' => [
306	267	'{{WRAPPER}} .elementor-accordion-item' => 'border-color: {{VALUE}};',
307		- '{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-block-start-color: {{VALUE}};',
308		- '{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-block-end-color: {{VALUE}};',
	268	+ '{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-top-color: {{VALUE}};',
	269	+ '{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-bottom-color: {{VALUE}};',
309	270	],
310	271	]
311	272	);
312	273
		@@ -392,9 +353,9 @@
392	353	'title_padding',
393	354	[
394	355	'label' => esc_html__( 'Padding', 'elementor' ),
395	356	'type' => Controls_Manager::DIMENSIONS,
396		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	357	+ 'size_units' => [ 'px', 'em', '%' ],
397	358	'selectors' => [
398	359	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
399	360	],
400	361	]
		@@ -461,22 +422,17 @@
461	422	'icon_space',
462	423	[
463	424	'label' => esc_html__( 'Spacing', 'elementor' ),
464	425	'type' => Controls_Manager::SLIDER,
465		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
466	426	'range' => [
467	427	'px' => [
	428	+ 'min' => 0,
468	429	'max' => 100,
469	430	],
470		- 'em' => [
471		- 'max' => 1,
472		- ],
473		- 'rem' => [
474		- 'max' => 1,
475		- ],
476	431	],
477	432	'selectors' => [
478		- '{{WRAPPER}} .elementor-accordion-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	433	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	434	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
479	435	],
480	436	]
481	437	);
482	438
		@@ -538,9 +494,9 @@
538	494	'content_padding',
539	495	[
540	496	'label' => esc_html__( 'Padding', 'elementor' ),
541	497	'type' => Controls_Manager::DIMENSIONS,
542		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	498	+ 'size_units' => [ 'px', 'em', '%' ],
543	499	'selectors' => [
544	500	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
545	501	],
546	502	]
		@@ -573,9 +529,9 @@
573	529	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
574	530	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
575	531	$id_int = substr( $this->get_id_int(), 0, 3 );
576	532	?>
577		- <div class="elementor-accordion">
	533	+ <div class="elementor-accordion" role="tablist">
578	534	<?php
579	535	foreach ( $settings['tabs'] as $index => $item ) :
580	536	$tab_count = $index + 1;
581	537
		@@ -586,9 +542,9 @@
586	542	$this->add_render_attribute( $tab_title_setting_key, [
587	543	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
588	544	'class' => [ 'elementor-tab-title' ],
589	545	'data-tab' => $tab_count,
590		- 'role' => 'button',
	546	+ 'role' => 'tab',
591	547	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
592	548	'aria-expanded' => 'false',
593	549	] );
594	550
		@@ -595,9 +551,9 @@
595	551	$this->add_render_attribute( $tab_content_setting_key, [
596	552	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
597	553	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
598	554	'data-tab' => $tab_count,
599		- 'role' => 'region',
	555	+ 'role' => 'tabpanel',
600	556	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
601	557	] );
602	558
603	559	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -615,9 +571,9 @@
615	571	<i class="elementor-accordion-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
616	572	<?php } ?>
617	573	</span>
618	574	<?php endif; ?>
619		- <a class="elementor-accordion-title" tabindex="0"><?php
	575	+ <a class="elementor-accordion-title" href=""><?php
620	576	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
621	577	?></a>
622	578	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
623	579	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
		@@ -659,9 +615,9 @@
659	615	* @access protected
660	616	*/
661	617	protected function content_template() {
662	618	?>
663		- <div class="elementor-accordion">
	619	+ <div class="elementor-accordion" role="tablist">
664	620	<#
665	621	if ( settings.tabs ) {
666	622	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
667	623	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
		@@ -677,9 +633,9 @@
677	633	'id': 'elementor-tab-title-' + tabindex + tabCount,
678	634	'class': [ 'elementor-tab-title' ],
679	635	'tabindex': tabindex + tabCount,
680	636	'data-tab': tabCount,
681		- 'role': 'button',
	637	+ 'role': 'tab',
682	638	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
683	639	'aria-expanded': 'false',
684	640	} );
685	641
		@@ -686,9 +642,9 @@
686	642	view.addRenderAttribute( tabContentKey, {
687	643	'id': 'elementor-tab-content-' + tabindex + tabCount,
688	644	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
689	645	'data-tab': tabCount,
690		- 'role': 'region',
	646	+ 'role': 'tabpanel',
691	647	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
692	648	} );
693	649
694	650	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -707,9 +663,9 @@
707	663	<i class="elementor-accordion-icon-opened {{ settings.icon_active }}"></i>
708	664	<# } #>
709	665	</span>
710	666	<# } #>
711		- <a class="elementor-accordion-title" tabindex="0">{{{ item.tab_title }}}</a>
	667	+ <a class="elementor-accordion-title" href="">{{{ item.tab_title }}}</a>
712	668	</{{{ titleHTMLTag }}}>
713	669	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
714	670	</div>
715	671	<#