Quantcast
Channel: phpBB.com
Viewing all articles
Browse latest Browse all 2691

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

$
0
0
Using span for dropdown triggers isn’t ideal for accessibility since span elements aren’t focusable by default. It’s possible that the dropdown-trigger class was used inconsistently.
It was. I've checked. There are 12 instances of it in the 3.3.12 templates.

Code:

prosilver\template\display_options.html (2 hits)Line  1: <div class="dropdown-container dropdown-container-left dropdown-button-control sort-tools">prosilver\template\jumpbox.html (2 hits)Line 30: <div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-up<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">prosilver\template\memberlist_search.html (1 hit)Line 14: <!-- IF U_LIVE_SEARCH --><div class="dropdown-container dropdown-{S_CONTENT_FLOW_END}"><!-- ENDIF -->prosilver\template\navbar_header.html (3 hits)Line   6: <li id="quick-links" class="quick-links dropdown-container responsive-menu<!-- IF not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH --> hidden<!-- ENDIF -->" data-skip-responsive="true">Line 106: <div class="header-profile dropdown-container">Line 155: <li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">prosilver\template\pagination.html (1 hit)Line  3: <li class="dropdown-container dropdown-button-control dropdown-page-jump page-jump">prosilver\template\ucp_pm_message_header.html (1 hit)Line 33: <div class="dropdown-container dropdown-button-control topic-tools">prosilver\template\ucp_pm_viewmessage.html (1 hit)Line  59: <div class="dropdown-container dropdown-left">prosilver\template\viewtopic_body.html (3 hits)Line 181: <div class="dropdown-container dropdown-left">Line 427: <div class="quickmod dropdown-container dropdown-container-left dropdown-up dropdown-{S_CONTENT_FLOW_END} dropdown-button-control" id="quickmod">prosilver\template\viewtopic_topic_tools.html (1 hit)Line  2: <div class="dropdown-container dropdown-button-control topic-tools">
Out of those, display_options.html uses a span , and also duplicates the .dropdown-container class on the div. The duplicate class doesn't cause any issues in practice, but was obviously a mistake.

Edit: Just realised I wasn't looking closely enough, and the "duplicate" is actually .dropdown-container-left, so not a mistake. It's only used for setting a float though, and there are other classes that do that (.leftside and .dropdown-left) so there is still bloat in the CSS. And personally I'd be going with flex these days anyway, for the greater possibilities and the automatic RTL support, so I'd be deprecating the floats. Anyway...


The other thing is that in this instance .dropdown-container is a superfluous div inside the li, while some other instances have the .dropdown-container class on the parent li (which is all it needs to work). Really, the markup should be ul.whatever > li.dropdown-container > button.dropdown-trigger + div.dropdown in all cases.

jumpbox.html, ucp_pm_message_header.html, viewtopic_body.html, and viewtopic_topic_tools.html all use a span, and viewtopic_body.html has another case of the .dropdown-container class being duplicated on the same element.

The rest of the instances use anchors, except for memberlist_search.html, which is a really strange exception. And only three of the instances have the .dropdown-container on the li, where it should be. The rest of them have the superfluous div inside the li (God knows why, and if anyone suggests "making them consistent" by adding the superfluous div to all instances I will murder kittens).

It might be worth suggesting a change to ensure all dropdowns use anchors (<a>) or are made keyboard-accessible.
Buttons are better. Really. Anchors are for taking you somewhere else. Buttons do stuff on the same page. They are made for it. :)

Statistics: Posted by Gumboots — Sun Jul 21, 2024 9:34 pm



Viewing all articles
Browse latest Browse all 2691

Trending Articles