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/src | |
| 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/src')
| -rw-r--r-- | core/src/Polyfill/index.js | 1 | ||||
| -rw-r--r-- | core/src/components/HeaderMenu.vue | 8 |
2 files changed, 7 insertions, 2 deletions
diff --git a/core/src/Polyfill/index.js b/core/src/Polyfill/index.js index 34af68ef262..5a190318327 100644 --- a/core/src/Polyfill/index.js +++ b/core/src/Polyfill/index.js @@ -24,3 +24,4 @@ import './console' import './closest' import './windows-phone' +import 'focus-visible' diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue index 55d018677cb..9fed383b026 100644 --- a/core/src/components/HeaderMenu.vue +++ b/core/src/components/HeaderMenu.vue @@ -174,8 +174,8 @@ export default { align-items: center; justify-content: center; width: 50px; - height: 100%; - margin: 0; + height: 44px; + margin: 2px 0; padding: 0; cursor: pointer; opacity: .6; @@ -188,6 +188,10 @@ export default { opacity: 1; } + &__trigger:focus-visible { + outline: none; + } + &__wrapper { position: fixed; z-index: 2000; |