♿ 🐞 Accordion and Toggle have broken accessibility

[clmnsm]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest stable version of Elementor.

Description

Both toggle and accordion (non-container variant) use aria-attributes like -expanded and -controls, which is great.

Unfortunately, they also misuse tabindex which make those attributes invisible to users that rely on keyboard navigation.

Steps to reproduce

❌ Opened items have both the "elementor-tab-title" and the "elementor-accordion-title/elementor-toggle-title" at tabindex 0.
✔️ Only "elementor-tab-title" should be at tabindex 0, "elementor-accordion-title/elementor-toggle-title" should be at -1 because it doesn't provide meaningful aria info – it's just an empty link.

❌ Closed items have only "elementor-accordion-title/elementor-toggle-title" at tabindex 0. The "elementor-tab-title" is at -1 and therefore not focusable.
✔️ Instead, the "elementor-tab-title" should be at 0, because it provides meaningful information like aria-expanded="false".

In summary: only the element that has the aria-expanded and aria-controls attributes should have a tabindex of 0. The empty link inside this element should be at -1 (or should not be a link at all?)

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a Blank WordPress theme active (Hello theme).
• I can reproduce this bug consistently following the steps above.

System Info

Click to reveal

== Server Environment ==
	Operating System: Linux
	Software: Apache
	MySQL version: Ubuntu 20.04 v10.3.38
	PHP Version: 8.1.21
	PHP Memory Limit: 256M
	PHP Max Input Vars: 9999
	PHP Max Post Size: 12M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.2.2
	Site URL: 
	Home URL: 
	WP Multisite: No
	Max Upload Size: 8 MB
	Memory limit: 40M
	Max Memory limit: 256M
	Permalink Structure: Plain
	Language: de-DE
	Timezone: Europe/Berlin
	Admin Email: 
	Debug Mode: Inactive

== Theme ==
	Name: Hello Elementor
	Version: 2.7.1
	Author: Elementor Team
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: de_DE
	User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

== Active Plugins ==
	Elementor
		Version: 3.15.1
		Author: Elementor.com

	Elementor Pro
		Version: 3.15.0
		Author: Elementor.com


== Eigenschaften ==
	Custom Fonts: 0
	Custom Icons: 0

== Integrations ==
	


== Elementor-Experimente ==
	Optimierte DOM Ausgabe: Standardmäßig aktiviert
	Verbessertes Laden von Assets: Standardmäßig aktiviert
	Verbessertes Laden von CSS: Standardmäßig aktiviert
	Inline-Schriftarten-Symbole: Standardmäßig deaktiviert
	Zusätzliche benutzerdefinierte Breakpoints: Standardmäßig aktiviert
	admin_menu_rearrangement: Standardmäßig deaktiviert
	Flexbox Container: Aktiv
	Upgrade Swiper Library: Standardmäßig aktiviert
	Grid Container: Aktiv
	Default to New Theme Builder: Standardmäßig aktiviert
	Hello Theme Header & Footer: Standardmäßig aktiviert
	Editor Top Bar: Standardmäßig deaktiviert
	Startseiten: Standardmäßig aktiviert
	Nested Elements: Aktiv
	Hintergrundbilder nachladen: Standardmäßig deaktiviert
	Global Style Guide: Standardmäßig aktiviert
	Page Transitions: Standardmäßig aktiviert
	Notes: Standardmäßig aktiviert
	Loop: Standardmäßig aktiviert
	Form Submissions: Standardmäßig aktiviert
	Scroll Snap: Standardmäßig aktiviert
	Menü: Standardmäßig deaktiviert
	Taxonomy Filter: Standardmäßig deaktiviert


== Protokoll ==


== Elementor - Compatibility Tag ==
	
	Elementor Pro: Kompatibel

== Elementor Pro - Compatibility Tag ==

[nicholaszein]

Hi again, @clmnsm!

Thank you for submitting your issue! 🙏

Please allow us some time to investigate it, and get back to you with our findings. 🧐

Best regards

[hein-obox]

@nicholaszein Accessibility still needs to be implemented for the new widget.

[clmnsm]

The new nested accordion seems to be fine, actually. It's using html native summary/details which at least ChromeVox interprets correctly.

If only there was a conversion button...
Manual copying of accordions with dozens of entries is a real chore.

[renzat]

On my site the Elementor toggle module wouldn't open on windows without a WordPress admin bar at the top. Switching from Hello theme to GeneratePress theme fixed the issue.

Hello Theme / Elementor / Elementor Pro no WordPress admin bar (toggle does not open):

Hello Theme / Elementor / Elementor Pro WITH WordPress admin bar (toggle opens):

GeneratePress / Elementor Elementor Pro WITHOUT WordPress admin bar (toggle opens):