Problem/Motivation

While required fields are triggering errors, there are no indicators.

Proposed resolution

Add SCSS with the .form-required class to indicate after field.

 .form-required::after {
    content: "*";
    color: var(--color--red);
  }

Issue fork event_horizon-3583056

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:

About issue forks

Comments

markie created an issue. See original summary.

markie opened merge request !27

markie’s picture

markie commented
Status: Active » Needs review

Added class to the utility.sass and created MR.

weekbeforenext’s picture

weekbeforenext
Primary language English
Location Asheville, NC
commented

This didn't resolve the issue on the Drupal Camp Asheville site. I added the following override CSS:

/* Form required star icon */
.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
  background-image: none;
  content: "*";
  color: var(--color--red);
}

@media screen and (-ms-high-contrast: active) {
  .form-item__label.form-required::after,
  .fieldset__label.form-required::after,
  .required-mark::after {
    background-image: none;
    content: "*";
    color: var(--color--red);
  }
}

.fieldset__legend .fieldset__label.form-required:after {
  background-image: none;
  content: "*";
  color: var(--color--red);
}

The existing CSS/SCSS uses a background image SVG that has a white fill color.

mandclu’s picture

mandclu commented
Version: 1.0.x-dev » 2.0.x-dev

mandclu opened merge request !45

  • mandclu committed 496ab34d on 2.0.x 
    fix: #3583056 Required form fields have no indicator

By: markie
By:...
mandclu’s picture

mandclu commented
Status: Needs review » Fixed

The problem with setting the content is that is will be read by screen readers. I decided to take a different approach, using the svg icon but using it as a mask, so CSS can handle the color.

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.