[a11y]: label-has-for vuejs-accessibility - address cases where this eslint rule is disabled in arpa_reporter

[lsr-explore]

Why is this issue important?

If a label is not associated with a form control, a screen reader user may not know what to enter into the control.

vuejs-accessibility displayed errors in some cases where elements did not wrap the element it was labelling. These rules were disabled.

vuejs-accessibility documentation for label-has-for

W3C Labelling Controls.

Current State

Rules are disabled in the code

Steps to reproduce to identify cases where this rule was disabled.

1. Search for "vuejs-accessibility/label-has-for" in the code

Cases
arpa_reporter

• components/StandardForm.vue
• views/UploadsView.vue. (two cases)

views

• ArpaAnnulaPerformanceReporterView.vue
• LoginView.vue
  

Expected State

No rules should be disabled in the code.

Implementation Plan

Next Steps

• Confirm that a screen reader correctly announces the label when the associated controls have focus
• If the screen reader is correct, file a ticket with the eslint-plugin-vuejs-accessibility github project

Relevant Code Snippets