Because field.html.twig extends @stable instead of @classy, things like the visually-hidden class aren't included. So when a site builder sets a label to be hidden or visually hidden, it doesn't work.

I can see this being a point of confusion -- a site builder hides a field label and it works in Bartik, but not in Basic. But I can also see the argument that Basic is trying to stay as lean as possible and the site builder should simply subtheme Basic and override the field template...

CommentFileSizeAuthor
#8 2779743-8-visually-hidden.patch598 bytesmikeker
#8 2779743-7-8.interdiff.txt658 bytesmikeker
#7 2779743-7.patch594 bytesmikeker
#2 2779743-2.patch490 bytesmikeker

Comments

mikeker created an issue. See original summary.

mikeker’s picture

mikeker commented
StatusFileSize
new 2779743-2.patch490 bytes

Also fixes the lack of a trailing newline in this file.

mikeker’s picture

mikeker commented
Status: Active » Needs review

Always forget that... :)

joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented

When/how does a site builder set that visually-hidden class? I don't think core has any drop-downs to that effect. If I'm building with Basic, i may want to use my own class names for these utility classes or borrowing from another framework

mikeker’s picture

mikeker commented

In admin/structure/types/manage/<content_type>/display a site builder can set display options on the field label. (Related, but out of scope for this issue, is that Basic doesn't handle the inline option either.) Classy then adds it in field.html.twig:

{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented

That seems more like a core bug/oversight but yeah in basic we use that utility class in a number of places already.

Maybe we can/should add that back to stable, since we do in in preprocess all over core anyway? If people don't have the class defined, most things won't work as expected and you can't easily change that class name across core :(
If you agree could you create that issue in core?

For Basic in the mean time, we should just add that class in ours, minus the field__label

mikeker’s picture

mikeker commented
StatusFileSize
new 2779743-7.patch594 bytes

Added a core bug/followup: #2779919: Stable theme does not respect "visually hidden" field label display option.

Also updated Basic's field template to include the class with an @todo to remove it when the above issue is resolved.

mikeker’s picture

mikeker commented
StatusFileSize
new 2779743-7-8.interdiff.txt658 bytes
new 2779743-8-visually-hidden.patch598 bytes

Finally read Drupal's Twig coding standards... :)

  • joelpittet committed d20a1fe on 8.x-1.x authored by mikeker 
    Issue #2779743 by mikeker: Hidden/Visually hidden field labels don't...
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Status: Needs review » Fixed

Thank you @mikeker, I've pushed that to the 8.x-1.x

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

FOXs-M’s picture

FOXs-M commented

you Can Use this CSS Code:

.field-label-hidden{
  visibility: hidden;
  height: 0%;
  width: 0%;
}