phpBB Discussion • Re: .dropdown-trigger class and keyboard navigation

Bumping this, because I'm currently updating some templates anyway and there's a better way of doing it. Namely, buttons instead of anchors (or spans).

Advantages are:

1. Better semantics.
2. No need for role="button" (which the phpBB anchors and spans don't have, even though they really should).
3. No need for a href, which further simplifies markup (and also means no page jumping if anyone accidentally clicks when js is disabled).
4. Mouse activation will work exactly the same way with or without javascript.
5. Full keyboard accessibility, without javascript being required.
6. Automatic click outside to close, without javascript being required.
7. Automatic closing when you tab out of the drop menu (if using keyboard nav).

The trick is to swap the current no-js fallback from .dropdown-container: hover; to .dropdown-container: focus-within;

This is also used with js. IOW, one bit of CSS does the lot. This trick could not be used with ancient browsers, but has had full support for some time (except IE, but IE can have hover fallback). It works brilliantly. It can still be improved slightly when js is available*, but doesn't need it to give full functionality for everyone.

*The improvements are obviously:

1. to keep drop menu content hidden unless the button is actually selected by click/tap/Enter and
2. to alter the button behaviour to also allow closing the drop menu by by click/tap/Enter (which is not possible without js).

This probably won't get into phpBB 3.3.x at this stage, but IMO should be the preferred way of doing it for any future versions. I'd also suggest that anyone who is customising templates use this method. It really is a lot better, and very simple to implement.

Statistics: Posted by Gumboots — Sun Jul 21, 2024 12:25 am

---