On Linkit field profiles, keyboard focus is lost after you click the Insert link button in the modal. This is an accessibility issue for users who use Drupal from a screenreader, keyboard or other accessibility device that emulates the keyboard.
Modules/versions used:
- Drupal core 7.50
- Linkit 7.x-3.5+10-dev
- Link 7.x-1.4
- Entity API 7.x-1.8
- CTools 7.x-1.10
To reproduce:
- Do a clean install of Drupal 7.50.
- Download and install the latest dev version of Linkit.
- Download and install the latest stable version of the Link module and its dependencies (Entity API and CTools).
- Log in as an administrator.
- At admin/config/content/linkit, click Add new profile.
- Give the new profile an admin title of Link fields.
- Under Profile type, select Fields.
- Under Search plugins, select Node.
- Under Insert methods, select Raw URL for the Insert plugin, and Raw paths for Insert paths as.
- Leave other settings at the defaults.
- Save the profile.
- Add a Link field to the Article content type.
- On the Link field settings for the current content type, check the box to Enable Linkit for this field and select the Link fields profile. Leave other settings at the defaults.
- Save the field settings.
- Create and save a Basic page node with the title Linkit target.
- Create an Article node with the title Testing linkit.
- Using the Tab key, navigate to the Search button attached to the Link field.
- Press Enter to activate the Linkit modal.
- Start typing "target" into the search field.
- When the autosuggest returns the Basic page with that title, press Tab.
- Keyboard focus is now on the Insert link button. Press Enter to activate the button.
- After the Linkit modal closes, press Tab.
- Note you are now focused at the top of the page. If using the Seven admin theme, you'll be on the Skip to main content link.
- Press Enter to activate the Skip... link.
- Note you are now focused at the top of the edit form.
- Tab forward to the Link field.
Regardless of whether you tab forward or backward after the Linkit modal closes, you have to tab a bunch of times in order to get back to where you were to continue configuring the node. It would be better if the Linkit modal would return focus to the field from which it was activated after the modal closed.
Comment | File | Size | Author |
---|---|---|---|
#6 | interdiff-5-6.txt | 347 bytes | cboyden |
#6 | linkit-modal-focus-2811421-6.patch | 1.18 KB | cboyden |
Comments
Comment #2
dsnopekUpdated IS to make it very explicit that this is an accessibility issue :-)
Comment #3
cboyden CreditAttribution: cboyden commentedI've attached a patch that adds an ID to the link/button that's added when Linkit is enabled for a field, then uses that ID to set focus when the dialog closes.
Comment #4
dsnopekThe patch works in my testing! However, I have some code review:
Explicitly supporting fields in linkit.js is not ideal.
Currently, field support is all abstracted away into linkit.field.js. It would be better to allow linkit.field.js to somehow affect the operation of modal, rather than have the modal know how linkit.field.js works. (Another way of thinking of this is that linkit.fields.js depends on linkit.js, whereas this code makes that into a circular dependency where they depend on each other.)
Maybe dialog helpers (like in linkit.field.js) could provide an 'onClose()' method which gets called? Or maybe Drupal.linkit.createModal() could take the 'activatingElement' as an argument that is focused on when the modal is closed?
linkit.field.js is currently referring to the button via the class "linkit-field-{$js_settings['source']}". It's weird to have this new code use this new ID, whereas the old code is using the class.
I think this patch should either use the class (like the existing code) or update the old code to use the ID too, so that we're not referring to the button in two different ways.
Comment #5
dsnopekHere's a new patch that implements my suggestions from #4. Please let me know what you think!
Comment #6
cboyden CreditAttribution: cboyden commentedLooks great, thanks @dsnopek. I took the liberty of removing some debug code, see attached interdiff and updated patch.
Comment #7
dsnopekWhoops! Thanks for catching that :-)
Comment #9
anonThanks for patches.