Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upbug: ion-label of ion-textarea duplicates ion-input id attribute - Accessibility Issues #20515
Labels
Comments
|
Solution: and in line 315-316 add It should work. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Bug Report
Ion-Textarea inside a normal form ... with previous inputs ...
Generates id="ion-input-0-lbl"
<ion-label _ngcontent-sah-c4="" position="floating" ng-reflect-position="floating" class="sc-ion-label-md-h sc-ion-label-md-s md label-floating hydrated" id="ion-input-0-lbl">Subject</ion-label>Which duplicates previous ion-input ID.
This causes Lighthouse Audit an issue of Accessibility: [id] attributes on the page are not unique
Also HTML gerated tag textarea misses the aria-labelledby attribute to mach respective label.
<textarea class="native-textarea sc-ion-textarea-md" autocapitalize="none" name="subject" placeholder="" style="height: 53px;"></textarea>This causes Lighthouse Audit another issue of Accessibility: Form elements do not have associated labels
Failing Element > textarea.native-textarea.sc-ion-textarea-md
Ionic version:
[x] 5
Current behavior:
ion-label#ion-input-0-lbl
Expected behavior:
Other ID attribute must be set, like ion-label#ion-textarea-0-lbl
Textarea HTML tag must also include this label: ion-textarea-0-lbl
<textarea **aria-labelledby="ion-textarea-0-lbl"** class="native-textarea sc-ion-textarea-md" autocapitalize="none" name="subject" placeholder="" style="height: 53px;"></textarea>Steps to reproduce:
Related code:
Other information:
Ionic info: