I am trying to implement ADA's aria-expanded on select.
<select department="dep">
<option *ngFor="let dep of departments" [value]="dep.name">{{dep.name}}</option>
</select>
Basically when user open dropdown i want aria-expanded = true otherwise false. Is there anyway to do this?
This isn't the correct use of aria-expanded so you don't need to do this.
aria-expanded is designed to indicate when a collapsible section is open or closed on the control that opens / closes it, for example on a treeview.
A <select> does not require this as the association is already created by the element.
Trying to determine if a <select> is open is actually quite difficult and results in loads of hacks.
You only need to use aria-expanded if you build a custom <select> using <div>s and WAI-ARIA but I would advise against this if you are able to make a <select> work for your needs as it is complex and less robust than using a native element. At that point you would need to know whether an item is open or closed anyway to make the custom select work, so toggling would be easy.
