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:

  1. Do a clean install of Drupal 7.50.
  2. Download and install the latest dev version of Linkit.
  3. Download and install the latest stable version of the Link module and its dependencies (Entity API and CTools).
  4. Log in as an administrator.
  5. At admin/config/content/linkit, click Add new profile.
  6. Give the new profile an admin title of Link fields.
  7. Under Profile type, select Fields.
  8. Under Search plugins, select Node.
  9. Under Insert methods, select Raw URL for the Insert plugin, and Raw paths for Insert paths as.
  10. Leave other settings at the defaults.
  11. Save the profile.
  12. Add a Link field to the Article content type.
  13. 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.
  14. Save the field settings.
  15. Create and save a Basic page node with the title Linkit target.
  16. Create an Article node with the title Testing linkit.
  17. Using the Tab key, navigate to the Search button attached to the Link field.
  18. Press Enter to activate the Linkit modal.
  19. Start typing "target" into the search field.
  20. When the autosuggest returns the Basic page with that title, press Tab.
  21. Keyboard focus is now on the Insert link button. Press Enter to activate the button.
  22. After the Linkit modal closes, press Tab.
  23. 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.
  24. Press Enter to activate the Skip... link.
  25. Note you are now focused at the top of the edit form.
  26. 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.

CommentFileSizeAuthor
#6 interdiff-5-6.txt347 bytescboyden
#6 linkit-modal-focus-2811421-6.patch1.18 KBcboyden
#5 linkit-modal-focus-2811421-5.patch1.21 KBdsnopek
#3 linkit-modal-focus-2811421-3.patch1.68 KBcboyden

Comments

cboyden created an issue. See original summary.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Title: Keyboard focus is lost when Linkit modal closes » Keyboard focus is lost when Linkit modal closes (accessibility issue)
Issue summary: View changes

Updated IS to make it very explicit that this is an accessibility issue :-)

cboyden’s picture

cboyden commented
Status: Active » Needs review
StatusFileSize
new linkit-modal-focus-2811421-3.patch1.68 KB

I'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.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented

The patch works in my testing! However, I have some code review:

  1. +++ b/js/linkit.js
@@ -80,6 +80,13 @@ Drupal.linkit.modalOptions = function() {
+
+  // If the modal was opened from a field, set browser focus to the button that
+  // triggered the modal.
+  if (Drupal.settings.linkit.currentInstance.fieldButton) {
+    $('#' + Drupal.settings.linkit.currentInstance.fieldButton).focus();
+  }

    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? 

  2. +++ b/linkit.field.inc
@@ -256,7 +256,9 @@ function linkit_field_element_after_build(array $element, array &$form_state) {
+  // Add Linkit dialog button to the element suffix. Give it an ID so it can be
+  // easily focused when the dialog closes.
+  $button_id = "linkit-field-button-{$js_settings['source']}";

@@ -264,8 +266,11 @@ function linkit_field_element_after_build(array $element, array &$form_state) {
         "linkit-field-{$js_settings['source']}",

    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.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
StatusFileSize
new linkit-modal-focus-2811421-5.patch1.21 KB

Here's a new patch that implements my suggestions from #4. Please let me know what you think!

cboyden’s picture

cboyden commented
StatusFileSize
new linkit-modal-focus-2811421-6.patch1.18 KB
new interdiff-5-6.txt347 bytes

Looks great, thanks @dsnopek. I took the liberty of removing some debug code, see attached interdiff and updated patch.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented

Whoops! Thanks for catching that :-)

  • anon committed b24d927 on 7.x-3.x authored by cboyden 
    Issue #2811421 by cboyden, dsnopek, anon: Keyboard focus is lost when...
anon’s picture

anon
Primary language Swedish
Location Gothenburg
commented
Status: Needs review » Fixed

Thanks for patches.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.