[Medium] Chrome+JAWS: Form fields are not associated with their visible label.

[SumitDiyora]

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate to Settings > Workspace > Reimburse expenses.
3. Navigate to the "Rate" and "Unit" form fields using the screen reader.
4. Observe the screen reader announcement.

Expected Result:

The visible label of a form field is programmatically associated with its form field so that assistive technology announces the label with the form field.

Actual Result:

The 'Rate' and 'Unit' form fields are not announced with their visible labels. Screen reader only read the value of the 'INR' and 'mile/km', not reading the Label 'Rate' and 'Unit' along with the value.

HTML code:
<label dir="auto" ...>Rate</label> (...) <input autocorrect="off" autocapitalize="sentences" autocomplete="off" dir="auto" spellcheck="false" inputmode="decimal" class="css-11aywtz r-13awgt0 r-tz77pi r-13qz1uu" value="" style="border-radius: 8px; border-width: 0px; box-shadow: none; color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; line-height: 20px; outline-width: 0px; padding: 23px 11px 8px;">

Other Occurrences:
Similar issues repro on PR #8253, #8196, #8832, #8831, #9046, #9118

Workaround:

Yes

Area issue was found in:

Track distance

Failed WCAG checkpoints

1.3.1

User impact:

Users may not be able to fill out form fields and use the functionality correctly, if there is no label associated with its field.

Suggested resolution:

Provide unique and descriptive label for each form control using element. This will help screen reader users to understand the purpose of each form control and input the details accordingly. Web pages that lack label for form controls make it difficult for screen reader users to complete the form successfully.
In addition, associate the label explicitly with the form control using the “for” and “id” attribute to ensure that assistive technologies identify the label for each form control correctly.

<label for="rate" dir="auto" ...>Rate</label> (...) <input id="rate" autocorrect="off" autocapitalize="sentences" autocomplete="off" dir="auto" spellcheck="false" inputmode="decimal" class="css-11aywtz r-13awgt0 r-tz77pi r-13qz1uu" value="" style="border-radius: 8px; border-width: 0px; box-shadow: none; color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; line-height: 20px; outline-width: 0px; padding: 23px 11px 8px;">

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.49-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/tutorials/forms/labels/
Issue reported by: Sumit

[melvin-bot]

@SumitDiyora, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.