Content Structure dropdown remains open after focus moves to page

[karlgroves]

Content Structure dropdown remains open after focus moves to page

• Severity: High
• Affected Populations:
  • Low-Vision
  • Motor Impaired
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Structure and Navigation

Issue description

When users open the "Block Navigation" dropdown and click on an
element, the dropdown closes and focus can be seen on which Block was
selected. However, when users open the Content Structure dropdown and
click on an element, the dropdown remains open while focus moves to the
specified block. The open dropdown obscures the focussed element, and
the Escape key can no longer close the dropdown.

Obscuring the focus position is potentially confusing for sighted
keyboard users, since it may appear as though no item has focus, or make
it unclear as to where the focus position is.

Remediation Guidance

Depending on the reason why the Content Structure remains open, there
are two potential solutions:

1. If the idea is to keep the document outline open while users' focus
   is on the page, then shrinking the page's width so that the open
   dropdown is on the left while the page is on the right (without
   horizontal scrollbars on non-zoomed desktops at least) allows users to
   view both the outline and their current focus position.
2. Otherwise, the dropdown should close as the "Block Navigation"
   does, so that focus on the page element is clearly identifiable.

Relevant standards

• 2.4.7 Focus Visible (Level
  AA)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-27 in Tenon's report

[melchoyce]

Screenshot from full report:

[afercia]

Related to the popover component, see also #15332:

anything which moves the keyboard focus out of the dropdown (such as a voice action, or Tab navigation away from it) should close the dropdown.

[marekhrabe]

I believe this is no longer an issue, as this functionality was introduced as part of #10815. I have tested on the current master branch with both mouse and keyboard interactions and the dropdown now closes after selecting a link.

Introduced in panel.js here: https://github.com/WordPress/gutenberg/pull/10815/files#diff-1a7e4ec3ae945524348fcd77315f8dd0

Feel free to reopen if I missed the point of this issue and it still needs to be addressed.