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

[3.3.x] Styles in Development • Re: [RC] Helion

$
0
0
The login drop menu is not keyboard-accessible. It's also still lacking keyboard access to things like "Display and sorting options" and the "Jump to" (not that I think anyone ever uses the jumpbox).

I have a bit of a thing about a11y. Some people have enough trouble using the web without us making it more difficult. And yes, I realise you were focusing on other things in this exercise, and some of the faults are default phpBB. It's nice work overall. A few touches for extra good practice would be useful though. Once you have them, you can use them in any style. :)

You could add tabindex="0" to the currently non-focusable dropdown-trigger spans. That's easy to do with minimal js and will make them focusable. The catch is that even though they are now all focusable, the default dropmenu code still doesn't allow opening them via keyboard if they are triggered by a span (even though it works if the trigger is an anchor). Fixing it for span triggers would require more js shenanigans, and frankly it's probably better to change them to anchors (they really should be buttons eveywhere, but that's even more work).

Code:

//This works for focus, but still does not allow default//.dropdown-trigger spans to open the menu via keyboard!//They still require an actual click to open the menu.const spanTriggers = document.querySelectorAll('span.dropdown-trigger');for (const spanTrigger of spanTriggers) {spanTrigger.setAttribute('tabindex', '0');}

And get rid of any positive values of tabindex that you run across (coz dat be teh evilz) which you could do a similar way. Just run document.querySelectorAll('thingies.wot.have.nasty.positive.tabindex') and thump the mongrels into submission. :twisted:

Code:

//This gets rid of all default phpBB positive tabindex values!const tabPositives = document.querySelectorAll("[tabindex]");for (const tabPositive of tabPositives) {if (tabPositive.tabIndex > 0) {tabPositive.setAttribute('tabindex', '0');}}
Running that one in overall_footer.html makes all the quick reply/posting editor/etc forms behave properly for keyboard access, without needing to hack the markup.

There are still a couple of template conditionals that might screw you up, but not many, and they aren't hard to find and kill...

Code:

<!-- IF CAPTCHA_TEMPLATE and S_CONFIRM_CODE --><!-- DEFINE $CAPTCHA_TAB_INDEX = 3 --><!-- INCLUDE {CAPTCHA_TEMPLATE} --><!-- ENDIF -->

Statistics: Posted by Gumboots — Sun Mar 23, 2025 11:59 pm



Viewing all articles
Browse latest Browse all 2558

Trending Articles