I need improve accessiblity (a11y) for Nav nestable menu.
Bricks automaticaly add LI with class .menu-item to direct first level descendants (to .brx-block).
This is not good for me, because I need create three columns.
It occurs because I have additionals blocks to create columns.
Is this possible to modify UL LI nesting Nav (nestable).
Now I have got 1 LI element with 3 links (A element) inside.
I don’t want create additional Block for every submenu item.
Bricks needs that DIV as space to put the dropdown. Without it, the items would just be stuck to the top level menu. Without dropping down.
Maybe use an interaction to show your own created menu in some container under the menu. Or a template.
“It occurs because I have additionals blocks to create columns.”
You should be able to space them so it fits.
Block = maximum size
Div = minimum size
Use “Rem” for width so you can literally count the letters, or make sure they are all locked in to total the 100% of the outer component size. Apply nowrap and maybe even overflow to force it to stay on 1 line.
Not quite sure what you try to achieve, but this is what i would try.
There is the problem with reading by screen reader.
Screen reader announcing: List with one element.
That because all three links are nested into one LI parent element.
I can wrap every link by Block element but this is very time-consuming job.
I’m looking for solution to change code structure.
Not sure how to do that.
Dit you try: aria-hidden=“true”
Suppose to be for screen readers to not announce its present
if not, select the div, go to style, all the way down to attributes. Add name: aria-hidden
add value: true
Solved.
Checked on NVDA screen reader, works fine.
First of all set role=none for every li.menu-item
Another approach is unwrap element.
document.addEventListener( 'DOMContentLoaded', function( event ) {
if ( document.querySelector( '.brx-nav-nested-items li.menu-item' ) !== null ) {
document.querySelectorAll( '.brx-nav-nested-items li.menu-item' ).forEach( item => {
item.setAttribute( 'role', 'none' );
// unwrap( item );
});
}
});
function unwrap(el) {
if (el && el.parentNode) {
// move all children out of the element
while (el.firstChild) {
el.parentNode.insertBefore(el.firstChild, el);
}
// remove the empty element
el.remove();
}
}
I don’t use UL tags.
Every element into structure set to DIV (except links):
Set role=listitem for every link into menu.
Set role=list for direct parent of the links.
Set role=none for every element which is used only to visual organise or layout construction.
