Skip to content

Font size picker: fix translatable strings and accessibility #63810

Closed
@afercia

Description

@afercia

Description

The font size picker renders some text which comes from a component called HeaderLabel. The text of this component is meant to communicate the currently selected font size or whether it's a custom size.

The default text is Size. When a size is set, the size name is appended to thte default text e.g. Size medium:

Screenshot 2024-07-22 at 15 49 57

<HeaderLabel
aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
>
{ __( 'Size' ) }
{ headerHint && (
<HeaderHint className="components-font-size-picker__header__hint">
{ headerHint }
</HeaderHint>
) }
</HeaderLabel>

This may work in English. It doesn't work for all languages with gendered nouns. For example, in Italian the noun 'Size' is translated to Dimensione, which is female. However, all the size adjectives are translated to masculine.

We can't blame translators for this. In WordPress, the best practices for l10n recommend to always use full translatable strings and never concatenate strings that may contain variable parts. Something like this:

${ __( 'Size' ) } ${ headerHint || '' }

can't be translated correctly and must be avoided. In core, this best practice is implemented pretty well as it's established since ages. In Gutenberg, I see many cases of concatenation that should be all refactored.

The result in the italian translation is:

  • Dimensione piccolo
  • Dimensione medio
  • Dimensione grande
  • Dimensione molto grande
  • Dimensione grandissimo
  • Dimensione personalizzato

Only 2 of these 6 tranlations are acceptable: grande and molto grande. The other ones are wrong.

Accessibility

The HeaderLabel component renders a styled <span> element. This element has an aria-label attribute that just repeats the visible text. Also, using an aria-label on a <span> element is pointless as it's not an interactive control and doesn't have ani ARIA role.

Step-by-step reproduction instructions

  • Switch WordPress to a language with gendered nouns e.g. Italian.
  • Select a paragraph.
  • Observe the translations of the Typography 'font size' in the Inspector.

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

Metadata

Metadata

Assignees

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intendedl10nLocalization and translations best practices

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions