What is the issue with the HTML Standard?
Description:
I'm working with the native Popover API and ran into an issue with nested popovers and keyboard interaction.
Reproduction (CodePen):
https://codepen.io/shanthambi/pen/LERaYmG
Scenario:
A dropdown is implemented using the Popover API.
Inside the dropdown, there is another nested popover (e.g., a submenu or secondary panel).
Focus is correctly managed when opening both popovers.
Issue:
When pressing the Escape key to close the inner (nested) popover:
The inner popover closes as expected.
However, focus is not restored to the triggering element or any logical parent.
Instead, focus appears to be completely lost (i.e., document.activeElement becomes body or nothing meaningful).
Expected behavior:
Focus should return to:
Either the trigger element of the nested popover, or
The parent popover (dropdown), maintaining a logical focus flow.
Actual behavior:
Focus is lost entirely after pressing Esc.
Questions:
Is this the intended behavior of the native Popover API?
Are developers expected to manually restore focus in nested popover scenarios?
Is there a recommended pattern for handling focus when using nested popovers?
Additional context:
This creates accessibility concerns, especially for keyboard and screen reader users, as it breaks expected focus management patterns.
Any clarification or guidance would be appreciated.
What is the issue with the HTML Standard?
Description:
I'm working with the native Popover API and ran into an issue with nested popovers and keyboard interaction.
Reproduction (CodePen):
https://codepen.io/shanthambi/pen/LERaYmG
Scenario:
A dropdown is implemented using the Popover API.
Inside the dropdown, there is another nested popover (e.g., a submenu or secondary panel).
Focus is correctly managed when opening both popovers.
Issue:
When pressing the Escape key to close the inner (nested) popover:
The inner popover closes as expected.
However, focus is not restored to the triggering element or any logical parent.
Instead, focus appears to be completely lost (i.e., document.activeElement becomes body or nothing meaningful).
Expected behavior:
Focus should return to:
Either the trigger element of the nested popover, or
The parent popover (dropdown), maintaining a logical focus flow.
Actual behavior:
Focus is lost entirely after pressing Esc.
Questions:
Is this the intended behavior of the native Popover API?
Are developers expected to manually restore focus in nested popover scenarios?
Is there a recommended pattern for handling focus when using nested popovers?
Additional context:
This creates accessibility concerns, especially for keyboard and screen reader users, as it breaks expected focus management patterns.
Any clarification or guidance would be appreciated.