elementor / elementor/elementor
[Accessibility bug] Keyboard navigation skips dropdown menu if the menu item has an empty URL
- Dominant language
- PHP
- Stars
- 7.1k
- Forks
- 1.6k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 193
Description
## Prerequisites
- [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [x] The issue still exists against the latest stable version of Elementor.
## Description
When using keyboard navigation with the tab key, (at least) custom link top-level menu items with dropdown are skipped if their URL field is empty, making the dropdown items completely inaccessible.
[VIDEO DEMO](https://i.gyazo.com/caa4b08a6e08bc89a2116dc2786b49f7.mp4)
## Steps to reproduce
1. Create an elementor menu with a dropdown; dropdown item must be a custom link with an empty URL field, like in [this screenshot](https://i.gyazo.com/9f28234cfe20369f8171c40ff3a21666.png).
2. Add a simple control menu item for testing, save the menu.
3. Add the menu to your test site with an Elementor menu widget.
4. Test the keyboard navigation with the tab key. If the bug persist, the dropdown menu items should be entirely skipped.
## Isolating the problem
- [x] This bug happens with only Elementor plugin active (and Elementor Pro).
- [x] This bug happens with a default WordPress theme active.
- [x] I can reproduce this bug consistently using the steps above.
## Potential solution
Add an empty `href` to dropdown menu items with empty URL field seems to solve the issue. As it is, such menu items do not have a `href` attribute, as shown in [this screenshot](https://i.gyazo.com/86a6d7005d6cfcfa6da4d3a8331d59b1.png).
## Environment
System Info
== Server Environment ==
Operating System: Linux
Software: LiteSpeed
MySQL version: MariaDB Server v10.3.29
PHP Version: 8.0.7
PHP Max Input Vars: 10000
PHP Max Post Size: 512M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected
== WordPress Environment ==
Version: 5.8.1
Site URL: https://barbandcarole.ca
Home URL: https://barbandcarole.ca
WP Multisite: No
Max Upload Size: 512 MB
Memory limit: 512M
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Language: en-CA
Timezone: America/Toronto
Debug Mode: Inactive
== Theme ==
Name: Hello Elementor Child
Version: 1.0.1
Author: Elementor Team
Child Theme: Yes
Parent Theme Name: Hello Elementor
Parent Theme Version: 2.4.1
Parent Theme Author: Elementor Team
== User ==
Role: administrator
WP Profile lang: en_CA
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
== Active Plugins ==
Advanced Custom Fields PRO
Version: 5.10.2
Author: Delicious Brains
Advanced Database Cleaner
Version: 3.0.3
Author: Younes JFR.
Asset CleanUp: Page Speed Booster
Version: 1.3.8.3
Author: Gabe Livan
Broken Link Checker
Version: 1.11.15
Author: WPMU DEV
Classic Editor
Version: 1.6.2
Author: WordPress Contributors
Custom Post Type UI
Version: 1.9.2
Author: WebDevStudios
Duplicator Pro
Version: 4.0.4.1
Author: Snap Creek
Elementor
Version: 3.4.4
Author: Elementor.com
Elementor Pro
Version: 3.4.1
Author: Elementor.com
Enable Media Replace
Version: 3.5.0
Author: ShortPixel
Export Media Library
Version: 3.0.1
Author: Mass Edge Inc.
Image optimization service by Optimole
Version: 3.1.3
Author: Optimole
Lightweight Subscribe To Comments
Version: 1.5.8
Author: Isabel Castillo
LiteSpeed Cache
Version: 4.4.1
Author: LiteSpeed Technologies
Phoenix Media Rename
Version: 3.4.2
Author: crossi72
Post Views Counter
Version: 1.3.6
Author: Digital Factory
Simple Custom Post Order
Version: 2.5.6
Author: Colorlib
Site Kit by Google
Version: 1.41.0
Author: Google
SVG Support
Version: 2.3.19
Author: Benbodhi
The SEO Framework
Version: 4.1.5.1
Author: The SEO Framework Team
Wordfence Security
Version: 7.5.5
Author: Wordfence
WordPress Popular Posts
Version: 5.4.2
Author: Hector Cabrera
WP-Sweep
Version: 1.1.5
Author: Lester 'GaMerZ' Chan
Yoast Duplicate Post
Version: 4.1.2
Author: Enrico Battocchi & Team Yoast
== Elementor - Compatibility Tag ==
Elementor Pro: Compatible
== Elementor Pro - Compatibility Tag ==
== Elements Usage ==
archive : 3
button : 5
form : 1
heading : 7
html : 10
image : 3
shortcode : 5
spacer : 1
text-editor : 5
theme-archive-title : 1
footer : 1
form : 1
heading : 7
image : 4
shortcode : 4
social-icons : 1
text-editor : 6
header : 2
nav-menu : 1
social-icons : 1
theme-site-logo : 1
section : 4
button : 4
heading : 4
html : 6
image : 2
text-editor : 4
widget : 0
html : 2
image-carousel : 1
shortcode : 1
social-icons : 1
wp-post : 4
image : 17
text-editor : 23
wp-page : 6
button : 26
counter : 2
divider : 2
form : 2
global : 1
heading : 49
html : 66
image : 18
media-carousel : 1
shortcode : 17
social-icons : 2
spacer : 10
text-editor : 35
single-post : 2
button : 2
form : 1
heading : 9
html : 9
post-comments : 1
post-navigation : 1
shortcode : 20
text-editor : 1
theme-post-content : 1
theme-post-featured-image : 1
video : 1
error-404 : 1
button : 1
heading : 2
== Log ==
Log: showing 20 of 432021-08-17 13:45:12 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.3.1',
'to' => '3.4.0',
)]
2021-08-20 17:54:26 [info] elementor::elementor_updater Started
2021-08-20 17:54:26 [info] Elementor/Upgrades - _on_each_version Start
2021-08-20 17:54:27 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.4.0',
'to' => '3.4.2',
)]
2021-08-20 17:54:27 [info] Elementor/Upgrades - _on_each_version Finished
2021-08-20 17:54:27 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.4.0',
'to' => '3.4.2',
)]
2021-08-25 04:54:12 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.3.7',
'to' => '3.3.8',
)]
2021-08-31 04:55:28 [info] elementor::elementor_updater Started
2021-08-31 04:55:28 [info] Elementor/Upgrades - _on_each_version Start
2021-08-31 04:55:29 [info] Elementor/Upgrades - _on_each_version Finished
2021-08-31 04:55:29 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.4.2',
'to' => '3.4.3',
)]
2021-08-31 04:55:29 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.4.2',
'to' => '3.4.3',
)]
2021-08-31 04:57:41 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.3.8',
'to' => '3.4.0',
)]
2021-09-03 12:58:53 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.4.0',
'to' => '3.4.1',
)]
2021-09-09 17:56:12 [error] Save submission failed, db error: Table 'emrfro02_main.bcr_e_submissions' doesn't exist
2021-09-14 09:25:39 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.4.3',
'to' => '3.4.4',
)]
2021-09-14 09:25:39 [info] elementor::elementor_updater Started
2021-09-14 09:25:39 [info] Elementor/Upgrades - _on_each_version Start
2021-09-14 09:25:40 [info] Elementor/Upgrades - _on_each_version Finished
2021-09-14 09:25:40 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.4.3',
'to' => '3.4.4',
)]
Contributor guide
Research direction
No source file or test is named in the issue. Start by reproducing the keyboard-navigation failure in the Elementor menu widget with a dropdown item whose custom-link URL is empty; done means Tab navigation reaches the dropdown items instead of skipping them.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- php, wordpress
- Domain
- accessibility, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100