Handle initial focus within snippet preview modal

[dariaknl]

How can we reproduce this behavior?

1. Open Snippet preview in Gutenberg in a modal.
2. See screenshot: "Close dialog" is shown on a opening of modal though I expect to see it only when I hover over the close button

Technical info

• WordPress version: 4.9.8
• Yoast SEO version: 8.1 RC1

[IreneStr]

The focus should be on the SEO title input field. Make sure this is announced correctly by screenreaders.

[afercia]

The focus should be on the SEO title input field.

No, I wouldn't recommend this. There's a lot of content before the title input field that would be basically "skipped" and screen reader users may have no clue there's something before that has been skipped.

Modal dialog notes regarding initial focus placement:
https://www.w3.org/TR/wai-aria-practices/#h-note-7

Based on the rules above we could try to set initial focus on the first paragraph. However, given this is the default Gutenberg behavior, I think it should be solved upstream in Gutenberg, preserving the tooltip:

• initial focus on the close button
• when initial focus is set programmatically, the tooltip should not appear
• hovering or manually focusing the close button should make the tooltip appear

[afercia]

Note: the "Close" button at the bottom is not translatable.

[dariaknl]

UPD: if you open console, the bug is gone.

[afercia]

@dariaknl not arguing, it's not a bug 🙂It's just the default behavior of the Gutenberg modal. I'll open an issue upstream to take this into consideration. The fact that with the console open the tooltip doesn't appear, it's a Chrome bug in correctly handling focus 😉

[afercia]

Created WordPress/gutenberg#9410 upstream.

[IreneStr]

Closing because this needs to be fixed in Gutenberg