Audio Block: manage focus after media library modal close

[alexstine]

Describe the bug

This is an accessibility issue that happens when using the Audio Block in Gutenberg. Focus is not managed properly after the media library modal is closed or a media file is selected.

To reproduce

1. Insert an Audio Block.
2. Select Media Library.
3. Select a file from your media library or upload a new one.
4. Select the Select button.
5. Notice how screen reader focus is now on Undo, Redo, or Schedule buttons instead of in the block that you were working on.

Expected behavior

I expected to be dropped back in my currently selected block, not somewhere else in the editor.

Editor version (please complete the following information):

• WordPress version: 5.6 RC3

Desktop (please complete the following information):

• OS: Windows 7
• Browser Firefox
• Version 83.0

[joedolson]

I was not able to reproduce this, but I did find the new focus to be less than totally helpful. It seems to me that the best target focus on selecting media would be the 'Replace' button. This should allow for quick error correction. Along with that, I think that the current media URL data point should also include the media title, so that users can more easily tell which file is included.

[Lewiscowles1986]

How do the labels work?

Surely as all media uses shared components, albeit supplying different arguments; this would affect Image, Video, etc as well?

https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/audio/edit.js#L137-L145 is the usage for Audio. But this defers to another shared component <MediaReplaceFlow>

Getting right into the guts as far as https://github.com/WordPress/gutenberg/blob/master/packages/media-utils/src/components/media-upload/index.js the level of indirection was not ideal for me, but it seems like multiple components should experience similar behavior.

• https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/audio/edit.js#L137-L145
• https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-replace-flow/index.js#L136
• https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/media-upload
• https://github.com/WordPress/gutenberg/tree/master/packages/components/src/higher-order/with-filters
• https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/utils/media-upload/index.js
• https://github.com/WordPress/gutenberg/blob/master/packages/media-utils/src/components/media-upload/index.js

[youknowriad]

I tried working a bit on this issue and for me the focus moves back to the block and this makes sense to me since the placeholder is not longer visible.

[alexstine]

Focus is never moved back to the block for me. Let me try to record a video so you can see what's going on. Maybe the issue is very specific to me somehow.

[t-hamano]

I was able to reproduce this problem with the post editor, not the site editor. I also think that this problem is not limited to audio blocks.
Some examples are described below.

After selecting media in the media library and pressing the Select button:

• Audio Block: Loses focus. However, if the Tab key is pressed, the block gets focus.
• File Block: Loses focus. However, if the Tab key is pressed, the block gets focus.
• Image Block: The caption area gets focus, but the block does not. When the tab key is pressed, focus appears to be lost from the editor.

[alexstine]

Wow, how sad. This issue is assigned to me and I forgot all about it. I thought for sure this would be fixed after some adjustments in useBlockProps, but I guess not.

@annezazu By any chance, do you know of anyone with bandwidth right now to look in to this one? That person just is not me.

[annezazu]

@talldan or @carolinan might either of you have time in the coming weeks as 6.1 settles?