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:
|
<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.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
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:gutenberg/packages/components/src/font-size-picker/index.tsx
Lines 131 to 140 in 8df860e
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:
Only 2 of these 6 tranlations are acceptable:
grandeandmolto grande. The other ones are wrong.Accessibility
The
HeaderLabelcomponent renders a styled<span>element. This element has anaria-labelattribute 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
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.