accessibility label issue

[irisy1114]

Hi there,

Thanks for continuing supporting this extension! I'm using mtx-select with [searchable]="true" for my project, and it works very well. Here's a sample code:

<mat-form-field>
  <mat-label>Label for mtx select</mat-label>
  <mtx-select [searchable]="true"></mtx-select>
</mat-form-field>

But recently I found it doesn't support the inner nested input element being accessible when tab on it. There's no aria-label assigned to it. I used NVDA as the assistant tool for testing. Would you consider add accessibility support to this extension?

[nzbin]

Yes, I'm refactoring the select and it will be out this week.

[nzbin]

v21.2 released, please check the input attributes and you can also customize the aria-label for input.

/** `aria-label` of the ng-select input. */
@Input('aria-label') ariaLabel: string | null = null;

/** `aria-labelledby` of the ng-select input. */
@Input('aria-labelledby') ariaLabelledby: string | null = null;

/** `aria-describedby` of the ng-select input. */
@Input('aria-describedby') ariaDescribedby: string | null = null;

[nzbin]

v21.2 released, please check the input attributes and you can also customize the aria-label for input.

/** `aria-label` of the ng-select input. */
@Input('aria-label') ariaLabel: string | null = null;

/** `aria-labelledby` of the ng-select input. */
@Input('aria-labelledby') ariaLabelledby: string | null = null;

/** `aria-describedby` of the ng-select input. */
@Input('aria-describedby') ariaDescribedby: string | null = null;

[irisy1114]

Thanks for the updates! I updated the version on my project to v21.2, and tried to use the inputs that are newly added, but then I got error of NG8002

NG8002: Can't bind to 'ariaDescribedby' since it isn't a known property of 'mtx-select'.
1. If 'mtx-select' is an Angular component and it has 'ariaDescribedby' input, then verify that it is included in the '@Component.imports' of this component.
2. If 'mtx-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

I also tested the provided examples , it does work(using NVDA) when there's mat-label bind, and don't need to pass the input at all on first tab. But when there's a selected value, it doesn't read the selected value, it only reads the original mat-label. For example, I tested with the first example, it reads as: "Select Food combo box collapsed has auto complete editable Choose your favorite food blank" even when there's a selected value.
As I inspect, there's a aria-labelledby now on the inner input of the mtx-select, which is tied to the mat-label.

So, is it possible to make it read the selected value instead of the original label when the dropdown value is selected or updated?

[nzbin]

1. The ariaDescribedby has a alias name @Input('aria-describedby'), so you should bind [aria-describedby]
2. Yes, it's possible to read the selected value, but it's a hard work. I'll give it a try. Maybe you can implement it with ariaDescribedby by yourself if you're in a hurry.

[irisy1114]

Thanks!
The updates did help with the label issue now, if it reads the selected value or support the accessibility when tabbing through the values in the dropdown, that'll be great!

Thanks again for your effort looking and maintaining it!