accessibility - aria-label Attribute Not Read by Screen Reader in Ionic 5 ion-input

Question

The aria-label attribute does not seem to be working in an Ionic 5 tag, as it registers as empty with a screen reader. I'm using the Mac OS Accessibility Inspector so I can view and listen to elements as they are read, but the behavior is the same with a device's voiceover app. The aria-label does, however, work in a regular HTML tag. Here's a code example which should be easily reproducible:

  <input aria-label="html input" /><!-- Label is read by screen reader -->
  <ion-input aria-label="ion input"></ion-input><!-- Label is not read by screen reader -->
  <ion-input [attr.aria-label]="'ion input'"></ion-input><!-- Label is not read by screen reader -->

If anyone has run into this before and can recommend a solution it would be appreciated.

Technologies Used:

Ionic CLI : 5.4.16 Ionic Framework : @ionic/angular 5.5.1

Mac OS Accessibility Inspector v5.0

question from:https://stackoverflow.com/questions/65617318/aria-label-attribute-not-read-by-screen-reader-in-ionic-5-ion-input

Answer 1

Waitting for answers