Template editor header area is difficult to navigate with screen readers

[carolinan]

Description

In the template editor:
Starting from the top left (ltr), the "View posts" button (WordPress icon/ site icon). If you navigate forwards using the tab key,
you first reach the toolbar and then the settings (switch to draft, preview, update etc).

For users with vision, it means that the "template top area" is skipped completely, because visually, it is not connected to the toolbar.

It is not clear that to reach the template top area, you have to navigate to the toolbar using tab key, and then navigate with left or right arrow keys.

When navigating with arrow keys, the first button of the template top area, -the title of the current post that leads you back to the block editor, is skipped. You move from the list view toolbar item directly to the template options button.

To reach the mentioned button, you have to first navigate to the template options button and then tab backwards
Once the button is selected, the context is "Edit (name of post)". It doesn't explain that you will leave the template editor.
This is confusing since you are already editing that post.

Expected behaviour

The focus order and visual order of the items should match.
Focusable items should not be skipped.

Actual behaviour

The link button back to the block editor is not focusable -unless you navigate backwards.

It is not clear that to reach the template top area, you have to navigate to the toolbar using tab key, and then navigate with arrow keys.

WordPress information

• WordPress version: 5.8 beta 1
• Gutenberg version: Tested with and without Gutenberg (current trunk) active.
• Are all plugins except Gutenberg deactivated? No, beta tester plugin is also active.
• Are you using a default theme (e.g. Twenty Twenty-One)? yes Twenty Twenty-One.

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome Version 91.0.4472.101
  Screen reader NVDA 2020.4.

[youknowriad]

Just FYI the label "backport to WP beta" is used for PRs and the project for issues.