Font Library: Don't use header, main and footer elements within the Fonts modal dialog tab panels

[afercia]

Description

The Fonts modal dialog should not contain <header>, <main>, and <footer> elements.

These elements are supposed to be used either in the context of the body element or as descendants of sectioning content elements such as article, aside, nav, section.

Instead, here they are used within a tabpanel role which in turn is within a dialog role.

Furthermore, when the modal dialog opens, all the rest of the content gets hidden from assistive technology. As such, these <header>, <main>, and <footer> become ARIA landmarks. We don't want to use ARIA landmarks within a role=dialog because it's semantically incorrect, it doesn't add value for users and it's even potenrially confusing.

Screenshots:

Step-by-step reproduction instructions

• Observe the code at

  gutenberg/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js

  Lines 25 to 50 in d7bba1b

  	<header>
  	<VStack spacing={ 2 }>
  	<HStack justify="flex-start">
  	{ !! handleBack && (
  	<Button
  	variant="tertiary"
  	onClick={ handleBack }
  	icon={ chevronLeft }
  	size="small"
  	/>
  	) }
  	{ title && (
  	<Heading
  	level={ 2 }
  	size={ 13 }
  	className="edit-site-global-styles-header"
  	>
  	{ title }
  	</Heading>
  	) }
  	</HStack>
  	{ description && <Text>{ description }</Text> }
  	</VStack>
  	</header>
  	<main>{ children }</main>
  	{ footer && <footer>{ footer }</footer> }

• Observe the code uses <header>, <main>, and <footer> elements.

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