Skip to content

Fix a bug in <label> handling where 'for_' attribute should be 'htmlFor' on underlying HTML element. #2352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 18, 2025

Conversation

ntoll
Copy link
Member

@ntoll ntoll commented Jun 17, 2025

Description

An HTML label element should have a for attribute to reference the id of the form element to which it applies. This is important for accessibility and CSS reasons.

Until now, in pyscript.web you'd do:

from pyscript.web import label

l = label("Some text", for_="some-id")

Except, this would end up as (note the lack of the for attribute):

<label>Some text</label>

😞

The reason for this is because for is a keyword in both JavaScript and Python. In the HTML Label element class this attribute is actually named htmlFor. Hence the lack of the for_ value sinking down to the HTML element.

Changes

A very simple mapping of for -> htmlFor, along with updated unit tests to ensure it actually works as expected.

Checklist

  • I have checked make build works locally.
  • I have created / updated documentation for this change (if applicable).

@ntoll ntoll requested a review from WebReflection June 17, 2025 18:18
Copy link
Contributor

@WebReflection WebReflection left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both good catch and nice call ... there is an historical similar issue in React around class too, not reflected hence pivoted to className which must be explicit ... I feel like camelCased DOM things might be a bit painful to reason about for Python folks, but I wouldn't mind also some conversion such as html_for => htmlFor and class_name => className so that basically most keywords written in snake cases can become automatically valid DOM identifiers ... this is another story though, just worth mentioning (maybe?) my thoughts around these cases (common in most JS libraries too).

@WebReflection
Copy link
Contributor

just wanted to mention that sooner than later, we could have:

l = t'<label for{"some-id"}>{"Some text"}</label>'

and forget about these cases ;-)

@ntoll ntoll merged commit d68260c into main Jun 18, 2025
2 checks passed
@ntoll ntoll deleted the for_label branch June 18, 2025 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants