select

commit

f777314391bad52b85b0e6c6d6575df273008dc0

parent

ac628dd89913bc57409b98dbb03c322ccafb6231

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-08-30 12:15

use aria-described-by instead of aria-polite for values

Diffstat

3 files changed, 6 insertions, 4 deletions

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

@@ -28,7 +28,7 @@ export class Select {
   28    28 		if (this.original.multiple) {
   29    29 			var inputWrapper = create('<div class="select__input">');
   30    30 			inputWrapper.append(this.input);
   31    -1 			this.values = new Values(this.input, this.valueClass);
   -1    31 			this.values = new Values(this.input, `${this.id}-values`, this.valueClass);
   32    32 			this.wrapper.append(inputWrapper);
   33    33 		} else {
   34    34 			this.wrapper.append(this.input);

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

@@ -29,7 +29,7 @@ export class TagInput {
   29    29 		this.input.setAttribute('aria-labelledby', labels);
   30    30 		this.wrapper.append(this.input);
   31    31 
   32    -1 		this.values = new Values(this.input, this.valueClass);
   -1    32 		this.values = new Values(this.input, `${this.id}-values`, this.valueClass);
   33    33 
   34    34 		this.datalist = document.createElement('datalist');
   35    35 		this.datalist.innerHTML = this.original.innerHTML;

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

@@ -1,12 +1,14 @@
    1     1 import { create } from './utils.js';
    2     2 
    3     3 export class Values {
    4    -1 	constructor(input, valueClass) {
   -1     4 	constructor(input, id, valueClass) {
    5     5 		this.gap = 4;
    6     6 		this.input = input;
    7     7 		this.valueClass = valueClass || 'select__value';
    8     8 
    9    -1 		this.el = create('<ul class="select__values" aria-live="polite">');
   -1     9 		this.el = create('<ul class="select__values">');
   -1    10 		this.el.id = id;
   -1    11 		input.setAttribute('aria-describedby', this.el.id);
   10    12 		input.before(this.el);
   11    13 
   12    14 		var measureWrapper = create('<div class="select__measure" aria-hidden="true">');