worldcone/forgejo
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Accessibility: Watch & Star on small screens

Browse source 
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.
This commit is contained in:
Otto Richter 2024-02-18 17:54:53 +01:00
parent 4d2c019b5a
commit 88f68850b5
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web_src/css/repo/header.css
View file

@ -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;