Page MenuHomePhabricator

Special:Search should use <h*> and maybe a <p>
Open, Needs TriagePublic

Description

I was thinking about the DOM in search in the context of T320295: Special:Search should not use <table> and I think there are maybe some other improvements besides the flex there.

Assuming a DOM as implemented there:

<ul class="mw-search-results">
  <li class="mw-search-result mw-search-result-ns-0 searchResultImage">
    ...
    <div class="searchResultImage-text">
      <div class="mw-search-result-heading">
        <a href="/wiki/Mecca" title="Mecca" data-serp-pos="0">Mecca</a>
      </div>
      ...
      <div class="mw-search-result-data">97 KB (10,753 words) - 09:06, 7 October 2022</div>
    </div>
  </li>
  ...
</ul>

Firstly, I think <h*> (<h2> maybe) should be used for the heading (<div class="mw-search-result-heading">). It's in the name of the class even.

Second, I think it could be argued that the <div class="mw-search-result-data"> would be better as a <p>. So something like this ultimately:

<ul class="mw-search-results">
  <li class="mw-search-result mw-search-result-ns-0 searchResultImage">
    ...
    <div class="searchResultImage-text">
      <h2 class="mw-search-result-heading">
        <a href="/wiki/Mecca" title="Mecca" data-serp-pos="0">Mecca</a>
      </h2>
      ...
      <p class="mw-search-result-data">97 KB (10,753 words) - 09:06, 7 October 2022</p>
    </div>
  </li>
  ...
</ul>

This would probably lead naturally to some future where CSS grid is supported at grade C and then the <ul><li>...</li></ul> could also be removed in favor of grid, since the necessary accessibility markers (headings) would be available to move around the page.