Problem/Motivation

A regression appears to have been introduced by commit 9d63cfc993ed8a6e2c062ba9231d8dd6b2e6d90f
(#3573981: An empty line is added between a date form element and its description).

That commit fixes the date/help-text spacing problem, but it also changes the label selector in

css/components/
  form.css

from:

label {
  display: table;
  margin: 0 0 0.1em;
  padding: 0;
  font-weight: bold;
  }

to:

.label {
  display: table;
  margin: 0 0 0.1em;
  padding: 0;
  font-weight: bold;
  }

Standard Drupal form labels are still rendered as normal <label> elements, for example:

<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-title form-item-
  title">
  <label for="edit-title">Titel</label>
  <input data-drupal-selector="edit-title" type="text" id="edit-title" name="title" value="" size="30" maxlength="128"
  class="form-text">
  </div>

The label does not have class="label", so the styling is no longer applied.

As a result:

- readability is reduced
- this can also affect accessibility

This is visible in standard admin/editorial forms and is not limited to a special edge case.

Steps to reproduce

1. Open a standard Drupal admin form with a normal textfield, for example a node edit form.
2. Inspect the rendered label element.
3. Compare Seven before and after commit 9d63cfc993ed8a6e2c062ba9231d8dd6b2e6d90f.
4. Observe that the markup is still a normal <label>, but the styling no longer applies because the CSS
now targets .label instead of label.

Proposed resolution

Restore the styling for standard rendered form labels, or otherwise ensure that the equivalent styling still applies
to normal Drupal <label> elements.

Additional information

This looks like an unintended side effect of the fix for #3573981 rather than a separate intended UI
change.
This change to breaks the layout of the publication date module and sheduler module where descriptions now overlap fields.

Screenshots

broken labels

broken descripton at date fields

Issue fork seven-3583890

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

macdev_drupal created an issue. See original summary.

macdev_drupal’s picture

I re-tested this against seven 2.0.x-dev and the regression affecting the publication_date module is gone.

What still remains is the change from `label` to `.label`. This looks like an unrelated refactoring glitch to me,
because it was introduced in commit `9d63cfc993ed8a6e2c062ba9231d8dd6b2e6d90f`, which was meant to fix spacing under
date fields and does not seem directly related to general label styling.

I prepared a small follow-up fix in the issue fork that restores the styling for standard rendered `label` elements
while keeping the existing `.label` selector in place.

Wenn du es etwas aktiver auf den Commit beziehen willst, kannst du den letzten Satz auch so machen:

I prepared a small follow-up commit in the issue fork that restores the styling for standard rendered `label` elements
while keeping the existing `.label` selector in place.

avpaderno’s picture

Issue summary: View changes

avpaderno’s picture

Status: Active » Needs review

  • avpaderno committed fde23ae2 on 2.0.x
    Issue #3583890: Restore label styling for standard label elements
    
avpaderno’s picture

Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

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