JS TypeError: Safari and IE11: Escape doesn't move focus back from the toolbar to the block content

[afercia]

Noticed while investigating on #6118 / #6163.

When using the keyboard and moving focus from the block content to the toolbar using Alt+F10, then pressing Escape is supposed to move focus back from the toolbar to the block content.

This works perfectly on Chrome, Firefox, and Edge. It doesn't work on Safari and IE11.

I've quickly seen there's a check for an actual selection and focus is moved back only if there's a selection. I'd suspect the method to get the selection doesn't work with IE11 (not surprisingly) and Safari.

[afercia]

Yep seems in Safari there's no selection, so focusNode is null:

See

gutenberg/editor/components/navigable-toolbar/index.js

Line 55 in 9a89874

focusSelection() {

I guess something similar happens in IE11. Seems window.getSelection() fails in these browsers when there's a selection but the actual focus is somewhere else? (this used to happen in old IEs)

[afercia]

This is what the selection looks like in IE11 (please ignore the other warnings):

Seems there's a selection, but focus is not moved back to the block content.

[designsimply]

Tested and confirmed that, when using Safari, pressing Alt+F10 moves focus to the block toolbar and that pressing escape or Alt+F10 again does not return focus to the content area. I also noticed that pressing Tab in Safari returns focus from the block toolbar to content area and that pressing Tab in Firefox moves between different block toolbar options whereas Esc returns the focus to the content area.

Video: 20s
^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13999&action=edit running WordPress 4.9.7 and Gutenberg 3.3.0 using Safari 11.1.2 on macOS 10.13.6.}

Error seen in the Safari browser console after pressing Esc while the toolbar has keyboard focus:

TypeError: null is not an object (evaluating 't.nodeType')
http://alittletestblog.com/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js

Note: since the script source is a React file this may be an upstream bug in React.

[afercia]

Still a problem in current master 3.8.0-rc.1. Just re-tested in Safari 11.1.2 and getting:

TypeError: null is not an object (evaluating 'focusElement.nodeType')

[afercia]

Note: this doesn't happen on the TinyMCE demo https://www.tiny.cloud but still happens on current Gutenberg master 4.0. It appears to be something specific to the selection methods used in Gutenberg.

[aduth]

Fix proposed at #10529

[afercia]

Noting this is still a problem and the JS error still happens. This issue was opened 11 months ago. The PR exploring a solution is #10699 and it's now marked as stale. Some higher priority on this would be greatly appreciated.

[afercia]

Also related to pressing Escape from the toolbar: #11774

[youknowriad]

I believe this behavior was removed with the navigation mode. So closing this issue.