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.
Comments
Comment #2
huzookaComment #3
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedWe use major for triage of WCAG level A success criteria
Comment #4
huzookaThis is not Major, or not a Bug imho. See this doc.
Comment #5
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedIssues relating to WCAG level A have been treated as major for a while now, in triage for other experimental module/theme/profiles in core. We should probably update the doc you linked to reflect that.
Comments 26 & 28 mention this in #3079738: Add Claro administration theme to core.
Comment #6
katannshaw CreditAttribution: katannshaw at Lullabot commented@andrewmacpherson: Would making the label visible above the field like my screenshot shows be acceptable? If so I can create a patch for this.
-Kat
Comment #7
ckrinaIf we were going to take this approach showing the label, I'd say we should display the label inline like in this specs:
If Andrew thinks this issue has major priority, accessibility-wise, I'd prefer to respect that since he's Accessibility maintainer. It doesn't mean it has to be a beta blocker, but it means it has a major impact on accessibility and knowing it will help us address it sooner.
Comment #8
fhaeberleIs this considered ready for implementation? Because discussion is still ongoing.
Comment #9
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commented#6 and #7: Either of these arrangements will satisfy the WCAG "Labels and instructions".
Added a bit more explanation to the issue summary, about why it's a bug. Lack of a visible label requires speech control users to jump through extra hoops to operate it. Dragon users cannot operate a
<select>
by speaking the current value; it expects you to say the label.Can we add an issue credit for @mfairchild365 please? I didn't have a copy of Dragon to hand, so he did some testing for me.
Comment #10
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedComment #12
ckrinaComment #13
ckrinaPerfect then, thanks @andrewmacpherson! Updating the issue summary with the final designs to implement.
And thanks @katannshaw too for the suggestion! I just proposed the inline label to keep the vertical use of space as limited as possible since it's been a complain in other designs in the past :)
Note for the implementation: it is possible that there isn't an inline variation of the inline label+text field/select implemented yet and it might have to be developed.
Comment #14
katannshaw CreditAttribution: katannshaw at Lullabot commentedI'm going to work on the patch by following the screenshot provided by @ckrina. Thanks to you and @andrewmacpherson for the clarity.
-Kat
Comment #15
huzookaComment #16
katannshaw CreditAttribution: katannshaw at Lullabot commented@huzooka: I'm trying to test your patch however I can't find the /src/ClaroPreRender.php used in the patch within the Claro theme.
FYI: I was planning on making that change within claro.theme, adding .container-inline to the wrapping div element just before the label, and then adding needed CSS for the xs input's right margin.
-Kat
Comment #17
katannshaw CreditAttribution: katannshaw at Lullabot commentedComment #18
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commented#16 - yeah, I was confused by that too. There are two branches in the Claro contrib repository (8.x-1.x and 8.x-2.x) but there isn't a top-level
src/
directory in either of them.Claro has now been added to the Drupal core 8.9.x branch as an experimental alpha theme. The patch which added it DOES contain the
ClaroPreRender
utility class. It basically gets used as a way to organize code better, and keep thehook_element_info_alter()
short and tidy. See #3079738-146: Add Claro administration theme to core.So the Claro contrib module is now out of sync with what's in Drupal core.
@huzooka (or anyone else) - can we have an update on what the Claro development process is now? I expect this affeccts a lot of issues now. .
Comment #19
huzookaComment #20
shashikant_chauhan CreditAttribution: shashikant_chauhan as a volunteer commentedJust rerolled the patch from #15
Comment #21
shimpyI can't able to see the claro theme in drupal 8.9 dev
Can anyone tell me in which directory i can find so. I am attaching the screenshot for the themes available in drupal 8.9 dev right now.
Comment #22
huzookaAre you sure that you have the most-recent patches?
It is there!
Comment #23
shimpyhi @huzooka
I have installed Drupal8.9 again now the claro is coming as experimental theme.
Might be perviously i installed 8.9 version before claro been updated as experimental thats's y it was not working.
Thanks for reminding me to install the latest release.
Comment #24
rensingh99 CreditAttribution: rensingh99 at Red Crackle commentedHi,
I have reviewed the patch #20. It's added the inline label but there are no space between label and select.
You can not use var(--space-xs) in form.css, you should use var(--space-xs) variable in form.pcss.css and after compile it will add CSS in form.css .
I am attaching screenshot.
Thanks,
Ren
Comment #25
huzookaComment #26
huzookaNo interdiff, since this just fixes the problematic rebase.
Comment #27
rensingh99 CreditAttribution: rensingh99 at Red Crackle commentedComment #28
rensingh99 CreditAttribution: rensingh99 at Red Crackle commentedHi,
I have reviewed the patch # 26. It's looking great.
Below is screenshot output after applying patch.
Thanks,
Ren
Comment #29
alexpottCommitted and pushed b12a3a59e1 to 9.0.x and c9a231cc83 to 8.9.x. Thanks!
Going to confirm with a release manager about backport to 8.8.x
Comment #32
alexpottDiscussed with @catch - as claro is experimental this can be backported.
Comment #35
shimpy