Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Unverified Commit a47015ab authored by Julia Kirschenheuter's avatar Julia Kirschenheuter Committed by GitHub
Browse files

Merge pull request #3960 from nextcloud/fix/3955-visibility_toggle_is_not_focusable_via_keyboard 

Fix navigation icon bullet accessibility
parents 4686ae07 b9576fca

css/app-navigation.scss

+0 −14
Original line number Diff line number Diff line
@@ -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;

src/components/AppNavigation/CalendarList/AppNavigationDisabledCalendarIconBullet.vue

deleted100644 → 0
+0 −37
Original line number Diff line number Diff line 
<!--

  - @copyright Copyright (c) 2019 Georg Ehrke <oc.list@georgehrke.com>

  - @author Georg Ehrke <oc.list@georgehrke.com>

  -

  - @license GNU AGPL version 3 or any later version

  -

  - This program is free software: you can redistribute it and/or modify

  - it under the terms of the GNU Affero General Public License as

  - published by the Free Software Foundation, either version 3 of the

  - License, or (at your option) any later version.

  -

  - This program is distributed in the hope that it will be useful,

  - but WITHOUT ANY WARRANTY; without even the implied warranty of

  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

  - GNU Affero General Public License for more details.

  -

  - You should have received a copy of the GNU Affero General Public License

  - along with this program. If not, see <http://www.gnu.org/licenses/>.

  -

  -->



<template>

	<div class="app-navigation-entry__icon-bullet-disabled" @click="onClick">

		<div />

	</div>

</template>



<script>

export default {

	name: 'AppNavigationDisabledCalendarIconBullet',

	methods: {

		onClick(event) {

			this.$emit('click', event)

		},

	},

}

</script>

src/components/AppNavigation/CalendarList/CalendarListItem.vue

+14 −14
Original line number Diff line number Diff line
@@ -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,