From d76d6f24ce71fa4f2116e8f463c21f0c697b769d Mon Sep 17 00:00:00 2001 From: forgejo-backport-action Date: Wed, 8 Apr 2026 21:14:39 +0200 Subject: [PATCH] [v15.0/forgejo] Improve repo file list table semantics for screen readers (#12031) **Backport:** https://codeberg.org/forgejo/forgejo/pulls/11846 https://codeberg.org/forgejo/forgejo/issues/11116 To understand the impact of this you really need to listen to the before and after screen recordings attached. https://codeberg.org/forgejo/forgejo/issues/11116 is a really great bug report, and I was surprised by how disorienting this actually was when testing manually compared to my expectation after reading the issue. This is an impactful improvement! This is my first time adding new translation strings. Excited to learn more about that if I've guessed wrong about how to do it. To summarise, what we're doing here is as follows. 1. Address the core issue by changing the existing `` elements to `` so that screen readers stop semantically associating them with each row and reading them out for every table cell. 2. Replace them with real `` elements that communicate the true semantic role of each column. 3. Add a ``. This serves a dual purpose: it gives the table an accessible name which improves the navigability of the page, and it gives us a place to explain to the user that the first row of the table is a little bit different because it's the latest commit rather than a file in the repo. 4. Visually hide the new caption and headings so that only screen reader users get them. ## Checklist The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. All work and communication must conform to Forgejo's [AI Agreement](https://codeberg.org/forgejo/governance/src/branch/main/AIAgreement.md). There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org). ### Tests for JavaScript changes - I added test coverage for JavaScript changes... - [ ] in `web_src/js/*.test.js` if it can be unit tested. - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)). ### Documentation - [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [ ] I did not document these changes and I do not expect someone else to do it. ### Release notes - [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change. - [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change. *The decision if the pull request will be shown in the release notes is up to the mergers / release team.* The content of the `release-notes/.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead. ## Release notes - Features - [PR](https://codeberg.org/forgejo/forgejo/pulls/12031): Improve repo file list table semantics for screen readers Co-authored-by: Henry Catalini Smith Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12031 Reviewed-by: Mathieu Fenniak Co-authored-by: forgejo-backport-action Co-committed-by: forgejo-backport-action --- options/locale_next/locale_en-US.json | 4 ++++ templates/repo/view_list.tmpl | 18 ++++++++++++------ tests/integration/repo_test.go | 4 ++-- web_src/css/repo.css | 2 +- 4 files changed, 19 insertions(+), 9 deletions(-) diff --git a/options/locale_next/locale_en-US.json b/options/locale_next/locale_en-US.json index 59edecac03..94296511be 100644 --- a/options/locale_next/locale_en-US.json +++ b/options/locale_next/locale_en-US.json @@ -52,6 +52,10 @@ "relativetime.1week": "last week", "relativetime.1month": "last month", "relativetime.1year": "last year", + "repo.files.caption": "Repository files (latest commit first)", + "repo.files.filename": "Filename", + "repo.files.last_commit_message": "Latest commit message", + "repo.files.last_commit_date": "Latest commit date", "repo.issues.filter_poster.hint": "Filter by the author", "repo.issues.filter_assignee.hint": "Filter by assigned user", "repo.issues.filter_reviewers.hint": "Filter by user who reviewed", diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl index ffd8b1a515..75f53c1b5f 100644 --- a/templates/repo/view_list.tmpl +++ b/templates/repo/view_list.tmpl @@ -1,17 +1,23 @@ - + + + + + + + - + + - - {{if .HasParentPath}} diff --git a/tests/integration/repo_test.go b/tests/integration/repo_test.go index 1b4a574f13..2f189bf7a8 100644 --- a/tests/integration/repo_test.go +++ b/tests/integration/repo_test.go @@ -70,7 +70,7 @@ func testViewRepo(t *testing.T) { resp := session.MakeRequest(t, req, http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) - files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR") + files := htmlDoc.doc.Find("#repo-files-table > tbody > tr:not(.commit-list)") type file struct { fileName string @@ -1039,7 +1039,7 @@ func TestRepoFilesList(t *testing.T) { resp := MakeRequest(t, req, http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) - filesList := htmlDoc.Find("#repo-files-table tbody tr").Map(func(_ int, s *goquery.Selection) string { + filesList := htmlDoc.Find("#repo-files-table tbody tr:not(.commit-list)").Map(func(_ int, s *goquery.Selection) string { return s.AttrOr("data-entryname", "") }) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 00f159f33b..66b1d5df71 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -237,7 +237,7 @@ td .commit-summary { 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-row td { font-weight: var(--font-weight-normal); }
+ {{ctx.Locale.Tr "repo.files.caption"}} +
{{ctx.Locale.Tr "repo.files.filename"}}{{ctx.Locale.Tr "repo.files.last_commit_message"}}{{ctx.Locale.Tr "repo.files.last_commit_date"}}
+
{{template "repo/latest_commit" .}}
- - 		{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}{{end}}{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}{{end}}
{{svg "octicon-reply" 16 "tw-mr-2"}}..