Summary: In Chrome 98 and Firefox 97, both on Windows 10 and macOS Catalina, .blurring() a focused element with JavaScript maintains a "ghost" focus state at that location in the document, such that when a user presses the tab key to navigate forward in the document, they move to the next focusable element on the page. In Safari, manually firing the .blur() event destroys keyboard focus, such that the next tab event proceeds from the start of the document rather than where it left off when .blur() was called. Reproducible examples: - CodePen demo of managing focus with load-more buttons and dynamically loaded content: https://codepen.io/AleksandrHovhannisyan/pen/rNGOBKv. - Minimal toy example: https://jsfiddle.net/mujdq29k/. Expectation: Safari should behave the same as Chrome and Firefox. Blurring a focused element should not reset focus to the start of the document.
<rdar://problem/88913538>
A colleague of mine checked in an accessibility Slack channel, and it turns out that the behavior we see in Chrome/Firefox is actually not a standard behavior and is some sort of self-correcting behavior. It's also not accessible because for some screen readers, the focus actually still jumps to the start of the document when blurring manually. I think we can close this ticket since Safari appears to be working correctly in that respect. blur() SHOULD return focus to the start of the document.
Thanks!