[High] Chrome: Screen reader: Missing label for input field. #8432

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate to Any 'chat room'.
3. Navigate to the "Write something..." input field using the Tab key.
4. Observe the screen reader announcement.

Expected Result:

A meaningful label should be announced for these input fields to the screen reader users.

Actual Result:

Label is not provided for the input field "Write something...". As a result, screen reader users will not understand the purpose of the fields. This made it difficult for users with visual impairments to understand the purpose of the input field.

Other occurrences:
Similar type of issue repro on PR's #8022, #8039, #8226, #8019, #8195, #8117, #8340, #8443, #8452, #8448, #7362, #8256, #8375, #8521, #8585, #8672, #8694, #8634, #8828, #8844, #8804, #9082, #9094, #9203, #8569, #9031, #9534

Workaround:

Yes

Area issue was found in:

All pages of the Expensify application were "Enter message here" and "Enter your default contact method" input fields appearing.

Failed WCAG checkpoints

1.3.1

User impact:

The placeholder is a short hint intended to aid the user with data entry and may not be available to assistive technology and thus may not be relied upon to convey an accessible name or description; it acts similar to fallback content.

Suggested resolution:

Provide unique and descriptive label for each form control using element. This will help screen reader users to understand the purpose of the 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.
Apply the following:

• Mark-up the mentioned visual label such as "Write something..." within a <label> element.
• Specify the 'for' and ‘id’ attributes for association to the and elements respectively.

Alternatively, use aria-label to provide a descriptive label. This will help screen reader users to understand the purpose of the input fields.

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