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/styles.scss | |
| 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/styles.scss')
| -rw-r--r-- | core/css/styles.scss | 39 |
1 files changed, 33 insertions, 6 deletions
diff --git a/core/css/styles.scss b/core/css/styles.scss index ab6eddaae8c..b21394a52c6 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -20,7 +20,6 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr margin: 0; padding: 0; border: 0; - outline: 0; font-weight: inherit; font-size: 100%; font-family: inherit; @@ -30,6 +29,23 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr scrollbar-width: thin; } +.js-focus-visible :focus:not(.focus-visible) { + outline: none; +} + +:focus-visible { + box-shadow: 0 0 0 2px var(--color-primary); + outline: none; +} + +/** Let vue apps handle the focus themselves */ +#content-vue :focus-visible, +#app-navigation-vue :focus-visible, +.vue :focus-visible { + box-shadow: none; + outline: none; +} + html, body { height: 100%; } @@ -294,6 +310,11 @@ body { #show:checked + label, #dbpassword:checked + label, #personal-show:checked + label { opacity: .8; } +#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label { + box-shadow: var(--color-primary) 0 0 0 2px; + opacity: 1; + border-radius: 9999px; +} #show + label, #dbpassword + label, #personal-show + label { position: absolute !important; @@ -975,12 +996,18 @@ span.ui-icon { #contactsmenu { .menutoggle { - background-size: 20px 20px; - padding: 14px; cursor: pointer; - // Force white - background-image: var(--original-icon-contacts-white); - filter: var(--primary-invert-if-bright); + &:before { + background-size: 20px 20px; + background-repeat: no-repeat; + background-position-x: 3px; + background-position-y: 4px; + padding: 14px; + content: ' '; + // Force white + background-image: var(--original-icon-contacts-white); + filter: var(--primary-invert-if-bright); + } &:hover, &:focus, |