I get the following when closing the sidebar if a dropdown is open..

I can confirm @ciar4n findings. As soon as you expand a sidebar menu icon it breaks

I have tested this item ? unsuccessfully on 81de1ab

Thank you for the findings, I will work on it.

I will work on it.

Not easy... the sidebar CSS is a cascade minefield

Interesting approach to the problem with gmail

Interesting approach to the problem with gmail

We tried something like that before.... joomla/40-backend-template#321. I dont know why it was changed.

I think thats going to be the only option

@wilsonge @coolcat-creations Will I re-implement joomla/40-backend-template#321 ??

This would remove the toggle item.

I am not sure, there is a problem in both possibilities. What to do with the opened menus?

What to do with the opened menus?

My guess would be the menu would always remain closed unless hovered/focused

For me personally thats not an option I am using the mouse very often and fast, when I have to navigate into the deeper menu everytime from new that would drive me crazy in my daily workflow. We need maybe more opinions here.

My apologies... i wasn't thinking straight. The toggle button can remain.

Ok, would be great if you could implement that behaviour again then :-)

@ciar4n if you're about to restore that PR can you also remove this metis.js (or whatever the name is)?

@dgrammatiko That is the accordion script right?

Metismenu .. whatever it is good for. I think @brianteeman knows what it is.

@dgrammatiko That is the accordion script right?

@ciar4n don't ask me you've pulled it in ?

Yea so it was... added here... #22587

It is not as simple as just removing it. It will have to be replaced with something.

1. Bootstrap collapse (difficult to get working with all the nuances of the menu).
2. Write our own JS script (not in my skillset - @dgrammatiko you are welcome to try ? )
3. CSS only solution. Means rewriting this again (for the 10th time). Won't be animated. Questionable if a11y.

What is the reason for removing it. Seems like a pointless task to me that just halts progress

@ciar4n you need JS if only for the accessibility part

Seems like a pointless task to me that just halts progress

The original PR joomla/40-backend-template#321 also didn't had metismenu...

At the time of that PR the menu used boostrap collapse. As far as i remember it wasn't bug-free nor a11y compliant?

I get flak for adding metismenu but it was the only working solution I could implement. Someone proficient in JS is more than welcome to replace it with something else.

metismenu is fine. it solves all our accessibility requirements. The commit came from the template v2 work wilsonge@6838f48 .

@brianteeman is the google solution a11y compliant to the best of your knowledge? I guess specifically are the hover effects are going to be compliant with keyboard support?

it solves all our accessibility requirements

You must be joking right? None of the arrow keys are working with the menu atm, so quite honestly it's not even close...

Just for ref: https://stackoverflow.com/a/26300120/2302165

And they should not work. What you are referring to is a menu like ms word. This is a navigation which is a collection of links. All the major people in the accessibility world agree that the "draft authoring practice example" which everyone refers to is just plain wrong.

See https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html

..., please understand that the WAI-ARIA Authoring Practices is a note, not a specification. It is not a standard. It is the output of an opinionated set of editors

Also see this twitter thread just last week
https://twitter.com/brucel/status/1255858468671684613

, bottom line is: navigation menus are for links, and menuitems aren't links.

Is this an option? https://adobe-accessibility.github.io/Accessible-Mega-Menu/

@brianteeman what you did was to take the recommendations for a simple menu (eg one level, few items) and applied to this mega menu. I'm sorry you're wrong, tabbing is OK only for small menus: https://webaim.org/techniques/keyboard/

@coolcat-creations please read the blog post and you will see the answer.

@dgrammatiko no I listened to the leading accessibility experts and took their advice.

@brianteeman I'm not saying to use the menu I'm just stating that is expected for big menus the arrow keys to work...

Again. You are just wrong.

@coolcat-creations thats a jQuery plugin menu - i'd rather stick with the one we have which doesn't have the jQuery dependency. This menu is just fine

@brianteeman from your perspective is the google solution is a11y from a keyboard support perspective? If so then sure we can drop the toggle button. I assumed it was required for keyboard support

@wilsonge I cant tell just from an image of @ciar4n proposal

Alternative two line solution to fix the reported issue at #29035

@coolcat-creations I can see where the problem is with your solution. Before this PR when the sidebar is closed it is always collapsed but for some reason with this pr the menu isnt collapsing resulting in the issue @ciar4n reported.

@brianteeman @ciar4n I fixed the issue with the open items, personally I think designwise it's more harmonic to have the smaller labels. They are just a reminder what the icons mean... everyone else can use the expanded menu.

Definitely agree that the current labels are way too big ;)
Would be interesting to hear from the accessibility team if there are any issues with the label "floating" visually separated from the icon. Otherwise sounds good to me.

This is hardly readable here:

I have tested this item ✅ successfully on 3a9392d

I am marking this a successful although personally I think the font is too small I am not a designer

Looks fine now

Thank you all!

I have tested this item ✅ successfully on a28cc04

rtc

Maybe make the background dark blue since it is not readable in this case.

Back to pending until new tests and reply to suggestion.

Removed the opacity reduction, I thought it would be nice to see a bit through but I can understand if someone has issues reading it. Please retest... @Quy @infograf768 @brianteeman please retest.

I have tested this item ✅ successfully on 710edc7

I have tested this item ✅ successfully on 710edc7

I have tested this item ✅ successfully on 710edc7

RTC

Thanks!