Menu is not accessible

[GerneSoWas]

Ich bin mit dem Theme Simple am Testen. Nun habe ich bemerkt, dass das Menu nicht barrierefrei ist. Normalerweise sollte ein Untermenu mit der Enter-Taste aufklappen, was es aber hier nicht macht.

Kann ich das als Laie einfach ändern? Habe ich vielleicht etwas falsch eingestellt?

---

I am testing the Simple theme. I have noticed that the menu is not accessible. Normally, a submenu should open with the Enter key, but this is not the case here.

Can I easily change this as a layperson? Have I perhaps configured something incorrectly?

[michaelfluegge]

maybe @candidexmedia can help you out. It is a HTML/CSS thing, I guess.

[GerneSoWas]

Hello Michael, Thank you for your tip. I have now contacted @candidexmedia@mastodon.design via Mastodon and am confident that they will be able to help me.

[candidexmedia]

Hi! I'll answer here so that the information is indexable and searchable. I've tested it on Publii's demo site for Simple, and can confirm the issue. Unfortunately, I think the @GetPublii theme developers would be better suited to answer that question and resolve the issue in the theme files.

After inspecting the page, my initial hunch is that the aria-hidden="true" might be causing the issue:

MDN Docs warns:

Warning: Do not use aria-hidden="true" on focusable elements.

You'll notice that whatever JS is powering the submenu swaps between aria-hidden="true" and aria-hidden="false" when the parent menu item is hovered on:

I'm not sure if removing that will help. Perhaps aria-expanded should be used instead?

There's also a really interesting article by W3 on fly-out submenus and accessibility: https://www.w3.org/WAI/tutorials/menus/flyout/#keyboard-users
It gives some pretty good steps and JS code snippets, but implementing this in Publii, though likely possible, is beyond my own expertise. It would be something that the Publii theme devs would be in a better position to implement. That said, if you know your way around theme development, you could take a stab at fixing it as well.

I also found some interesting solutions on StackOverflow: https://stackoverflow.com/questions/73096654/making-my-submenu-visible-while-the-parent-is-focused-using-tab

[GerneSoWas]

Thank you for your reply @candidexmedia

[GerneSoWas]

I know a bit about CSS, but I'm afraid I don't know anything about theme development. Unfortunately.
Unfortunately, my old site will have to continue running until the error in the theme or Publii is resolved.

[GerneSoWas]

Unfortunately, even after updating to the latest version, Simple_3.2.2.0, nothing has changed. This means that I will not be continuing to test Publii. A functioning, accessible menu is essential.
I think that's a shame, because otherwise I have a very good impression of Publii.

[candidexmedia]

@dziudek @GetPublii Any insights on this?

[bobmitro]

Hey,
@candidexmedia
The button element with aria-hidden is intentional and correct in this case. It is used purely as a toggle for the mobile menu. Its behavior is limited to the mobile navigation.

@GerneSoWas
The separator is implemented as text rather than a button, but it currently triggers the submenu. Because it is not an interactive element, it is not focusable via the Tab key. In this situation, that is indeed a flaw - since it triggers a submenu, it should be keyboard accessible and properly focusable.

I will implement a fix, but it will be included in a future theme release. Unfortunately, this requires both JavaScript and CSS adjustments, which means all themes need to be updated consistently. It is not critical enough to justify an immediate rollout of updates across all themes. The fix will most likely be included within the next 1-2 months.

[bobmitro]

I've just released version 3.3.0.0, which fixes keyboard navigation.

[candidexmedia]

Yay, thank you @bobmitro !! 🥳