Merge pull request 'Accessibility: Focus styling and fix Watch/Unwatch buttons' (#2379) from fnetx/accessibility into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2379
Reviewed-by: Gusted <gusted@noreply.codeberg.org>

options/locale/locale_en-US.ini

@@ -26,6 +26,7 @@ enable_javascript = This website requires JavaScript.
 toc = Table of Contents
 licenses = Licenses
 return_to_gitea = Return to Forgejo
+toggle_menu = Toggle Menu
 
 username = Username
 email = Email address

templates/base/head_navbar.tmpl

@@ -20,7 +20,7 @@
 				</div>
 			</a>
 			{{end}}
-			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
+			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "toggle_menu"}}">{{svg "octicon-three-bars"}}</button>
 		</div>
 
 		<!-- navbar links non-mobile -->

web_src/css/base.css

@@ -1935,9 +1935,9 @@ table th[data-sortt-desc] .svg {
 }
 
 .ui.secondary.pointing.menu .active.item,
-.ui.secondary.pointing.menu .active.item:hover,
+.ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus,
-.ui.secondary.pointing.menu .dropdown.item:hover,
+.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus,
-.ui.secondary.pointing.menu a.item:hover {
+.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus {
   color: var(--color-text-dark);
 }
 

web_src/css/modules/button.css

@@ -1,14 +1,14 @@
 /* this contains override styles for buttons and related elements */
 
 /* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
-.ui.button,
+.ui.button {
-.ui.button:focus {
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
   color: var(--color-text);
 }
 
-.ui.button:hover {
+.ui.button:hover,
+.ui.button:focus {
   background: var(--color-hover);
   color: var(--color-text);
 }
@@ -20,13 +20,15 @@
 .ui.active.button,
 .ui.button:active,
 .ui.active.button:active,
-.ui.active.button:hover {
+.ui.active.button:hover,
+.ui.active.button:focus {
   background: var(--color-active);
   color: var(--color-text);
 }
 
 .delete-button,
-.delete-button:hover {
+.delete-button:hover,
+.delete-button:focus {
   color: var(--color-red);
 }
 
@@ -87,15 +89,15 @@ It needs some tricks to tweak the left/right borders with active state */
 
 .ui.labeled.button.disabled > .button,
 .ui.basic.buttons .button,
-.ui.basic.button,
+.ui.basic.button {
-.ui.basic.buttons .button:focus,
-.ui.basic.button:focus {
   color: var(--color-text-light);
   background: var(--color-button);
 }
 
 .ui.basic.buttons .button:hover,
-.ui.basic.button:hover {
+.ui.basic.button:hover,
+.ui.basic.buttons .button:focus,
+.ui.basic.button:focus {
   color: var(--color-text);
   background: var(--color-hover);
 }
@@ -105,7 +107,9 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.basic.buttons .active.button,
 .ui.basic.active.button,
 .ui.basic.buttons .active.button:hover,
-.ui.basic.active.button:hover {
+.ui.basic.active.button:hover,
+.ui.basic.buttons .active.button:focus,
+.ui.basic.active.button:focus {
   color: var(--color-text);
   background: var(--color-active);
 }
@@ -124,15 +128,15 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.primary.labels .label,
 .ui.ui.ui.primary.label,
 .ui.primary.button,
-.ui.primary.buttons .button,
+.ui.primary.buttons .button {
-.ui.primary.button:focus,
-.ui.primary.buttons .button:focus {
   background: var(--color-primary);
   color: var(--color-primary-contrast);
 }
 
 .ui.primary.button:hover,
-.ui.primary.buttons .button:hover {
+.ui.primary.buttons .button:hover,
+.ui.primary.button:focus,
+.ui.primary.buttons .button:focus {
   background: var(--color-primary-hover);
   color: var(--color-primary-contrast);
 }
@@ -143,15 +147,15 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.primary.buttons .button,
-.ui.basic.primary.button,
+.ui.basic.primary.button{
-.ui.basic.primary.buttons .button:focus,
-.ui.basic.primary.button:focus {
   color: var(--color-primary);
   border-color: var(--color-primary);
 }
 
 .ui.basic.primary.buttons .button:hover,
-.ui.basic.primary.button:hover {
+.ui.basic.primary.button:hover,
+.ui.basic.primary.buttons .button:focus,
+.ui.basic.primary.button:focus {
   color: var(--color-primary-hover);
   border-color: var(--color-primary-hover);
 }
@@ -184,15 +188,15 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button,
+.ui.basic.secondary.button {
-.ui.basic.secondary.button:focus,
-.ui.basic.secondary.buttons .button:focus {
   color: var(--color-secondary-button);
   border-color: var(--color-secondary-button);
 }
 
 .ui.basic.secondary.buttons .button:hover,
-.ui.basic.secondary.button:hover {
+.ui.basic.secondary.button:hover,
+.ui.basic.secondary.button:focus,
+.ui.basic.secondary.buttons .button:focus {
   color: var(--color-secondary-hover);
   border-color: var(--color-secondary-hover);
 }
@@ -208,14 +212,14 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.red.labels .label,
 .ui.ui.ui.red.label,
 .ui.red.button,
-.ui.red.buttons .button,
+.ui.red.buttons .button {
-.ui.red.button:focus,
-.ui.red.buttons .button:focus {
   background: var(--color-red);
 }
 
 .ui.red.button:hover,
-.ui.red.buttons .button:hover {
+.ui.red.buttons .button:hover,
+.ui.red.button:focus,
+.ui.red.buttons .button:focus {
   background: var(--color-red-dark-1);
 }
 
@@ -225,15 +229,15 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.red.buttons .button,
-.ui.basic.red.button,
+.ui.basic.red.button {
-.ui.basic.red.buttons .button:focus,
-.ui.basic.red.button:focus {
   color: var(--color-red);
   border-color: var(--color-red);
 }
 
 .ui.basic.red.buttons .button:hover,
-.ui.basic.red.button:hover {
+.ui.basic.red.button:hover,
+.ui.basic.red.buttons .button:focus,
+.ui.basic.red.button:focus {
   color: var(--color-red-dark-1);
   border-color: var(--color-red-dark-1);
 }

web_src/css/modules/navbar.css

@@ -41,8 +41,8 @@
   justify-content: stretch;
 }
 
-#navbar a.item:hover,
+#navbar a.item:hover, #navbar a.item:focus,
-#navbar button.item:hover {
+#navbar button.item:hover, #navbar button.item:focus {
   background: var(--color-nav-hover-bg);
 }
 

web_src/css/repo/header.css

@@ -89,11 +89,17 @@
   .repo-header .flex-item {
     flex-grow: 1;
   }
-  .repo-buttons .ui.labeled.button .text {
+  .repo-buttons .ui.labeled.button .text,
-    display: none;
-  }
   .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;