Accessibility Bug

[long2know]

Currently, when the mat-select w/ ngx-mat-select-search is expanded, the number of items is misreported using NVDA.

In the speech viewer, we see something like this upon expansion:

My list    combo box  collapsed  required  invalid entry  Selection is required
expanded
table
My list
(Item1) - Item1 2 of 49
dropdown search  edit  unavailable  Type to filter list by name  blank

In my test, there are actually (48) items and the initial item selected should be (1 of 48).

Additionally, when the items in the list are filtered, there is no announcement of the number of items that are currently in the list. Comparing to other filterable components, such as material typeahead, the number of items that are available are announced in NVDA.

[macjohnny]

@long2know would you like to improve the accessibility?

the relevant code is located here:

ngx-mat-select-search/src/app/mat-select-search/mat-select-search.component.ts

Lines 469 to 500 in 38a93b3

	this.liveAnnouncer.announce(
	activeDescendant.viewValue + ' '
	+ this.getAriaIndex(index)
	+ this.indexAndLengthScreenReaderText
	+ this.getAriaLength()
	);
	}
	}
	}
	/**
	* Calculate the index of the current option, taking the offset to length into account.
	* examples:
	* Case 1 [Search, 1, 2, 3] will have offset of 1, due to search and will read index of total.
	* Case 2 [1, 2, 3] will have offset of 0 and will read index +1 of total.
	*/
	getAriaIndex(optionIndex: number): number {
	if (this.getOptionsLengthOffset() === 0) {
	return optionIndex + 1;
	}
	return optionIndex;
	}
	/**
	* Calculate the length of the options, taking the offset to length into account.
	* examples:
	* Case 1 [Search, 1, 2, 3] will have length of options.length -1, due to search.
	* Case 2 [1, 2, 3] will have length of options.length.
	*/
	getAriaLength(): number {
	return this._options.toArray().length - this.getOptionsLengthOffset();
	}

• the offset should be easy to fix
• the total number of items to be announced should be passed as an input