search

department-of-veterans-affairs / va.gov-cms

Editor-centered management for Veteran-centered content.
https://prod.cms.va.gov
GNU General Public License v2.0
99 stars 69 forks source link

Defect 4 - High - CAP Hours Table navigation #19374

Open srancour opened 1 month ago

srancour commented 1 month ago

Description or Additional Context

9/16/2024: The Hours Table for entering CAP hours does not have a way for the screen reader user to tell which From To hours are for which days. WHen focus is put on the From or To time component, there is no way to know which day it is for. You can navigate the table to READ the information but as soon as you try to edit one of the fields you cannot get back into table mode to use table commands without exiting the entire component.

Example

The table used on the Vet Center add page for the hours input has no programatic connection to the row header. Screenshot of the table on the add a vet center page

Code snippet

Table element 

<table data-drupal-selector="edit-field-office-hours" id="edit-field-office-hours" class="responsive-enabled" data-striping="1" data-once="tableresponsive">

Table row 

<tr data-drupal-selector="edit-field-office-hours-0" class="form-item office-hours-slot js-office-hours-day-1 even" office_hours_day="1" id="edit-field-office-hours-0">
  <td>
    <div class="office-hours-label">Monday</div>
    <input data-drupal-selector="edit-field-office-hours-0-day" type="hidden" name="field_office_hours[0][day]" value="1">
  </td>
  <td>
    <div class="form-item form-datetime-wrapper">
      <div id="edit-field-office-hours-0-starthours" data-drupal-field-elements="date-time" class="form-items-inline">
        <div class="js-form-item form-item js-form-type-date form-type--date js-form-item-field-office-hours-0-starthours-time form-item--field-office-hours-0-starthours-time form-item--no-label">
          <label for="edit-field-office-hours-0-starthours-time" class="form-item__label visually-hidden">Time</label>
          <input data-drupal-selector="edit-field-office-hours-0-starthours-time" type="time" step="60" title="Time, with an increment of one minute (e.g. 16:46)" data-msg-step="The value in Time has to be divisible by 60." placeholder="hh:mm:ss" data-help="Enter the time using the format hh:mm:ss (e.g., 16:45)." id="edit-field-office-hours-0-starthours-time" name="field_office_hours[0][starthours][time]" size="12" class="form-time form-element form-element--type-time form-element--api-date">
        </div>
      </div>
    </div>
  </td>
  <td>
    <div class="form-item form-datetime-wrapper">
      <div id="edit-field-office-hours-0-endhours" data-drupal-field-elements="date-time" class="form-items-inline">
        <div class="js-form-item form-item js-form-type-date form-type--date js-form-item-field-office-hours-0-endhours-time form-item--field-office-hours-0-endhours-time form-item--no-label">
          <label for="edit-field-office-hours-0-endhours-time" class="form-item__label visually-hidden">Time</label>
          <input data-drupal-selector="edit-field-office-hours-0-endhours-time" type="time" step="60" title="Time, with an increment of one minute (e.g. 16:46)" data-msg-step="The value in Time has to be divisible by 60." placeholder="hh:mm:ss" data-help="Enter the time using the format hh:mm:ss (e.g., 16:45)." id="edit-field-office-hours-0-endhours-time" name="field_office_hours[0][endhours][time]" size="12" class="form-time form-element form-element--type-time form-element--api-date">
        </div>
      </div>
    </div>
  </td>
  <td>
    <div class="js-form-item form-item js-form-type-textfield form-type--textfield js-form-item-field-office-hours-0-comment form-item--field-office-hours-0-comment form-item--no-label">
      <label for="edit-field-office-hours-0-comment" class="form-item__label visually-hidden">A Comment for this time slot</label>
      <input data-drupal-selector="edit-field-office-hours-0-comment" data-msg-maxlength="A Comment for this time slot field has a maximum length of 255." type="text" id="edit-field-office-hours-0-comment" name="field_office_hours[0][comment]" value="" size="20" maxlength="255" class="form-text form-element form-element--type-text form-element--api-textfield">
    </div>
  </td>
  <td>
    <div class="js-office-hours-operations-wrapper">
      <a href="/" class="office-hours-link" data-drupal-selector="edit-field-office-hours-0-operations-data-clear" id="edit-field-office-hours-0-operations-data-clear">Clear</a>
      <a href="/" class="office-hours-link" data-drupal-selector="edit-field-office-hours-0-operations-data-copy" id="edit-field-office-hours-0-operations-data-copy">Copy last day</a>
    </div>
  </td>
</tr>

Steps to reproduce

Navigation: Home -> Node -> Add Content -> Create Vet Center Use screen reader to land on "From" and "To" inputs to hear no information about which day the input is for.

Recommended resolution

One fix would be to put the weekday in the tab order so as you tabbed through the components, you would hear the day. Another fix would be to put the day in the label of the components (to, from and comment) so it would be clear which component was for which day.

This also seems to be similar to the already captured issue CMS data tables missing scope attributes and the comment on #17718.

This particular instance of the issue is in a table that sitewide owns however this should be done throughout all tables in the CMS so this could be seen as a global issue that the cms team should own.

Defect Criterion

WCAG 1.3.1 - Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Users affected

Teams that this affects:

gracekretschmer-metrostar commented 1 month ago

Next steps: Steve partner with Laura to determine ownership over resolution.