Remove Action from CheckboxBlankCircle and add more description text

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
nextcloud · Mar 14, 2022 · 3efa4af · 3efa4af
1 parent c0e1095
commit 3efa4af
Showing 1 changed file with 19 additions and 16 deletions.
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItem.vue b/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,16 @@ export default {
 
  return ''
  },
+ /**
+ * compute aria-description for AppNavigationItem link
+ *
+ * @return {string}
+ */
+ descriptionAppNavigationItem() {
+ return this.calendar.enabled
+ ? t('calendar', 'Disable calendar "{calendar}"', { calendar: this.calendar.displayName })
+ : t('calendar', 'Enable calendar "{calendar}"', { calendar: this.calendar.displayName })
+ },
  },
  methods: {
  /**