duplicate id-attributes in the mobile menu

Hi,

We observed duplicate id-attributes in the mobile menu (hamburger-menu), similar to what is described in

This came up when trying to check and optimize website-compatiblity for screenreaders. Nodes of the main menu are copied over to the hamburger-menu. svg-icons (for the search) contain id-attributes which simply get duplicated – but obviously need to be transformed to become unique again.

A modification of this copy-behaviour would for example be possible in
wp-content/themes/enfold/js/avia-snippet-hamburger-menu.js
in function normalize_layout().

Quick-and-dirty code for those replacements:
There was:
var menu2 = $(‘#header .main_menu’).clone(true),
ul = menu2.find(‘ul.av-main-nav’),
id = ul.attr(‘id’);

We then added lines to search for the corresponding nodes in the HTML with jQuery and make replacements for all hits. ‘-hamburger’ is appended to the IDs.

var toChange;
toChange = menu2.find(‘[id^=av-svg-desc-‘);
toChange.each(function() {
$(this).attr(‘id’, $(this).attr(‘id’) + ‘-hamburger’);
});
toChange = menu2.find(‘[id^=av-svg-title-‘);
toChange.each(function() {
$(this).attr(‘id’, $(this).attr(‘id’) + ‘-hamburger’);
});
toChange = menu2.find(‘[aria-labelledby^=av-svg-title-‘);
toChange.each(function() {
$(this).attr(‘aria-labelledby’, $(this).attr(‘aria-labelledby’) + ‘-hamburger’);
});
toChange = menu2.find(‘[aria-describedby^=av-svg-desc-‘);
toChange.each(function() {
$(this).attr(‘aria-describedby’, $(this).attr(‘aria-describedby’) + ‘-hamburger’);
});

It’s quite an edge case, but could potentially irritate a screen reader.