Hours tables need more detailed accessible names for input fields

[laflannery]

Description

The tables module that is used for creating hours on Facilities doesn't have specific enough labels for the Time input elements, this can cause confusion for someone using assistive technology.

Currently, for each input field where a time should be entered, the <label> is just Time. That makes sense, it is logical, however when there are 14 fields with the same label, that's where it get's a bit confusing. We need to add additional context to these labels to indicate which day and if it's the From or To time each field is for.

Where is this issue present

This is present on instances of the hours table:

• Vet Center - Outstation
• Vet Center - Mobile Vet Center
• Vet Center
• Vet Center - Community Access Point
• VAMC Facility
• VAMC System Billing and Insurance
• VBA Facility
• NCA Facility

Steps for implementation

1. Remove the title attribute
   • This is an additional and unnecessary attribute that only adds noise
2. Update the From and To column headers change to Opening Time and Closing Time (respectively) as this is more descriptive and clear
3. Add additional context. This can be done in a couple ways. I'm not sure if there are technical limitations so I'm providing both:
   1. Update the <label> element for each field to include the necessary context. For example:
      • Opening time on Monday
      • Closing time on Monday
      • Opening time on Tuesday
      • etc.
   2. Use aria-labelledby on the <input> to point to both the column header and the row header
      1. Remove the <label> element for each <input>
      2. On the <th> for Opening time and the <th> for Closing time an a unique id
      3. On each <div> that contains the day of the week, add a unique id
      4. On each <input> add aria-labelledby="{opening/closingID} {dayOfTheWeekID}

Screen shot of IDs on Opening and Closing headers

Screen shot of ID on Monday

Screen shot of first time field
Notice that there is no label and no title attribute

Acceptance Criteria

• All time input fields have an accessible name that provides necessary contextual information
• Column headers for time have been updated to "Opening time" and "Closing time"
• All title attributes have been removed
• Requires accessibility review

[laflannery]

@EWashb I closed the other issue you tagged me in (#19374) and created a new issue because it was cleaner and because the issue is with all hours tables.

[laflannery]

@jilladams @Agile6MSkinner This is an accessibility issue that is for all the hours tables in the Facilities products in Drupal. It came from the 508 Audit that was done last year and we are cleaning up now. I'm not sure what your capacity is currently but if you were able to take a look and let me know I can pass that along to the 508 Office.

CC: @mmiddaugh @EWashb