Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
We use a Term Reference Tree widget to display a field on our user registration/user edit forms. Accessibility is an important factor for our site, and the fact that the term reference tree can't be expanded with the keyboard was flagged as an issue.
I used an existing issue, Cannot expand tree using just a keyboard, as the basis for my solution but applied it to the 2.0.x version of the module.
Steps to reproduce
Set a field on a form display to Term reference tree. Use the following settings:
- Start minimized: True
- Leaves only: True
- Select parents automatically: False
- Cascading selection: None
- Maximum depth: 0
Proposed resolution
I'll attach a patch that'll do the following:
- Add a tabindex attribute to the checkbox-tree-item template so users can navigate to it with the keyboard.
- Bind the spacebar and Enter keys to the checkbox-tree-item div element to mimic the way you can check/uncheck checkboxes and radio buttons.
Remaining tasks
TBD
User interface changes
Add the ability to use the keyboard to navigate the term reference tree widget.
| Comment | File | Size | Author |
|---|---|---|---|
| #11 | 3436229-11.patch | 4.98 KB | paul121 |
| #4 | 3436229-4.patch | 1.1 KB | jsutta |
Issue fork term_reference_tree-3436229
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
jsutta commentedComment #3
jsutta commentedPatch attached.
I should specify that I'm not completely sure my approach is the right one. I'm absolutely open to any and all feedback, improvements, etc.
Comment #4
jsutta commentedNew version of the patch attached. This version corrects an issue where the behavior triggered twice when the spacebar was pressed, but only once when the enter or mouse buttons were pressed.
Comment #5
mradcliffeIt might also be helpful to add the "role" attribute as button since these are also essentially buttons.
This should probably be a merge request now so changing to Needs work.
I added #3305639: Screen Reader Accessibility as a related issue.
Comment #7
jsutta commented@mradcliffe I finally had a chance to circle back to this to open the merge request. I went ahead and added the role attribute as suggested too.
Comment #8
jsutta commentedComment #11
paul121 commentedWe are wanting this same functionality. But researching this some I learned that radio groups and tree views should use arrow keys for navigation, not tabs. Space/enter keys are still used for selecting items within the tree.
There are a few edge cases to consider in the arrow key logic (mostly when to open/close a group vs when to go up/down in the tree) but ultimately it wasn't too hard to implement in a fairly self-contained chunk of JS code.
Attached is a patch, identical to this MR.
Comment #12
mradcliffeI finally got around to testing merge request #43, which should be the correct approach, @paul121.
However using structured (caret) or non-structured browsing in Orca, I was unable to expand or collapse the tree using ArrowRight or ArrowLeft respectively.
When I used tab/arrow navigation in the list, Orca would announce the checkbox and allow me to check or uncheck the box. Pressing ArrowRight or ArrowLeft respectively would read the text/label letter by letter of the checkbox input element.
When I used structured (caret) browsing in the list, "L" (next item list) would select an expanded list and "I" (next list item) would announce the checkbox item, pressing ArrowRight or ArrowLeft would read the text/label letter by letter of the checkbox input element.
It is possible that this works in VoiceOver, JAWS or NVDA, but for me in linux, this does not work.
So I think this needs work. It may be necessary to expose the expand/collapse buttons to do expand/collapse in addition to ArrowLeft and ArrowRight events.