mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-22 05:36:16 +00:00
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:
commit
83b6e59718
|
@ -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
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue