✅ 🐞 Bug Report: Invalid attributes on nav menu widgets, HTML validation fails

[tomas-eklund]

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

The Elementor nav menu adds attributes that will generate warnings and errors when validating the HTML with validator.w3.org.

This seems to be the offending code in elementor-pro/modules/nav-menu/widgets/nav-menu.php, line 1274-1279:

$this->add_render_attribute( 'main-menu', [
    'migration_allowed' => Icons_Manager::is_migration_allowed() ? '1' : '0',
    'migrated' => $is_migrated ? '1' : '0',
    // Accessibility
    'role' => 'navigation',
] );

The errors and warnings from the Nu HTML Checker are:

Error: Attribute migration_allowed not allowed on element navat this point. Error: Attribute migrated not allowed on element navat this point. Warning: The navigation role is unnecessary for element nav.

It seems that the migration-related attributes has something to do with the transition från Font Awesome 4 to Font Awesome 5. But don't see why the attributes are sent to the user. Shouldn't these be internal-only?

If you really need these attributes in the HTML, for whatever reason, why not put them in HTML5 data attributes instead so that the code validates?

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.

[tomas-eklund]

Additionally: I can't seem to find any hooks in the nav menu render method for us to filter the output.

[rami-elementor]

Let me summarize your solution:

1. rename the migration_allowed attribute to data-migration_allowed
2. rename the migrated attribute to data-migrated
3. remove the role attribute

[rami-elementor]

Seems like the role attribute have been removed in previous versions.

[rami-elementor]

[nicholaszein]

Hello @tomas-eklund!

We have great news! 🙌

📢 We're happy to announce that the issue you raised was resolved in Elementor Pro v3.11! 🥳

✔️ Please feel free to check it out and update your plugin to the new version!

Cheers 🥂