mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

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>
This commit is contained in:
Gusted 2024-03-02 19:16:47 +00:00
parent c559dcddf0 88f68850b5
commit 83b6e59718
6 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
options/locale/locale_en-US.ini
View File

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

2
templates/base/head_navbar.tmpl
View File

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

6
web_src/css/base.css
View File

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

64
web_src/css/modules/button.css
View File

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

4
web_src/css/modules/navbar.css
View File

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

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;