From 88f68850b59b6ae801df8af5d677e88e4dd16133 Mon Sep 17 00:00:00 2001
From: Otto Richter <git@otto.splvs.net>
Date: Sun, 18 Feb 2024 17:54:53 +0100
Subject: [PATCH] Accessibility: Watch & Star on small screens

The elements were hidden on small screens to preserve space and the
icons still conveyed the meaning for users with intact eye vision.
However, the names were no longer exposed to screen readers, and their
users usually cannot obtain the meaning from the icons.

Adding aria-labels to the affected templates results in certain
complexity due to the DOM, so instead I decided to use some accessible
CSS tricks to move the content off the screen instead of hiding it. It
should remain accessible for most screen readers.
---
 web_src/css/repo/header.css | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
index d5c7d212e8..3400284e4b 100644
--- a/web_src/css/repo/header.css
+++ b/web_src/css/repo/header.css
@@ -89,11 +89,17 @@
   .repo-header .flex-item {
     flex-grow: 1;
   }
-  .repo-buttons .ui.labeled.button .text {
-    display: none;
-  }
+  .repo-buttons .ui.labeled.button .text,
   .repo-header .flex-item-trailing .label {
-    display: none;
+    /* the elements are hidden from users with intact eye vision,
+     * because SVG icons convey the meaning.
+     * However, they should remain accessible to screen readers */
+    position: absolute;
+    left: -1000vw;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
   }
   .repo-header .flex-item-trailing .repo-icon {
     display: initial;