← All changes | includes/widgets/accordion.php +24 -65 4.0.9 → 3.13.0-beta1 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,
		@@ -303,10 +267,10 @@
303	267	'label' => esc_html__( 'Border Color', 'elementor' ),
304	268	'type' => Controls_Manager::COLOR,
305	269	'selectors' => [
306	270	'{{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}};',
	271	+ '{{WRAPPER}} .elementor-accordion-item .elementor-tab-content' => 'border-top-color: {{VALUE}};',
	272	+ '{{WRAPPER}} .elementor-accordion-item .elementor-tab-title.elementor-active' => 'border-bottom-color: {{VALUE}};',
309	273	],
310	274	]
311	275	);
312	276
		@@ -461,22 +425,17 @@
461	425	'icon_space',
462	426	[
463	427	'label' => esc_html__( 'Spacing', 'elementor' ),
464	428	'type' => Controls_Manager::SLIDER,
465		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
466	429	'range' => [
467	430	'px' => [
	431	+ 'min' => 0,
468	432	'max' => 100,
469	433	],
470		- 'em' => [
471		- 'max' => 1,
472		- ],
473		- 'rem' => [
474		- 'max' => 1,
475		- ],
476	434	],
477	435	'selectors' => [
478		- '{{WRAPPER}} .elementor-accordion-icon' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
	436	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
	437	+ '{{WRAPPER}} .elementor-accordion-icon.elementor-accordion-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
479	438	],
480	439	]
481	440	);
482	441
		@@ -573,9 +532,9 @@
573	532	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
574	533	$has_icon = ( ! $is_new || ! empty( $settings['selected_icon']['value'] ) );
575	534	$id_int = substr( $this->get_id_int(), 0, 3 );
576	535	?>
577		- <div class="elementor-accordion">
	536	+ <div class="elementor-accordion" role="tablist">
578	537	<?php
579	538	foreach ( $settings['tabs'] as $index => $item ) :
580	539	$tab_count = $index + 1;
581	540
		@@ -586,9 +545,9 @@
586	545	$this->add_render_attribute( $tab_title_setting_key, [
587	546	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
588	547	'class' => [ 'elementor-tab-title' ],
589	548	'data-tab' => $tab_count,
590		- 'role' => 'button',
	549	+ 'role' => 'tab',
591	550	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
592	551	'aria-expanded' => 'false',
593	552	] );
594	553
		@@ -595,9 +554,9 @@
595	554	$this->add_render_attribute( $tab_content_setting_key, [
596	555	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
597	556	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
598	557	'data-tab' => $tab_count,
599		- 'role' => 'region',
	558	+ 'role' => 'tabpanel',
600	559	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
601	560	] );
602	561
603	562	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
		@@ -615,9 +574,9 @@
615	574	<i class="elementor-accordion-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
616	575	<?php } ?>
617	576	</span>
618	577	<?php endif; ?>
619		- <a class="elementor-accordion-title" tabindex="0"><?php
	578	+ <a class="elementor-accordion-title" href=""><?php
620	579	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
621	580	?></a>
622	581	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
623	582	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
		@@ -659,9 +618,9 @@
659	618	* @access protected
660	619	*/
661	620	protected function content_template() {
662	621	?>
663		- <div class="elementor-accordion">
	622	+ <div class="elementor-accordion" role="tablist">
664	623	<#
665	624	if ( settings.tabs ) {
666	625	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
667	626	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
		@@ -677,9 +636,9 @@
677	636	'id': 'elementor-tab-title-' + tabindex + tabCount,
678	637	'class': [ 'elementor-tab-title' ],
679	638	'tabindex': tabindex + tabCount,
680	639	'data-tab': tabCount,
681		- 'role': 'button',
	640	+ 'role': 'tab',
682	641	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
683	642	'aria-expanded': 'false',
684	643	} );
685	644
		@@ -686,9 +645,9 @@
686	645	view.addRenderAttribute( tabContentKey, {
687	646	'id': 'elementor-tab-content-' + tabindex + tabCount,
688	647	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
689	648	'data-tab': tabCount,
690		- 'role': 'region',
	649	+ 'role': 'tabpanel',
691	650	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
692	651	} );
693	652
694	653	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
		@@ -707,9 +666,9 @@
707	666	<i class="elementor-accordion-icon-opened {{ settings.icon_active }}"></i>
708	667	<# } #>
709	668	</span>
710	669	<# } #>
711		- <a class="elementor-accordion-title" tabindex="0">{{{ item.tab_title }}}</a>
	670	+ <a class="elementor-accordion-title" href="">{{{ item.tab_title }}}</a>
712	671	</{{{ titleHTMLTag }}}>
713	672	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
714	673	</div>
715	674	<#