Focus management in detached mode

[o-alquimista]

Currently, when you close the detached experience (by clicking on the "cancel" button or pressing "ESC"), focus is lost - it resets back to the beginning of the page. Keyboard users will be pretty upset with that.

I could work around this accessibility issue with a callback for this event, which would let me manually apply focus somewhere more adequate. Is that currently possible?

[francoischalifour]

Good call, thanks!

For now you should be able to track when isOpen becomes false in onStateChange, and to manually apply focus at this point.

[o-alquimista]

I'm trying something like this, but it's not working properly:

onStateChange({state}) {
  if (false === state.isOpen) {
    let detachedSearchButton = container.querySelector('.aa-DetachedSearchButton');
    
    if (detachedSearchButton) {
      detachedSearchButton.focus();
    }
  }
}

It's preventing focus on the <input> in detached mode.