Follow-up to #2406769: Composite form elements, 'for' attributes and labelable elements fix

Same thing as that issue but for wetkit_bootstrap. I also improved/simplified the code.

First some context

Composite elements

are a type of element who have multiple elements under a top label.

  • checkboxes
  • radios
  • dates
  • etc...

Labelable elements

Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.

button
input (if the type attribute is not in the Hidden state)
keygen
meter
output
progress
select
textarea

Reference: https://html.spec.whatwg.org/multipage/forms.html#category-label

Accessibility issues

Getting accessibility error because composite elements top Label had a for element linking to a unlabelable element (ex: div).

Once the 'for' element was removed, I was getting accesibility warning about a Label without a for element and no context.

After some digging I noticed there used to be a similar fix for composite elements on webforms (https://www.drupal.org/node/2184761).

The form-element-label.theme.inc file in wetkit_omega had code for #composite element but it was seemingly unused now.

Outcome and fix

I modified form-element-label.theme.inc and now when encountering a composite element label:

  • Remove the 'for' element
  • Change the top Label element to a span

Comments

ptsimard created an issue. See original summary.

ptsimard’s picture

Status: Closed (fixed) » Needs review
FileSize
5.26 KB

I forgot to mention that unlike the omega patch, this one includes radio and checkbox theme overrides. This means that screen readers will read the group label as well as the individual radio/checkbox label via aria-labelledby

sylus’s picture

Status: Needs review » Fixed

Committed and attributed,

Thanks a bunch!

sylus’s picture

Version: 7.x-1.x-dev » 7.x-4.x-dev

  • sylus committed f114d8a on 7.x-4.x authored by ptsimard
    Fixed WetKit Bootstrap for Issue #2690309 by ptsimard: Composite form...

Status: Fixed » Closed (fixed)

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