Focus management problems (active element is removed before redirecting focus) - hacky fixes and theories

Instructions: using a screen reader, navigate to the button in each example and activate it. It will be replaced with a message. Is that message announced when it is focused?

Example 1: theory: change the DOM enough so that the browser doesn't recover to the element that is getting focus

Example 2: set focus after element loads

Example 3: force reset focus (send to sr-only div and then back)

Example 4: force reset focus (send to sr-only div and then back) - after a slight delay

Example 5: visually hide the trigger, then send focus to the new content, then remove the trigger

results

Conclusions

please wait