Andrew Nevins

An update for issue #2.

I understand what’s going on now. The underlying issue is due to a somewhat incorrect implementation of the <label> element.

While the <label> element is meant to programmatically associate labels with form fields, it’s intended for visible labels.

In addition, something I hadn’t spotted earlier but is also problematic, the <label> has a tabindex="0" attribute. That’s not right or needed because the <label> interaction is redundant. The only interaction a keyboard user should experience in the context of a form control is on the control itself.

Considering this, I recommend two options:

Option A: remove the <label> and use aria-labelledby with the pre-existing category text.

Option B: If that isn’t possible, remove the tabindex="0" attribute on the <label> and then replace display: none CSS styles on the inner contents of the <label> with visually-hidden styles.


Option B HTML example

 <label for="..."> <span> ... </span> </label>

Option B CSS example:

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox label > span {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

• This reply was modified 10 months ago by Andrew Nevins.