Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: ion-label of ion-textarea duplicates ion-input id attribute - Accessibility Issues #20515

Open
albernaz opened this issue Feb 17, 2020 · 1 comment
Labels

Comments

@albernaz
Copy link

@albernaz albernaz commented Feb 17, 2020

Bug Report

Ion-Textarea inside a normal form ... with previous inputs ...

      <!-- Email -->
      <ion-item>
        <ion-label position="floating"
          >Email
        </ion-label>
        <ion-input
          aria-required="true"
          formControlName="email"
          name="email"
          type="email"
          clearInput
          required
        ></ion-input>
      </ion-item>

      <!-- Subject -->
      <ion-item>
        <ion-label position="floating"
          >Subject
        </ion-label>
        <ion-textarea
          aria-required="true"
          auto-grow="true"
          formControlName="subject"
          type="text"
        ></ion-textarea>
      </ion-item>

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:

insert short code snippets here

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.15 (C:\Users\Fabiano Lemos\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.7
   OS     : Windows 10
@ionitron-bot ionitron-bot bot added the triage label Feb 17, 2020
@albernaz
Copy link
Author

@albernaz albernaz commented Feb 17, 2020

Solution:
https://github.com/ionic-team/ionic/blob/master/core/src/components/textarea/textarea.tsx
line 22
private inputId = ion-input-${textareaIds++};
changes to
private inputId = ion-textarea-${textareaIds++};

and in line 315-316 add
aria-labelledby={labelId}

It should work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant
You can’t perform that action at this time.