diff options
| author | Jo-Philipp Wich <jo@mein.io> | 2024-02-21 15:30:16 +0100 |
|---|---|---|
| committer | Jo-Philipp Wich <jo@mein.io> | 2024-02-21 15:33:08 +0100 |
| commit | 317ed4a0432b3f57c0cf76e633c180b171b7aae1 (patch) | |
| tree | adcd8c8e4bf0616d209ac77dd9831d667441a20a /modules/luci-base/htdocs | |
| parent | 42bd2af3fe2b3902cf0b48469e155c324ef5322d (diff) | |
luci-base: ui.js: further keyboard navigation improvements for dropdowns
- Ensure that pressing escape within the custom choice input closes the
dropdown list but not the parent modal dialog
- Ensure that added custom choice elements are tabbable
- Retain focus on dropdown when closing dropdown
- Consistently focus input textarea when tabbing into custom choice item
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Diffstat (limited to 'modules/luci-base/htdocs')
| -rw-r--r-- | modules/luci-base/htdocs/luci-static/resources/ui.js | 16 |
1 files changed, 13 insertions, 3 deletions
diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js index 9470130998..d266fc73ce 100644 --- a/modules/luci-base/htdocs/luci-static/resources/ui.js +++ b/modules/luci-base/htdocs/luci-static/resources/ui.js @@ -1458,7 +1458,7 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { li.setAttribute('display', 0); li.setAttribute('selected', ''); - this.closeDropdown(sb, true); + this.closeDropdown(sb); } this.saveValues(sb, ul); @@ -1605,6 +1605,9 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { if (this.options.multiple) this.transformItem(sb, new_item); + if (!new_item.hasAttribute('unselectable')) + new_item.setAttribute('tabindex', 0); + return new_item; }, @@ -1814,7 +1817,7 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { var li = active.nextElementSibling; this.setFocus(sb, li); if (this.options.create && li == li.parentNode.lastElementChild) { - var input = li.querySelector('input'); + var input = li.querySelector('input:not([type="hidden"]):not([type="checkbox"]'); if (input) input.focus(); } ev.preventDefault(); @@ -1875,9 +1878,16 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { if (input.classList.contains('cbi-input-invalid')) return; + this.handleCreateBlur(ev); this.createItems(sb, input.value); input.value = ''; - input.blur(); + break; + + case 27: + this.handleCreateBlur(ev); + this.closeDropdown(sb); + ev.stopPropagation(); + input.value = ''; break; case 38: |