Improve repo file list table semantics for screen readers (second attempt) (#12232)

Unintentionally fixes forgejo/forgejo#11812 per tip https://codeberg.org/forgejo/forgejo/pulls/12232#issuecomment-13580345

---

This is a second attempt to fix https://codeberg.org/forgejo/forgejo/issues/11116. The [first attempt](https://codeberg.org/forgejo/forgejo/pulls/11846) introduced a [regression](https://codeberg.org/forgejo/forgejo/issues/12082) and needed to be [reverted](https://codeberg.org/forgejo/forgejo/pulls/12088).

What's different about this attempt is that several days of extra work have been invested in amending the CSS to ensure that no visual changes slip through as a side-effect of the structural changes to the HTML. This was surprisingly challenging, and I documented much of the journey in https://codeberg.org/henrycatalinismith/forgejo/issues/1.

In summary, the existing version of the "latest commit" row leans heavily on global styles that are universally applied to all `thead` elements inside `table` elements with the `ui` and `table` classes. The nature of the structural HTML changes necessary to fix the accessibility bug (this row can't be inside `thead`) is such that those universal styles no longer apply to this element and must be duplicated into new element-specific styles. Similarly, existing styles applying to non-`thead` table content has unwanted effects on this element once it moves into the `tbody` which needed to be counteracted.

The original PR already lays out the accessibility impact of this pull request in a good amount of details and so instead I'm going to use the space here to focus on comparing the visuals in the `forgejo` branch with those in this PR. There follow a few pretty boring identical before & after screenshots that are pixel-for-pixel identical with each other. I don't think you'll be able to spot any bugs by glancing at these and am more sharing them to provide an insight into where my attention has been during testing: the 380px wide mobile viewport, a larger desktop viewport, and the "commit message too long to fit in the available space" case. If you know of other troublesome cases for this code that aren't covered by what you see in these images then that could be a good thing to explore here.

Before | After
-|-
![](/attachments/a6f18efd-8b3b-426e-a0dc-70e9eda3fe73) | ![](/attachments/6297c663-cd5a-4849-a555-061257d59238)
![](/attachments/bbb90da2-afbf-4be5-9293-ec8b3a3dbb3a) | ![](/attachments/29103640-fce9-42c9-b91a-f9d6f9ba4db0)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12232
Reviewed-by: 0ko <0ko@noreply.codeberg.org>

web_src/css/repo.css

@@ -233,12 +233,22 @@ td .commit-summary {
 }
 
 /* this is what limits the commit table width to a value that works on all viewport sizes */
-#repo-files-table th:first-of-type {
+.repo-files-table-latest-commit-left {
   max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)));
 }
 
-.repository.file.list #repo-files-table thead th {
+.repo-files-table-latest-commit-cell {
   font-weight: var(--font-weight-normal);
+  background: var(--color-box-header);
+  text-align: inherit;
+  color: var(--color-text);
+  vertical-align: inherit;
+  border-left: none;
+  padding: 6px 5px 6px 10px;
+}
+
+.latest-commit .commit-summary {
+  white-space: nowrap;
 }
 
 .repository.file.list #repo-files-table tbody .svg {
@@ -246,6 +256,16 @@ td .commit-summary {
   margin-right: 5px;
 }
 
+@media (min-width: 767.98px) {
+  #repo-files-table tbody > tr.commit-list td {
+    border-bottom: 1px solid var(--color-secondary);
+  }
+
+  #repo-files-table tbody > tr:is(.entry, .has-parent):nth-child(2) td {
+    border-top: none;
+  }
+}
+
 .repository.file.list #repo-files-table tbody .svg.octicon-reply {
   margin-right: 10px;
 }
@@ -262,7 +282,7 @@ td .commit-summary {
   color: var(--color-secondary-dark-7);
 }
 
-.repository.file.list #repo-files-table td {
+.repository.file.list #repo-files-table td:not(.repo-files-table-latest-commit-cell) {
   padding-top: 0;
   padding-bottom: 0;
   overflow: initial;
@@ -328,7 +348,7 @@ td .commit-summary {
   padding-bottom: 8px;
 }
 
-.repository.file.list #repo-files-table td a {
+.repository.file.list #repo-files-table td a:not(.sha, .author-wrapper) {
   padding-top: 8px;
   padding-bottom: 8px;
 }