select

commit

aeef4f819f4459114c291a6922ba4f584a2e4756

parent

e9d498df267cf94a69b418a27cb643cab5c15b63

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2025-09-02 16:05

fix: activedescendants must be owned or controlled

see https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant

Diffstat

2 files changed, 4 insertions, 0 deletions

diff --git a/select.js b/select.js

@@ -25,14 +25,17 @@ export class Select {
   25    25 		this.wrapper = create('<div class="select">');
   26    26 		this.input = create('<input role="combobox" aria-expanded="false" aria-has-popup="listbox" aria-autocomplete="list" autocomplete="off">');
   27    27 		this.dropdown = create('<ul class="select__dropdown" role="listbox" tabindex="-1">');
   -1    28 		this.dropdown.id = `${this.id}-dropdown`;
   28    29 
   29    30 		if (this.original.multiple) {
   30    31 			var inputWrapper = create('<div class="select__input">');
   31    32 			inputWrapper.append(this.input);
   32    33 			this.values = new Values(this.input, `${this.id}-values`, this.valueClass, this.valueFocusClass);
   33    34 			this.wrapper.append(inputWrapper);
   -1    35 			this.input.setAttribute('aria-controls', `${this.dropdown.id} ${this.values.el.id}`);
   34    36 		} else {
   35    37 			this.wrapper.append(this.input);
   -1    38 			this.input.setAttribute('aria-controls', this.dropdown.id);
   36    39 		}
   37    40 
   38    41 		this.wrapper.append(this.dropdown);

diff --git a/tags.js b/tags.js

@@ -34,6 +34,7 @@ export class TagInput {
   34    34 		this.inputWrapper.append(this.input);
   35    35 
   36    36 		this.values = new Values(this.input, `${this.id}-values`, this.valueClass, this.valueFocusClass);
   -1    37 		this.input.setAttribute('aria-controls', this.values.el.id);
   37    38 
   38    39 		this.datalist = document.createElement('datalist');
   39    40 		this.datalist.innerHTML = this.original.innerHTML;