♿ Accessability: Use <details> for "Add menu items" accordion sections about classicpress-v2 HOT 4 CLOSED

Looking at @viktorix's example again, that's not actually using the details tag properly. It's actually still being operated via JavaScript whereas the details element works by pure HTML. You can tell because the left arrow doesn't change (as it should) while the right arrow does change (when it shouldn't be there at all).

I have now worked out how to do it right; now I have to remember how to make a PR!

from classicpress-v2.

I did a quick test. I swapped <ul> with <div>, <li> with <details>, and <h3> with <summary>. See below.

The main problem is that it uses a template, so changes to this accordion affect all other too.

EDIT: Further examination shows that do_accordion_sections is only used once for nav menus. So no issues elsewhere.

For reference:
https://nikitahl.com/native-html-accordion

from classicpress-v2.

This is a great idea. On my own sites, I make many custom menus and lists using the details and summary elements.

But, while I understand that this was just a quick trial, you can't implement the change like that. You need to keep the ul and li elements, and put the details and summary elements inside each li. Then you need to check what the relevant JavaScript is doing, and whether it should even be disabled somehow.

Or you could wrap all the details elements inside one overarching details element.

from classicpress-v2.

This would be a nice resource to check against for this: https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/

from classicpress-v2.