Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.In an accessibility review of a site with a Radix-based theme, the accessibility team identified issues with the Javascript in Radix to make dropdowns clickable: if you press the up or down arrows while the parent of a dropdown is focused, it'll visit the link.
The problematic code is in assets/javascript/radix-script.js:
// Allow main menu dropdown-toggle to be clickable.
$('#main-menu .dropdown > a.dropdown-toggle').once('radix-dropdown', function(){
$(this).click(function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
});
});
This code is attempting to address the fact that by default Boostrap will make it so that clicking links with dropdowns will open the dropdown, but NOT visit the link, making it impossible to visit the link.
That problem needs a solution, but the current approach is causing issues because Bootstrap is catching key presses and then turning them into 'click' events, so there is no way (that I can think of at least) to tell when the user is really clicking or if it's Bootstrap turning a down arrow into a click...
I'll think on this and try to get some input from others including the accessibility team who did this review.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | radix-dropdown-a11y-2500635-8.patch | 4.27 KB | dsnopek |
Comments
Comment #1
dsnopekAlright! So, here is the desired behavior that we came up with:
This should allow basically the same solution that Radix is including for the "clicking parent menu links" problem, but for keyboard users too.
And attached is my first attempt at a patch for this. It works for vanilla Radix but it has a bad interaction with the Bootstrap Accessibility plugin, which is needed for fixing other accessibility issues. :-/ So, this still needs some work!
Comment #2
dsnopekHere's a new version that fixes an issue in the last patch, but still doesn't fix the issue mentioned in #1 with the Bootstrap Accessibility plugin.
Comment #3
dsnopekHere's a cleaner version of this patch which doesn't actually monkey patching Bootstrap! It still conflicts with the accessibility plugin like mentioned in #1, but it does what it does in a better way.
Comment #4
dsnopekOops! Did a bad job rolling the patch and I missed a commit in my local git repo. This just simplies a bit of code and it's comment.
Comment #5
dsnopekHere is another new version of this, which fixes a bug that prevented dropdowns from closing when you tab to another top-level menu item that doesn't have a dropdown.
I'm starting to become convinced that we won't be able to reconcile with the Bootstrap Accessibility plugin, at least for it's dropdown related code. (However, I've got an idea for another approach to this problem that I'll get to trying eventually - for now, I just wanna fix the bugs in this approach.)
Comment #6
dsnopekHere's a new version of this patch which puts .radix.dropdown tags on all the events that we're subscribing to, which makes it possible to refer to them or unsubscribe in the child theme. It also makes sure that all the events are on the same DOM node, so that you can deal with them all at once if you want.
Comment #7
dsnopekA new version of this patch! Apparently, Firefox doesn't correctly implement
relatedTargeton focus events. Also, I made a type-o on one of the event tags in the last patch.Comment #8
dsnopekThe browser compatibility issues never end! This patch attempts to fix a non-deterministic issue under Safari. It'll need some more extensive testing before I can say if it really fixes the problem or not.
Comment #9
dsnopekThis has been in use on a client site with really stringent accessibility requirements for a couple months now! While this still isn't ideal code-wise, it's definitely battle-tested. :-) So, merging!