Follow up to to partially revert #3023300: Text area style updates.
Problem/Motivation
On formatted text areas, Claro hides the label for the text format selection. No justification was given for this.
There are a few accessibility problems with this:
- The purpose of the text format
<select>
isn't clear without a label. The text format names can be literally anything a site builder chooses, so the options here may not be understandable without a visible label for the drop-down. - The name of the
<select>
isn't clear without a visible label. This makes it awkward for speech control users to operate. The normal way to operate a<select>
is to speak the name of the control directly (i.e. "Click Text format"). If the name of the control isn't visible, you don't know what to say. It can't be operated by saying the current value (e.g. "Click Restricted HTML"). Other methods are available in speech control, but they involve extra steps. For example "Show numbers. Choose 24." is two steps, and you never know what number to expect so that's an additional cognitive load. Some speech control software offers a mouse targeting grid, but this usually takes 6-10 steps so it's a last resort.
The relevant WCAG success criteria is "3.3.2 Labels or Instructions" at level A.
Proposed resolution
Make the label visible, like it is in other themes. Use the inline variation.
Figma specs to see the spacing between elements&font sizes: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...
Remaining tasks
Remove the override of #title_display
in _claro_text_format_prerender()
.
User interface changes
Restores a label which is important for understanding the form.