bug: Screen Reader reads ion-select just as a button

[kensodemann]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
ion-select when used along with ion-select-option is not read by screen reader software like NVDA screen reader properly. It’s just read as a “button”.

Expected behavior:

As per the violation highlighted by the AXE chrome extension, the combobox role (added by ion-select) should have child elements tagged to with role textbox for accessibility tools to work as expected. However, ion-select-option adds html elements with role as “option”

Related code:
Sample Usage:

<ion-select id="input-user-address-state" formControlName="state">
  <ion-select-option *ngFor="let state of stateList" [value]="state.value">{{state.name}}</ion-select-option>
</ion-select>

Refer to item 1 in the document shared in Slack for further details.
https://ionicteam.slack.com/archives/C7CGXAVTL/p1592319616186200

[liamdebeasi]

It appears that the relationship when using aria-labelledby is broken in the shadow dom. In this instance, using aria-labelledby in the shadow dom and referencing an element outside of the shadow dom does not work. Looks like other people are running into this too: https://developer.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/

I do not know if this is a flaw in the spec, or if this is a bug in browsers. This does not appear to be a bug in the framework. Still investigating.

edit: The aria-lablledby issue is the intended behavior when it comes to the shadow dom. We will need to figure out a solution for this, but the solution may require breaking changes.

[liamdebeasi]

When fixing this, we should also ensure it resolves the second/related issue described in #21601 (comment).

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.