Return to tab position when exiting dialog opened from contextual link

I have confirmed this is a problem with contextual links and dialogs even without Settings Tray enabled. We use to not support ajax/dialog links in contextual links so it won't have been a problem.

To test

1. Enable test modules contextual_test and dialog_renderer_test
2. Goto /dialog_renderer-test-links
3. Use tab to select the Normal Modal!
4. Hit return to open the dialog
5. Hit return to close the dialog(you should be focus on close button when open)
6. You should be focused on the link that opened the dialog. This works great and is documented here: https://api.jqueryui.com/dialog/
7. Tab to block contextual link
8. Enter to open
9. Tab to "Test link with ajax" contextual link
10. Entity to open dialog
11. In the background contextual links close
12. Hit return to close the dialog(you should be focus on close button when open)
13. Not sure where focus?!?

You can also confirm that the focus work for the off-canvas dialog when not using context links by enabling off_canvas_test and then doing steps first 6 step on the page /off-canvas-test-links

I tried to use the dialog:beforecreate event to capture the currently focused link but at that point the focus is already on the dialog I think.

I am not sure what desired behavior would be here.

Ok here is a fix. It will need work.

I talked to @andrewmacpherson and we agreed that focus should go to the contextual button that opened the contextual links list with the dialog link. This patch does that.

@andrewmacpherson also pointed out that we need to consider what should happen when a form is saved in the dialog and then reloads the current page. I think that should a new issue.

Need to figure out how to test this.

1. +++ b/core/misc/dialog/dialog.ajax.js
   @@ -85,6 +85,10 @@
   +    if (ajax.hasOwnProperty('element')) {
   +      response.dialogOptions.drupalTriggerElement = ajax.element;
   +    }
   

   If the dialog is being triggered for an element this element will be lost when opening the dialog if we don't save it in dialogOptions

2. +++ b/core/modules/contextual/js/contextual.es6.js
   @@ -263,4 +264,22 @@
   +      if (settings.hasOwnProperty('drupalTriggerElement')) {
   +        drupalTriggerElement = settings.drupalTriggerElement;
   +      }
   

   We have to save the triggering element because settings is not available in dialog:afterclose event.

This patch adds test coverage to prove the trigger button is the active element when the dialog is closed.

In #6 I was going to add test coverage for all dialog types but I realized it is difficult to test the off-canvas dialog unless you extend \Drupal\Tests\system\FunctionalJavascript\OffCanvasTestBase

So created #2927926: Create OffCanvas testing trait to allow other modules to test using off-canvas dialog

Updated the comment which was I copied originally.

Also provided TEST_ONLY patch to prove the button does not get focus without this fix.

@drpal thanks for the review!

1. added ajax.element instanceof Element
   I looked into using ajax.element instanceof HTMLElement but from what I can tell Element is supported in many more browsers than HTMLElement
2. I changed the logic in this file now to check in dialog:beforecreate whether it is contextual link. Because there no point saving the element if the link that opened the dialog is not a contextual link.

   As result of this it make more sense to just save the trigger button which will be given focus. So I changed the var name to dialogLinkContextualButton. Added a comment and moved it closer to where it is used.

3. fixed. But comment is always updated because of logic change.

chatted with @drpal and here is just small change to the if statement when checking for the contextual button.