select

Better select widgets in vanilla javascript.  https://p.ce9e.org/select/demo/
git clone https://git.ce9e.org/select.git

commit
aeef43ac9db5494f19ff204a07587008dbe1fafe
parent
47499a5b034f8db6d46e6c790d3b95a56ec996af
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2021-03-28 05:35
set aria attributes on option

Diffstat

M select.js 5 ++++-

1 files changed, 4 insertions, 1 deletions


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

@@ -85,8 +85,10 @@ export class Select {
   85    85 	update() {
   86    86 		if (this.focus !== -1 && this.dropdown.children.length) {
   87    87 			Array.from(this.dropdown.children).forEach((li, i) => {
   -1    88 				var op = this.original.options[this.indexMap[i]];
   88    89 				li.classList.toggle('select--has-focus', i === this.focus);
   89    -1 				li.classList.toggle('select--selected', this.original.multiple && this.original.options[this.indexMap[i]].selected);
   -1    90 				li.classList.toggle('select--selected', this.original.multiple && op.selected);
   -1    91 				li.setAttribute('aria-selected', op.selected);
   90    92 			});
   91    93 			this.wrapper.setAttribute('aria-expanded', 'true');
   92    94 			this.input.setAttribute('aria-activedescendant', this.id + '_option_' + this.indexMap[this.focus]);
@@ -128,6 +130,7 @@ export class Select {
  128   130 				var li = document.createElement('li');
  129   131 				li.id = this.id + '_option_' + i;
  130   132 				li.textContent = op.label;
   -1   133 				li.setAttribute('role', 'option');
  131   134 				li.onclick = () => {
  132   135 					this.setValue(i, this.original.multiple);
  133   136 					this.input.focus();