diff options
| author | Julius Härtl <jus@bitgrid.net> | 2020-08-17 20:04:05 +0200 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2020-08-19 17:07:28 +0200 |
| commit | fa2072e36b44051c113aaf1ba6ae6efd8e057480 (patch) | |
| tree | 7c5ea0ba5e5ffd752a8950b4d340b6a08ed16189 /apps | |
| parent | 38afee82bd43a355f6b7fd2c730278577f992283 (diff) | |
| download | nextcloud-server-fa2072e36b44051c113aaf1ba6ae6efd8e057480.tar.gz nextcloud-server-fa2072e36b44051c113aaf1ba6ae6efd8e057480.zip | |
Fix keyboard navigation
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/dashboard/src/App.vue | 5 | ||||
| -rw-r--r-- | apps/dashboard/src/components/BackgroundSettings.vue | 48 |
2 files changed, 36 insertions, 17 deletions
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue index e86b1e094aa..e266d64c6dd 100644 --- a/apps/dashboard/src/App.vue +++ b/apps/dashboard/src/App.vue @@ -29,7 +29,9 @@ <a v-tooltip="tooltip" class="edit-panels icon-rename" tabindex="0" - @click="showModal">{{ t('dashboard', 'Customize') }}</a> + @click="showModal" + @keyup.enter="showModal" + @keyup.space="showModal">{{ t('dashboard', 'Customize') }}</a> </div> <Modal v-if="modal" @close="closeModal"> @@ -427,6 +429,7 @@ export default { opacity: 1; text-align: center; + &:focus, &:hover { opacity: 1; background-color: var(--color-background-hover); diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue index 800b76dad9d..9c4bfcfa5ec 100644 --- a/apps/dashboard/src/components/BackgroundSettings.vue +++ b/apps/dashboard/src/components/BackgroundSettings.vue @@ -22,27 +22,35 @@ <template> <div class="background-selector"> - <div class="background" tabindex="0" @click="pickFile"> + <a class="background filepicker" + tabindex="0" + @click="pickFile" + @keyup.enter="pickFile" + @keyup.space="pickFile"> <div class="background--preview"> {{ t('dashboard', 'Pick from files') }} </div> - </div> - <div class="background default" - :class="{ 'icon-loading': loading === 'default' }" + </a> + <a class="background default" tabindex="0" - @click="setDefault()"> + :class="{ 'icon-loading': loading === 'default' }" + @click="setDefault" + @keyup.enter="setDefault" + @keyup.space="setDefault"> <div class="background--preview"> - Default + {{ t('dashboard', 'Default images') }} </div> - </div> - <div v-for="background in shippedBackgrounds" + </a> + <a v-for="background in shippedBackgrounds" :key="background.name" + tabindex="0" class="background" :class="{ 'icon-loading': loading === background.name }" - tabindex="0" - @click="setShipped(background.name)"> + @click="setShipped(background.name)" + @keyup.enter="setShipped(background.name)" + @keyup.space="setShipped(background.name)"> <div class="background--preview" :style="{ 'background-image': 'url(' + background.url + ')' }" /> - </div> + </a> </div> </template> @@ -138,22 +146,30 @@ export default { margin: 8px; text-align: center; border-radius: var(--border-radius-large); + border-radius: var(--border-radius-large); + border: 2px solid var(--color-main-background); + overflow: hidden; &.current { background-image: var(--color-background-dark); } &--preview { - width: 172px; + width: 100%; height: 96px; background-size: cover; background-position: center center; - border-radius: var(--border-radius-large); - border: 2px solid var(--color-main-background); } - &:hover .background--preview, - &:focus .background--preview { + &.filepicker, &.default { + border: 2px solid var(--color-border); + .background--preview { + line-height: 100px; + } + } + + &:hover, + &:focus { border: 2px solid var(--color-primary); } } |