Can't click "Published" label to change value of corresponding checkbox

Created on 15 November 2023, 8 months ago
Updated 4 January 2024, 6 months ago

Problem/Motivation

On a node edit form where "Published" is enabled in Form Display (and where content moderation isn't interfering with that), one can't click the <label> element (i.e. the word "Published") in order to change the value. One instead has to click exactly on the <input> itself.

The cause is related to the fact that even though the label's for attribute is set to edit-status-value, the input's id value, despite also being "edit-status-value" if viewing page source, is seemingly getting converted by something (I assume JS) to edit-status-value--gin-edit-form as seen via the browser Inspector.

I can't reproduce in Claro, nor in the term edit form (where the "Published" checkbox isn't at top), and doesn't matter if changing the "Published" widget to radios (those are similarly broken). I'm also not reproducing this problem on other checkboxes on the node edit form, e.g. "Generate automatic URL alias" or those for content fields.

Although for me personally this is a minor annoyance, it's an a11y issue both in terms of leaving a smaller clickable area and in terms of assistive technology not necessarily being able to programmatically relate the input to its label (e.g. screen readers might not be able to tell the user what the checkbox does (VoiceOver, for example, just announces "checked, checkbox" when I tab to it)).

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States maxstarkenburg

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024