1558691 - [a11y] Make the search result headers headings

Status: RESOLVED FIXED

(Webtools :: Searchfox, enhancement)

Description

[James Teh [:Jamie]]

In bug 1511279, the search result "kinds" (.result-kind) were made into headings. For most result kinds (e.g. Definitions, Uses), results are further divided by file, with each file being a header (tr.result-head). It'd be great if the file was a heading level 3 for accessibility. This would make it more efficient for screen reader users to skip a file containing many matches.

We don't want to mess with the table structure, so we don't want to stick a role="heading" attribute on either the tr or the td element. Ideally, we'd add an h3 element (or if you don't want to deal with the styling that implies, <span role="heading" aria-level="3">) between the td element and the file (wrapping the file). For example:

<tr class="result-head EXPANDO-893764564">
  <td class="left-column"><div class="cpp icon-container"></div></td>
  <td>
    <span role="heading" aria-level="3"> <!-- The new element -->
      <a href="/mozilla-central/source/accessible">accessible</a><span class="path-separator">/</span><a href="/mozilla-central/source/accessible/atk">atk</a><span class="path-separator">/</span><a href="/mozilla-central/source/accessible/atk/AccessibleWrap.cpp">AccessibleWrap.cpp</a>
    </span>
  </td>
</tr>

Comment 1

[James Teh [:Jamie]]

In the interim, I'll probably Greasemonkey this, as it's a serious productivity killer for me.

Web console code to mutate the DOM to make this happen:

for (let head of document.querySelectorAll(".result-head td:not(.left-column)")) {
  const span = document.createElement("span");
  span.setAttribute("role", "heading");
  span.setAttribute("aria-level", "3");
  const children = [...head.childNodes];
  for (let child of children) {
    span.append(child);
  }
  head.append(span);
}

Comment 2

[Andrew Sutherland [:asuth] (he/him)]

I didn't realize this bug was here, but I do now (and have now done a ctrl-f for a11y on the component; I don't see any others, please let me know if you're aware of others that I missed). This should be a quick fix.

Comment 3

[Andrew Sutherland [:asuth] (he/him)]

Attachment: GitHub Pull Request

:Jamie, can you confirm that if you use https://dev.searchfox.org/ that the search results are as desired? https://dev.searchfox.org/mozilla-central/search?path=&q=ServiceWorkerPrivate is a specific example that should work, but you may have your own favorite classes to test with!

Comment 4

[James Teh [:Jamie]]

Yes, that's perfect. You are amazing. Thanks much. :)