Welcome guides: improve initial focus to avoid skipping content

[afercia]

Description

After #52014, the welcome guides modal dialogs that have only one 'page' (as in: no wizard steps) do not render the X close button any longer.

Please se this comment: #52014 (comment)

This change has an impact on accessibility:

• Initial focus now goes to the last element within the modal dialog
• As such, screen reader users may not have any clue that there's some content before the 'get started' button.
• Providing an user experience that potentially forces users to miss content is lett than ideal.
• Previously, initial focus was set to the 'Close' button: this way, screen reaaer users didn't miss any content, as the content was provided in a natural order. As such, I'm going to mark this issue as a regression.
• In this cases, initial focus should be set on the modal dialog itself.

Aside

Design considerations / UI consistency: there are now seven welcome guides in use in the editor:

• edit-post
  • welcomeGuide
  • welcomeGuideTemplate
• edit-site
  • welcomeGuide
  • welcomeGuideStyles
  • welcomeGuidePage
  • welcomeGuideTemplate
• edit-widgets
  • welcomeGuide

They look and behave differently. I'll leave this to the design team consideration. IMHO, I'd tend to think that consistency in visuals and user experience is key and should prevail on any other consideration. Screenshot to illustrate the seven welcome guides:

Step-by-step reproduction instructions

• To make sure the welcome guides are rendered, use a clean database or delete the wp_persisted_preferences user meta in your database.
• Go to the various places in the editor where welcome guides are used:
• edit-post
  • welcomeGuide
  • welcomeGuideTemplate
• edit-site
  • welcomeGuide
  • welcomeGuideStyles
  • welcomeGuidePage
  • welcomeGuideTemplate
• edit-widgets
  • welcomeGuide
• Observe some of the welcome guides modal dialogs do show a X close button, some don't.
• Observe the initial focus is set on different elements depending on the presence of the X close button.
• Observe when there's no X close button, the initial focus is set on the last element: the 'Get started' or 'Continue' button.
• Optionally: use a screen reader and observe that when initial focus is set to the last element, the previous content is not announced (of course) so that users may not have a clue there's some content before the current focus point.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes