luci-base: fix label association warning for Dropdown widget#8382
Open
stangri wants to merge 1 commit intoopenwrt:masterfrom
Open
luci-base: fix label association warning for Dropdown widget#8382stangri wants to merge 1 commit intoopenwrt:masterfrom
stangri wants to merge 1 commit intoopenwrt:masterfrom
Conversation
This comment has been minimized.
This comment has been minimized.
Contributor
|
A bit of a can of worms here. I can only reproduce this on Chrome which generates those notices, and I cannot seem to silence the notice with this change alone. The checkboxes which use 'label' for the text label (also) generate the notice. |
Add a hidden <select> element with the expected widget ID inside the Dropdown container, providing a proper labelable element for the <label for="..."> association. This resolves browser DevTools accessibility warnings about mismatched label-to-element associations. Also swap the querySelector priority in the label click handler to prefer data-widget-id (the interactive dropdown div) over the element ID (now matching the hidden select), ensuring label clicks still correctly open the dropdown. Signed-off-by: Stan Grishin <stangri@melmac.ca>
9c347df to
a070c2c
Compare
Member
Author
|
@systemcrash sorry, you're right, the previous commit alone, wasn't sufficient. Just double-checked that this fixes the console errors on Chrome when using MultiValue widgets in luci apps. |
Failed checksIssues marked with an ❌ are failing checks. Commit a070c2c
For more details, see the full job log. Something broken? Consider providing feedback. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
data-widget-idattribute to the Dropdown widget's container<div>, matching the pattern already used by Checkbox (ui.jsline 647)renderFrame()'s existing fallback selector (form.jsline 4454) to find the widget, resolving browser console accessibility warningsProblem
The Dropdown widget renders as a
<div>, which is not a labelable HTML element. When used withMultiValueor other dropdown-based form options,renderFrame()creates a<label for="widget.cbid...">but no element with thatidordata-widget-idexists in the Dropdown output.This causes browser DevTools to report:
<label>element with aforattribute doesn't match any element id"Fix
Single-line addition — add
data-widget-idtoUIDropdown.render():This leverages the existing fallback mechanism in
renderFrame():Test plan
MultiValuewidget (e.g., any app with a multi-select dropdown)🤖 Generated with Claude Code