Content of test plan status summary table cells is not semantically structured so is difficult for screen reader users to understand

[mcking65]

This bug is present in the sandbox on July 28.

To reproduce:

1. Open the data management page.
2. Examine any cell that contains multiple data elements, such as in the candidate review column for the alert test plan.

Actual result:

The candidate review column content for the alert test pattern is presented to screen readers as a link followed by a string with words that are run together. Users cannot distinguish one data element from another.

V22.12.08
0 Open IssuesTarget 295 Days Past

Expected Result:

The content of the cell is semantically structured so it is possible to understand it contains three separate data elements. For example, it could be presented as a list:

• V22.12.08
• 0 Open Issues
• Target 295 Days Past

The HTML for this cell is:

<td>
  <div class="css-i0ihz8"><span class="version-string"><a
        href="/aria-at/0928bcf530efcf4faa677285439701537674e014/build/review/alert.html" target="_blank"
        rel="noreferrer"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-check"
          class="svg-inline--fa fa-circle-check " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          color="#2BA51C">
          <path fill="currentColor"
            d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z">
          </path>
        </svg><b>V22.12.08</b></a></span><span class="more"><span class="more-issues-container"><span
          class="issues css-1ghojnj"></span> 0 Open Issues</span><span class="target-days-container">Target <b>295
          Days</b> Past</span></span></div>
</td>

There are several options for coding this. Typically, a ul with 3 li elements is preferable. However, if that complicates styling, you could add role="list" on the div containing the cell content and then put role="listitem" on child spans that represent each item. Note: It is important that list semantics are not used in cells that contain only one data element. So, the list markup must be used conditionally. Here is how the above HTML could be modified.

<td>
  <div class="css-i0ihz8" role="list">
    <span role="listitem" class="version-string">
      <a
        href="/aria-at/0928bcf530efcf4faa677285439701537674e014/build/review/alert.html"
        target="_blank"
        rel="noreferrer">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-check"
            class="svg-inline--fa fa-circle-check " role="img" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
          color="#2BA51C">
            <path fill="currentColor"
              d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z">
          </path>
        </svg>
        <b>V22.12.08</b>
      </a>
    </span>
    <span class="more">
      <span role="listitem" class="more-issues-container">
        <span class="issues css-1ghojnj"> </span> 0 Open Issues
      </span>
      <span role="listitem" class="target-days-container">Target <b>295 Days</b> Past</span>
    </span>
  </div>
</td>

[howard-e]

@mcking65 this is now on staging (and sandbox)

[mcking65]

Confirmed that this issue is resolved in staging and that it can be closed after deployment. Note that I did find a similar issue documented in #783.

[ccanash]

This has been released to production