[igx-drop-down-item] Aria-label defaults to an ID value

[jamesuhl]

Description

Unless a value for the aria-label is explicitly set, the default behavior of the igx-drop-down component is to set the aria-label to the ID of the <igx-drop-down-item> element, which is announced to the screen reader.

• igniteui-angular version: 19
• browser: all

Steps to reproduce

1. Add the igx-drop-down component to project. Use default settings.
2. Analyze code in dev tools or use a screen reader. The screen reader will announce the ID when the component receives focus. The image below is from the Infragistics website.
   

Result

The screen reader announces the ID

Expected result

The screen reader should announce the option

Solution

The default value should not be an ID. Remove the aria-label from the <igx-drop-down-item>. Let the screen reader announce the text inside the <igx-dropdown-down__inner>. (Test. This should work). If not, set the aria-label equal to the text inside the <igx-dropdown-down__inner> by default.

[IvanKitanov17]

Hello @jamesuhl, this is actually by design, the way the aria-label is set to the igx-drop-down-item is the following:

It checks if a label is set with the following property - [ariaLabel].
If the property is not set, it checks if a value is set with this property - [value].
Otherwise it defaults to the id of the igx-drop-down-item.

So in order to have aria-label that is different than the id of the igx-drop-down-item, you would have to set either the ariaLabel or the value properties. In the case of the sample you mentioned above, either of these lines should be sufficient:

<igx-drop-down-item [ariaLabel]="item.field">

OR

<igx-drop-down-item [value]="item.field">

[jamesuhl]

The value of an aria-label should never be an ID. If you're going to default to an ID, then use an aria-labelledby. (but since that would be a self-referencing ID, the 'aria-' attribute is of no use). What needs to happen if [ariaLabel] and [value] are not set is to not use aria-label at all and let the screen reader announce the text within <span class="igx-dropdown___inner"> (I believe that will work--need to test).