From a070c2c88ad841ceaf2cfcea8c38703bae078bd3 Mon Sep 17 00:00:00 2001
From: Stan Grishin <stangri@melmac.ca>
Date: Wed, 4 Mar 2026 01:55:13 +0000
Subject: [PATCH] luci-base: fix label association warning for Dropdown widget

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>
---
 modules/luci-base/htdocs/luci-static/resources/form.js | 2 +-
 modules/luci-base/htdocs/luci-static/resources/ui.js   | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js
index 3d87b3d7861b..02fdc404d204 100644
--- a/modules/luci-base/htdocs/luci-static/resources/form.js
+++ b/modules/luci-base/htdocs/luci-static/resources/form.js
@@ -4451,7 +4451,7 @@ const CBIValue = CBIAbstractValue.extend(/** @lends LuCI.form.Value.prototype */
 					'for': 'widget.cbid.%s.%s.%s'.format(config_name, section_id, this.option),
 					'click': (ev) => {
 						const node = ev.currentTarget;
-						const elem = node.nextElementSibling.querySelector(`#${node.getAttribute('for')}`) ?? node.nextElementSibling.querySelector(`[data-widget-id="${node.getAttribute('for')}"]`);
+						const elem = node.nextElementSibling.querySelector(`[data-widget-id="${node.getAttribute('for')}"]`) ?? node.nextElementSibling.querySelector(`#${node.getAttribute('for')}`);
 
 						if (elem) {
 							elem.click();
diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 706cc7f13b19..f6c243f6e5dc 100644
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -1090,9 +1090,18 @@ const UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ {
 			'multiple': this.options.multiple ? '' : null,
 			'optional': this.options.optional ? '' : null,
 			'disabled': this.options.disabled ? '' : null,
+			'data-widget-id': this.options.id ? `widget.${this.options.id}` : null,
 			'tabindex': -1
 		}, E('ul'));
 
+		if (this.options.id)
+			sb.appendChild(E('select', {
+				'id': `widget.${this.options.id}`,
+				'style': 'display:none',
+				'aria-hidden': 'true',
+				'tabindex': -1
+			}));
+
 		let keys = Object.keys(this.choices);
 
 		if (this.options.sort === true)