Merge pull request #3960 from nextcloud/fix/3955-visibility_toggle_is…

…_not_focusable_via_keyboard Fix navigation icon bullet accessibility
nextcloud · Feb 23, 2022 · a47015a · a47015a
2 parents 4686ae0 + b9576fc
commit a47015a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 65 deletions.
diff --git a/css/app-navigation.scss b/css/app-navigation.scss
@@ -187,20 +187,6 @@
 		}
 	}
 
-	.app-navigation-entry__icon-bullet-disabled {
-		display: block;
-		// there is 2 margins
-		padding: 15px;
-		div {
-			border: 1px solid var(--color-border-dark);
-			width: 15px;
-			height: 15px;
-			cursor: pointer;
-			transition: background 100ms ease-in-out;
-			border-radius: 50%;
-		}
-	}
-
 	.app-navigation-entry__utils {
 		.action-checkbox__label {
 			padding-right: 0 !important;

diff --git a/src/components/AppNavigation/CalendarList/AppNavigationDisabledCalendarIconBullet.vue b/src/components/AppNavigation/CalendarList/AppNavigationDisabledCalendarIconBullet.vue
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
@@ -26,15 +26,18 @@
 		:title="calendar.displayName || $t('calendar', 'Untitled calendar')"
 		:class="{deleted: !!deleteTimeout, disabled: !calendar.enabled, 'open-sharing': shareMenuOpen}"
 		@click.prevent.stop="toggleEnabled">
-		<AppNavigationIconBullet
-			v-if="calendar.enabled"
-			slot="icon"
-			:color="calendar.color"
-			@click.prevent.stop="toggleEnabled" />
-		<AppNavigationDisabledCalendarIconBullet
-			v-if="!calendar.enabled"
-			slot="icon"
-			@click.prevent.stop="toggleEnabled" />
+		<template slot="icon">
+			<Actions>
+				<ActionButton @click.prevent.stop="toggleEnabled">
+					<template #icon>
+						<CheckboxBlankCircle
+							:title="calendar.enabled ? $t('calendar', 'Disable calendar') : $t('calendar', 'Enable calendar') "
+							:size="20"
+							:fill-color="calendar.enabled ? calendar.color : 'var(--color-text-lighter)'" />
+					</template>
+				</ActionButton>
+			</Actions>
+		</template>
 
 		<template v-if="!deleteTimeout" slot="counter">
 			<Actions v-if="showSharingIcon" class="sharing">
@@ -171,7 +174,6 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionText from '@nextcloud/vue/dist/Components/ActionText'
-import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/AppNavigationIconBullet'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import ClickOutside from 'vue-click-outside'
 import {
@@ -183,11 +185,10 @@ import {
 	generateRemoteUrl,
 } from '@nextcloud/router'
 
-import AppNavigationDisabledCalendarIconBullet from './AppNavigationDisabledCalendarIconBullet.vue'
 import CalendarListItemSharingSearch from './CalendarListItemSharingSearch.vue'
 import CalendarListItemSharingPublishItem from './CalendarListItemSharingPublishItem.vue'
 import CalendarListItemSharingShareItem from './CalendarListItemSharingShareItem.vue'
-
+import CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import Download from 'vue-material-design-icons/Download.vue'
@@ -205,12 +206,11 @@ export default {
 		ActionInput,
 		ActionLink,
 		ActionText,
-		AppNavigationDisabledCalendarIconBullet,
-		AppNavigationIconBullet,
 		AppNavigationItem,
 		CalendarListItemSharingSearch,
 		CalendarListItemSharingPublishItem,
 		CalendarListItemSharingShareItem,
+		CheckboxBlankCircle,
 		Close,
 		Delete,
 		Download,