elementor / elementor/elementor

♿ Sticky Effect triggers a warning from Page Speed Insights about IDs not being unique when using the Menu Cart widget

Open
#25,572 4 comments 0 reactions 0 assignees View on GitHub
integration/woocommerce mod* product/pro type/accessibility type/performance type/seo widget/pro/wc/menu-cart widget/settings/pro/motion-effects/sticky
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 open and closed tickets and cannot find a duplicate.
- [ ] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

### Description

Hello, I'm writting because I see that Page Speed is giving me this error in the Cart Menu icon:

"[id] attributes on active, focusable elements are not unique
All focusable elements must have a unique id to ensure that they're visible to assistive technologies."

The id duplication happens only when the sticky mode for the header div is active. It seems that for some reason the id is duplicated because of the sticky thing.

https://pagespeed.web.dev/analysis/https-82fbfcc6f7-nxcli-io/1vhyarrcm6?form_factor=mobile

Thank you.

### Steps to reproduce

Check the Page Speed report
https://pagespeed.web.dev/analysis/https-82fbfcc6f7-nxcli-io/1vhyarrcm6?form_factor=mobile

### Expected behavior

Accesibility 100%

### Isolating the problem

- [ ] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
- [X] This bug happens with the Hello Elementor theme active.
- [X] I can reproduce this bug consistently by following the steps I described above.

### Elementor System Info

Click to reveal

````txt

== Server Environment ==
Operating System: Linux
Software: Apache
MySQL version: MariaDB Server v10.5.23
PHP Version: 8.1.27
PHP Memory Limit: 2048M
PHP Max Input Vars: 16384
PHP Max Post Size: 1536M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 6.4.3
Site URL: https://82fbfcc6f7.nxcli.io
Home URL: https://82fbfcc6f7.nxcli.io
WP Multisite: No
Max Upload Size: 2 GB
Memory limit: 40M
Max Memory limit: 2048M
Permalink Structure: /%postname%/
Language: en_US
Timezone: 0

Debug Mode: Inactive

== Theme ==
Name: Hello Elementor Child
Version: 1.0.0
Author: Elementor Team
Child Theme: Yes
Parent Theme Name: Hello Elementor
Parent Theme Version: 3.0.1
Parent Theme Author: Elementor Team

== Active Plugins ==
Advanced Custom Fields
Version: 6.2.7
Author: WP Engine

Elementor
Version: 3.20.3
Author: Elementor.com

Elementor Pro
Version: 3.20.2
Author: Elementor.com

Product Gallery Slider for WooCommerce PRO
Version: 3.4
Author: Codeixer

WooCommerce
Version: 8.7.0
Author: Automattic

== Must-Use Plugins ==
Nexcess Managed Apps
Version: 1.48.2
Author: Nexcess

== Elements Usage ==

archive : 1
archive-posts : 1
container : 2
heading : 1
footer : 1
button : 1
container : 9
divider : 1
form : 1
heading : 9
image : 2
nav-menu : 2
social-icons : 1
text-editor : 3
header : 1
container : 3
icon : 1
nav-menu : 1
spacer : 1
theme-site-logo : 1
woocommerce-menu-cart : 1
page : 1
container : 1
heading : 1
text-editor : 1
popup : 4
container : 4
form : 1
heading : 2
html : 1
icon : 2
nav-menu : 1
social-icons : 1
text-editor : 1
product : 1
button : 1
container : 8
icon-list : 1
nested-accordion : 1
post-navigation : 1
text-editor : 3
woocommerce-breadcrumb : 2
woocommerce-product-add-to-cart : 1
woocommerce-product-content : 1
woocommerce-product-images : 1
woocommerce-product-price : 1
woocommerce-product-short-description : 1
woocommerce-product-title : 2
wp-page : 6
button : 3
container : 48
divider : 11
form : 1
heading : 33
icon-box : 16
icon-list : 1
image : 23
image-box : 1
loop-grid : 4
nested-carousel : 1
nested-tabs : 1
social-icons : 1
text-editor : 15
woocommerce-cart : 1
single-post : 1
container : 5
heading : 2
post-info : 1
post-navigation : 1
posts : 1
share-buttons : 1
theme-post-content : 1
theme-post-excerpt : 1
theme-post-title : 1
single-page : 1
container : 1
theme-post-content : 1
theme-post-title : 1
product-archive : 3
container : 1
heading : 1
image : 1
loop-grid : 1
loop-item : 3
container : 5
text-editor : 1
theme-post-featured-image : 3
theme-post-title : 3
woocommerce-product-price : 2
error-404 : 1
button : 1
container : 1
heading : 1
text-editor : 1

== Settings ==

cpt_support: post, page
disable_color_schemes: yes
disable_typography_schemes: yes
allow_tracking: yes
css_print_method: internal
editor_break_lines: 1
unfiltered_files_upload: 1
font_display: swap
meta_generator_tag: 1

== Features ==
Custom Fonts: 1
Custom Icons: 0

== Integrations ==

woocommerce: Active

== Elementor Experiments ==
Improved Asset Loading: Active
Improved CSS Loading: Active
Inline Font Icons: Inactive
Additional Custom Breakpoints: Active by default
admin_menu_rearrangement: Inactive by default
Flexbox Container: Active
Upgrade Swiper Library: Active
Grid Container: Active
Default to New Theme Builder: Active
Hello Theme Header & Footer: Inactive
Editor Top Bar: Inactive by default
Optimized Gutenberg Loading: Active
Build with AI: Active by default
Landing Pages: Active by default
Nested Elements: Active
Lazy Load Background Images: Inactive by default
Optimize Image Loading: Inactive
Notes: Inactive
Display Conditions: Inactive by default
Form Submissions: Active by default
Menu: Active
Taxonomy Filter: Inactive by default

````

### Agreement

- [X] I agree that my issue may be closed without action if it doesn't meet all the requirements.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.