Labels are not correctly associated with some form inputs

[krisztin]

Description

Some inputs/fields are not correctly associated with a label which means users with screen readers have no idea what they are.

Accessibility info

These inputs fail WCAG Success Criterion:
1.3.1 Info and Relationships
4.1.2 Name, Role, Value

Expected Behavior

When a user with a screen reader tabs into an input, they should hear its proper label that makes it clear what the purpose of that input/field is.

Actual Behaviour

Fields (if accessible by tabbing through the form at all, which is another issue I'm prepping 😬️) do not give any usable info to screen readers.

Steps to Reproduce

/admin/orders have a couple of unlabelled inputs (labels missing for attributes):

• Date range
• Status
• Shipping method
• Distributors
• Order cycles

Testing tools you can use

1. Steeper learning curve, interesting insight - Screen readers
   System ones are OK:

• Ubuntu - screen reader under the Accessibility settings
• Mac - Voiceover
• Windows - Narrator

More robust and free:

• Windows - NVDA

OR

2. Less involved, still interesting - ANDI, a handy script created by the US Social Security Administration. Perfect for quick tests. ANDI output shows you what screen readers will "say" to users (see below under screenshots)

OR

3. Programmatically check that all inputs have a correct label for= assigned to their ids

Screenshots

An empty output giving users no information:

Correct ANDI output with "Search Order number"

Severity

bug-s2/s3 - for users with screen readers

Possible Fix

Update all labels with nil values to associate with their respective input's ids. From a cursory look there are 68 label_tag nils