diff options
| author | Carl Schwan <carl@carlschwan.eu> | 2022-03-16 01:07:55 +0100 |
|---|---|---|
| committer | Carl Schwan <carl@carlschwan.eu> | 2022-05-16 13:21:48 +0200 |
| commit | c1499519d4a57859fa69098a743430a2dc068800 (patch) | |
| tree | c10816498597e9850140b4d975d68c47bdffd817 /core/css/apps.css | |
| parent | ad405e93767cfaf0ba34011010bb26dc4c05f60a (diff) | |
| download | nextcloud-server-c1499519d4a57859fa69098a743430a2dc068800.tar.gz nextcloud-server-c1499519d4a57859fa69098a743430a2dc068800.zip | |
Improve accessibility with more visible focus indication for non vue apps
- Add visible-focus effect on each header entry
- Show focus outline when using focus-visible (keyboard navigation)
- Add polyfy for focus-visible since it's only very recently available
on webkit
- Change text for link to home button to describe the destination and
not the current page
- Improve focus effect in app sidebar navigation
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
Diffstat (limited to 'core/css/apps.css')
| -rw-r--r-- | core/css/apps.css | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/core/css/apps.css b/core/css/apps.css index b875d08d628..341b5bceea9 100644 --- a/core/css/apps.css +++ b/core/css/apps.css @@ -192,7 +192,7 @@ kbd { #app-navigation:not(.vue) > ul { position: relative; height: 100%; - width: inherit; + width: 100%; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; @@ -232,6 +232,11 @@ kbd { #app-navigation:not(.vue) > ul > li a:focus > a { background-color: var(--color-background-hover); } +#app-navigation:not(.vue) > ul > li a:focus-visible { + border-radius: var(--border-radius); + box-shadow: var(--color-primary) inset 0 0 0 2px; + outline: none; +} #app-navigation:not(.vue) > ul > li.active, #app-navigation:not(.vue) > ul > li.active > a, #app-navigation:not(.vue) > ul > li a:active, @@ -344,6 +349,10 @@ kbd { #app-navigation:not(.vue) > ul > li > ul > li > a.svg { padding: 0 12px 0 44px; } +#app-navigation:not(.vue) > ul > li > a.svg :focus-visible, +#app-navigation:not(.vue) > ul > li > ul > li > a.svg :focus-visible { + padding: 0 8px 0 42px; +} #app-navigation:not(.vue) > ul > li > a:first-child img, #app-navigation:not(.vue) > ul > li > ul > li > a:first-child img { margin-right: 11px; @@ -424,6 +433,12 @@ kbd { * link. */ left: 0; } +#app-navigation:not(.vue) .collapsible .collapse:focus-visible { + opacity: 1; + border-width: 0; + box-shadow: inset 0 0 0 2px var(--color-primary); + background: none; +} #app-navigation:not(.vue) .collapsible:before { position: absolute; height: 44px; @@ -759,6 +774,11 @@ kbd { display: block; filter: var(--background-invert-if-dark); } +#app-settings-header .settings-button:focus-visible { + box-shadow: 0 0 0 2px inset var(--color-primary) !important; + border-radius: var(--border-radius); + background-position: 12px center; +} /* GENERAL SECTION ------------------------------------------------------------ */ .section { |