From b6072496d4b63314a7203d302b3c2e995f83d143 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Wed, 23 Apr 2025 23:39:27 +0200
Subject: [PATCH] fix(ui): make pagination labels always visible to
 screenreader

- The pagination labels 'First', 'Previous', 'Next' and 'Last' are
hidden away when the screen width becomes smaller. However this also
hides them from the screen reader. Instead of using `display: none`, use
some well-known tricks to still make them visible to the screen reader.
- Add E2E test.
- Resolves Codeberg/Community#1858
---
 tests/e2e/pagination.test.e2e.ts | 15 +++++++++++++++
 web_src/css/base.css             | 10 +++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 tests/e2e/pagination.test.e2e.ts

diff --git a/tests/e2e/pagination.test.e2e.ts b/tests/e2e/pagination.test.e2e.ts
new file mode 100644
index 0000000000..3126b669a6
--- /dev/null
+++ b/tests/e2e/pagination.test.e2e.ts
@@ -0,0 +1,15 @@
+// @watch start
+// template/base/paginate.tmpl
+// services/context/pagination.go
+// @watch end
+
+import {expect} from '@playwright/test';
+import {test} from './utils_e2e.ts';
+import {accessibilityCheck} from './shared/accessibility.ts';
+
+test('Pagination a11y', async ({page}) => {
+  await page.goto('/explore/repos');
+
+  await expect(page.locator('.pagination')).toBeVisible();
+  await accessibilityCheck({page}, ['.pagination'], [], []);
+});
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 559a035c2c..64e42be553 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -952,7 +952,15 @@ img.ui.avatar,
 @media (max-width: 767.98px) {
   .ui.pagination.menu .item:not(.active,.navigation),
   .ui.pagination.menu .item.navigation span.navigation_label {
-    display: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
   }
 }