Remove Action from CheckboxBlankCircle and add more description text

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

src/components/AppNavigation/CalendarList/CalendarListItem.vue

@@ -23,26 +23,19 @@
  <AppNavigationItem
  v-click-outside="closeShareMenu"
  :loading="calendar.loading"
+ :aria-description="descriptionAppNavigationItem"
  :title="calendar.displayName || $t('calendar', 'Untitled calendar')"
  :class="{deleted: !!deleteTimeout, disabled: !calendar.enabled, 'open-sharing': shareMenuOpen}"
  @click.prevent.stop="toggleEnabled">
  <template slot="icon">
- <Actions>
- <ActionButton @click.prevent.stop="toggleEnabled">
- <template #icon>
- <CheckboxBlankCircle
- v-if="calendar.enabled"
- :title="$t('calendar', 'Disable calendar')"
- :size="20"
- :fill-color="calendar.color" />
- <CheckboxBlankCircleOutline
- v-else
- :title="$t('calendar', 'Enable calendar')"
- :size="20"
- :fill-color="calendar.color" />
- </template>
- </ActionButton>
- </Actions>
+ <CheckboxBlankCircle
+ v-if="calendar.enabled"
+ :size="20"
+ :fill-color="calendar.color" />
+ <CheckboxBlankCircleOutline
+ v-else
+ :size="20"
+ :fill-color="calendar.color" />
  </template>
 
  <template v-if="!deleteTimeout" slot="counter">
@@ -342,6 +335,24 @@ export default {
 
  return ''
  },
+ /**
+ * compute aria-description for AppNavigationItem link
+ *
+ * @return {string}
+ */
+ descriptionAppNavigationItem() {
+ let description
+ if (this.calendar.enabled && this.calendar.displayName) {
+ description = t('calendar', 'Disable calendar "{calendar}"', { calendar: this.calendar.displayName })
+ } else if (this.calendar.enabled && !this.calendar.displayName) {
+ description = t('calendar', 'Disable calendar "{calendar}"', { calendar: 'Untitled calendar' })
+ } else if (!this.calendar.enabled && this.calendar.displayName) {
+ description = t('calendar', 'Enable calendar "{calendar}"', { calendar: this.calendar.displayName })
+ } else if (!this.calendar.enabled && !this.calendar.displayName) {
+ description = t('calendar', 'Enable calendar "{calendar}"', { calendar: 'Untitled calendar' })
+ }
+ return description
+ },
  },
  methods: {
  /**