search

az-digital / arizona-bootstrap

UArizona's front-end toolkit based on Bootstrap 4 and 5.
https://digital.arizona.edu/arizona-bootstrap
MIT License
5 stars 8 forks source link

Make form labels visually distinguishable from description text #1197

Closed joeparsons closed 2 weeks ago

joeparsons commented 4 months ago

Problem/Motivation

Originally from az-digital/az_quickstart#3249 , and is preferable to fix at the Bootstrap level than in the AZ Barrio Drupal theme. Form labels are not visually distinguishable from description text.

Label styling is currently the same as description text, making it visually indistinguishable and confusing for visual users filling out the forms.

Proposed resolution

Increase font-size and boldness of non-checkbox/radio <label>s. Adapt the CSS used in AZ Barrio to fit in AZ Bootstrap context:

form.webform-submission-form {
  label:not(.form-check-label) {
    font-size: 18px;
    font-weight: 700;
  }
}

Expected behavior

Form labels are visually distinguishable from description text.