[Siteimprove] Form field missing a label

Created on 17 January 2024, 10 months ago

Updated 31 January 2024, 10 months ago

Siteimprove is reporting that forms that use a "hide-labels" class are invisible to screen readers

IU Framework CSS uses display: none, instead of an approach that keeps the labels visible to screen readers

.filter.hide-labels .form-item-label,
.filter.hide-labels .label,
.filter.hide-labels label {
    display: none;
}

Override IU Framework display: none, with display: block, and then hide the styles with a standard "screen reader" only approach.

Drupal provides a utility class called "visually-hidden" that we can use as a guide.

🐛 Bug report

Status

Fixed

Version

2.1

Component

User interface

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.

Merge Requests

Issue created by @jwilson3
Merge request !5Issue #3415416 by jwilson3: [Siteimprove] Form field missing a label → (Merged) created by jwilson3
Comment 10 months ago →
System Message

jwilson3 → committed c44836f4 on 2.1.x
Issue #3415416 by jwilson3: [Siteimprove] Form field missing a label
Status changed to Fixed 10 months ago11:25pm 17 January 2024
Comment 10 months ago →
🇪🇨Ecuador jwilson3
Comment 10 months ago →
System Message
Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024