From 30e0b2f85115aeeb5943f2f37d487cf36178abbe Mon Sep 17 00:00:00 2001 From: Otto Richter Date: Sun, 18 Feb 2024 16:48:32 +0100 Subject: [PATCH 1/3] Label and focus styling for mobile menu button --- options/locale/locale_en-US.ini | 1 + templates/base/head_navbar.tmpl | 2 +- web_src/css/modules/navbar.css | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 0a6b1e0d82..31ecf6bc1a 100644 --- a/options/locale/locale_en-US.ini +++ b/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 diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index b4a93688e3..fb0301aeb1 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -20,7 +20,7 @@ {{end}} - + diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index b6fd2ff20a..11020df359 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -41,8 +41,8 @@ justify-content: stretch; } -#navbar a.item:hover, -#navbar button.item:hover { +#navbar a.item:hover, #navbar a.item:focus, +#navbar button.item:hover, #navbar button.item:focus { background: var(--color-nav-hover-bg); } From 4d2c019b5abc920737ca857b433b799b679fec1d Mon Sep 17 00:00:00 2001 From: Otto Richter Date: Sun, 18 Feb 2024 17:28:35 +0100 Subject: [PATCH 2/3] Add focus styling to most button types While it might be favourable to have distinct focus and hover styling, having no focus styling at all makes keyboard navigation very difficult. Some people consider :focus to be equal to a keyboard-driven :hover, so I'm moving the focus pseudo-classes from being a no-op to adding the hover styling. --- web_src/css/base.css | 6 ++-- web_src/css/modules/button.css | 64 ++++++++++++++++++---------------- 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 9cad9c5d23..bb45c8d325 100644 --- a/web_src/css/base.css +++ b/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 .dropdown.item:hover, -.ui.secondary.pointing.menu a.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:focus, +.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus { color: var(--color-text-dark); } diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 36cb499aeb..b772a4c14e 100644 --- a/web_src/css/modules/button.css +++ b/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:focus { +.ui.button { 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.buttons .button:focus, -.ui.basic.button:focus { +.ui.basic.button { 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.button:focus, -.ui.primary.buttons .button:focus { +.ui.primary.buttons .button { 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.buttons .button:focus, -.ui.basic.primary.button:focus { +.ui.basic.primary.button{ 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:focus, -.ui.basic.secondary.buttons .button:focus { +.ui.basic.secondary.button { 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.button:focus, -.ui.red.buttons .button:focus { +.ui.red.buttons .button { 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.buttons .button:focus, -.ui.basic.red.button:focus { +.ui.basic.red.button { 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); } From 88f68850b59b6ae801df8af5d677e88e4dd16133 Mon Sep 17 00:00:00 2001 From: Otto Richter Date: Sun, 18 Feb 2024 17:54:53 +0100 Subject: [PATCH 3/3] 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;