'Show template details' button label and text mismatch when the 'Show button text labels' setting is enabled

[afercia]

Description

Similar to #42236 but with an additional issue about translations.

In the Site Editor, when the preference 'Show button text labels' is enabled, the Show template details button shows text instead of the chevron icon:

The visible text 'Details' is different from the actual accessible name provided by the button aria-label, which is 'Show template details' or 'Show template part details'.

One of the main reasons why the 'Show button text labels' preference was implemented is to help speech recognition software users to use the Editor.

These users need to actually see a control name to be able to voice a command with their speech recognition software. For this to work, the visible text of a control must match (or at least start with) the actual accessible name. See also:

WCAG Success Criterion 2.5.3 Label in Name
https://www.w3.org/TR/WCAG21/#label-in-name

Additionally, part of the aria-label string is not translatable. The DocumentActions gets an entityLabel prop with hardcoded non-translatable English strings template or template part:

gutenberg/packages/edit-site/src/components/header/index.js

Lines 179 to 188 in 8489bc7

	<DocumentActions
	entityTitle={ entityTitle }
	entityLabel={
	templateType === 'wp_template_part'
	? 'template part'
	: 'template'
	}
	isLoaded={ isLoaded }
	showIconLabels={ showIconLabels }
	>

These strings are used for the Show details button label, to replace the placeholder in a translation function:

__( 'Show %s details' )

The resulting string is a mix of translatable and non-translatable words. Instead, a fully translatable string should be provided to translators.

Note: the non-translatable strings are used also for the visually hidden H1 heading on this page. That should be fixed as well.

Step-by-step reproduction instructions

• Go to the Site Editor
• Enable the preference 'Show button text labels' in Options > Preferences
• Inspect the Show template details button

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

[afercia]

I'd like to propose to simplify as much as possible. I'm not sure the visible text 'Details` is the best choice, to start with. Also, not sure using two aria-labels that distinguish between 'template' and 'template part' adds great value.

Actually, this button opens a panel that provides users with multiple functionalities:

• See the template description.
• Select and Edit template areas, if available.
• Clear customizations.
• Edit the title of custom templates.
• Browse all templates / template parts.

Also, sometimes there are no real 'details' to show (there's no description):

The word 'Details' doesn't seem to clearly identify all these features. It's more a 'manage / browse' templates. I'd like to propose to think of some more appropriate text and use that for both the visible text and the aria-label. That would also solve the issue of the non-translatable parts of the string, at least for the button. The H1 would still need to be fixed.