Adapt focus-visible styles for checkboxes on images

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com> Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com> (cherry picked from commit 062819c) Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
nextcloud · Dec 22, 2023 · e6ea5f0 · e6ea5f0
1 parent bee68bc
commit e6ea5f0
Show file tree

Hide file tree

Showing 21 changed files with 41 additions and 36 deletions.
diff --git a/js/photos-main.js b/js/photos-main.js
diff --git a/js/photos-main.js.map b/js/photos-main.js.map
diff --git a/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js b/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js
diff --git a/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js.map b/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js.map
diff --git a/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js b/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js
diff --git a/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js.map b/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js.map
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map
diff --git a/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-88a20b.js b/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-88a20b.js
diff --git a/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-88a20b.js.map b/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-88a20b.js.map
diff --git a/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-934ab5.js b/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-934ab5.js
diff --git a/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-934ab5.js.map b/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-934ab5.js.map
diff --git a/js/photos-public.js b/js/photos-public.js
diff --git a/js/photos-public.js.map b/js/photos-public.js.map
diff --git a/js/photos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js b/js/photos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js
diff --git a/...tos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js.map b/...tos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js.map
diff --git a/...rtControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js b/...rtControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js
diff --git a/...ntrollerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js.map b/...ntrollerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js.map
diff --git a/js/photos-src_views_FaceContent_vue.js b/js/photos-src_views_FaceContent_vue.js
diff --git a/js/photos-src_views_FaceContent_vue.js.map b/js/photos-src_views_FaceContent_vue.js.map
diff --git a/src/components/File.vue b/src/components/File.vue
@@ -73,10 +73,9 @@
 
 		<NcCheckboxRadioSwitch v-if="allowSelection"
 			class="selection-checkbox"
+			:aria-label="t('photos', 'Select image {imageName}', {imageName: file.basename})"
 			:checked="selected"
-			@update:checked="onToggle">
-			<span class="input-label">{{ t('photos', 'Select image {imageName}', {imageName: file.basename}) }}</span>
-		</NcCheckboxRadioSwitch>
+			@update:checked="onToggle" />
 
 		<FavoriteIcon v-if="file.favorite === 1"
 			v-once
@@ -333,15 +332,21 @@ export default {
 		z-index: 1;
 		width: fit-content;
 
-		// Make the checkbox background round on hover.
-		:deep .checkbox-radio-switch__label {
+		:deep .checkbox-radio-switch__input:focus-visible + .checkbox-radio-switch__content,
+		.checkbox-radio-switch__input:focus-visible {
+			outline: 2px solid var(--color-main-text);
+			box-shadow: 0 0 0 3px var(--color-main-background);
+			outline-offset: 0px;
+		}
+
+		:deep .checkbox-radio-switch__content {
 			padding: 10px;
 			box-sizing: border-box;
+			background: var(--color-main-background);
 
 			// Add a background to the checkbox so we do not see the image through it.
 			&::after {
 				content: '';
-				background: var(--color-primary-element-light);
 				width: 16px;
 				height: 16px;
 				position: absolute;