Skip to content

luci-base: fix label association warning for Dropdown widget#8382

Open
stangri wants to merge 1 commit intoopenwrt:masterfrom
stangri:fix/dropdown-label-association
Open

luci-base: fix label association warning for Dropdown widget#8382
stangri wants to merge 1 commit intoopenwrt:masterfrom
stangri:fix/dropdown-label-association

Conversation

@stangri
Copy link
Copy Markdown
Member

@stangri stangri commented Mar 4, 2026

Summary

  • Add data-widget-id attribute to the Dropdown widget's container <div>, matching the pattern already used by Checkbox (ui.js line 647)
  • This allows renderFrame()'s existing fallback selector (form.js line 4454) to find the widget, resolving browser console accessibility warnings

Problem

The Dropdown widget renders as a <div>, which is not a labelable HTML element. When used with MultiValue or other dropdown-based form options, renderFrame() creates a <label for="widget.cbid..."> but no element with that id or data-widget-id exists in the Dropdown output.

This causes browser DevTools to report:

  • "A <label> element with a for attribute doesn't match any element id"

Fix

Single-line addition — add data-widget-id to UIDropdown.render():

'data-widget-id': this.options.id ? `widget.${this.options.id}` : null,

This leverages the existing fallback mechanism in renderFrame():

const elem = node.nextElementSibling.querySelector(`#${node.getAttribute('for')}`)
    ?? node.nextElementSibling.querySelector(`[data-widget-id="${node.getAttribute('for')}"]`);

Test plan

  • Open any LuCI page using MultiValue widget (e.g., any app with a multi-select dropdown)
  • Check browser DevTools console — label association warning should no longer appear
  • Verify clicking the label text still focuses/opens the dropdown

🤖 Generated with Claude Code

@stangri stangri requested review from hnyman and systemcrash March 4, 2026 01:57
@github-actions

This comment has been minimized.

@systemcrash
Copy link
Copy Markdown
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>
@stangri stangri force-pushed the fix/dropdown-label-association branch from 9c347df to a070c2c Compare March 8, 2026 03:06
@stangri
Copy link
Copy Markdown
Member Author

stangri commented Mar 8, 2026

@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.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 8, 2026

Warning

Some formality checks failed.

Consider (re)reading submissions guidelines.

Failed checks

Issues marked with an ❌ are failing checks.

Commit a070c2c

  • 🔶 Commit subject length: recommended max 50, required max 60 characters

For more details, see the full job log.

Something broken? Consider providing feedback.

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