Follow up: Make set/edit/remove expiry-date-buttons accessible

changelog/unreleased/enhancement-replace-custom-datepicker-with-native-element

@@ -4,4 +4,5 @@ We've replaced the custom datepicker with a native html date input element.
 This change will improve the user experience and accessibility of the datepicker.
 
 https://github.com/owncloud/web/pull/11377
+https://github.com/owncloud/web/pull/11388
 https://github.com/owncloud/web/issues/11374

packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue

@@ -24,32 +24,26 @@
           v-if="canEditOrDelete && isExpirationSupported"
           class="oc-rounded oc-menu-item-hover files-collaborators-expiration"
         >
-          <div class="oc-flex">
-            <oc-button
-              class="files-collaborators-expiration-button oc-p-s action-menu-item"
-              data-testid="recipient-datepicker-btn"
-              appearance="raw"
-              @click="showDatePickerModal"
-            >
-              <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
-              <span
-                v-if="isExpirationDateSet"
-                class="oc-ml-s"
-                v-text="$gettext('Expires %{expires}', { expires: dateExpire })"
-              />
-              <span v-else v-text="$gettext('Set expiration date')" />
-            </oc-button>
-            <oc-button
-              v-if="isRemoveExpirationPossible"
-              class="remove-expiration-date"
-              data-testid="collaborator-remove-expiration-btn"
-              appearance="raw"
-              :aria-label="$gettext('Remove expiration date')"
-              @click="removeExpirationDate"
-            >
-              <oc-icon name="close" />
-            </oc-button>
-          </div>
+          <oc-button
+            class="files-collaborators-expiration-button oc-p-s action-menu-item"
+            data-testid="recipient-datepicker-btn"
+            appearance="raw"
+            @click="showDatePickerModal"
+          >
+            <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
+            <span v-if="isExpirationDateSet" v-text="$gettext('Edit expiration date')" />
+            <span v-else v-text="$gettext('Set expiration date')" />
+          </oc-button>
+          <oc-button
+            v-if="isRemoveExpirationPossible"
+            class="remove-expiration-date oc-p-s action-menu-item"
+            data-testid="collaborator-remove-expiration-btn oc-p-s action-menu-item"
+            appearance="raw"
+            @click="removeExpirationDate"
+          >
+            <oc-icon name="calendar-close" />
+            <span v-text="$gettext('Remove expiration date')" />
+          </oc-button>
         </li>
         <li v-for="(option, i) in options" :key="i" class="oc-rounded oc-menu-item-hover">
           <template v-if="option.enabled">
@@ -91,7 +85,7 @@ import uniqueId from 'design-system/src/utils/uniqueId'
 import { OcDrop } from 'design-system/src/components'
 import { Resource } from '@ownclouders/web-client'
 import { isProjectSpaceResource } from '@ownclouders/web-client'
-import { formatRelativeDateFromDateTime, useConfigStore, useModals } from '@ownclouders/web-pkg'
+import { useConfigStore, useModals } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import DatePickerModal from '../../../Modals/DatePickerModal.vue'
 
@@ -153,18 +147,10 @@ export default defineComponent({
       return ''
     })
 
-    const dateExpire = computed(() =>
-      formatRelativeDateFromDateTime(
-        DateTime.fromISO(props.expirationDate).endOf('day'),
-        language.current
-      )
-    )
-
     return {
       configStore,
       resource: inject<Ref<Resource>>('resource'),
       toggleShareDenied,
-      dateExpire,
       dropButtonTooltip,
       dispatchModal
     }

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue

@@ -14,29 +14,25 @@
         key="no-expiration-date-label"
         v-text="$gettext('Set expiration date')"
       />
-      <span
-        v-else
-        key="set-expiration-date-label"
-        v-text="$gettext('Expires %{expires}', { expires: dateExpire })"
-      />
+      <span v-else key="set-expiration-date-label" v-text="$gettext('Edit expiration date')" />
     </oc-button>
   </div>
   <oc-button
     v-if="dateCurrent"
-    class="recipient-edit-expiration-btn-remove"
+    class="recipient-edit-expiration-btn-remove oc-p-s action-menu-item"
     appearance="raw"
     :aria-label="$gettext('Remove expiration date')"
     @click="dateCurrent = null"
   >
-    <oc-icon name="close" />
+    <oc-icon name="calendar-close" fill-type="line" size="medium" variation="passive" />
+    <span key="no-expiration-date-label" v-text="$gettext('Remove expiration date')" />
   </oc-button>
 </template>
 
 <script lang="ts">
 import { DateTime } from 'luxon'
-import { computed, watch, defineComponent, customRef, PropType, unref } from 'vue'
+import { watch, defineComponent, customRef, PropType, unref } from 'vue'
 import { useModals } from '@ownclouders/web-pkg'
-import { formatRelativeDateFromDateTime } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import DatePickerModal from '../../../../Modals/DatePickerModal.vue'
 
@@ -67,9 +63,6 @@ export default defineComponent({
         }
       }
     })
-    const dateExpire = computed(() =>
-      formatRelativeDateFromDateTime(dateCurrent.value.endOf('day'), language.current)
-    )
 
     const showDatePickerModal = () => {
       dispatchModal({
@@ -88,14 +81,13 @@ export default defineComponent({
 
     watch(dateCurrent, () => {
       emit('optionChange', {
-        expirationDate: unref(dateCurrent).isValid ? dateCurrent.value : null
+        expirationDate: unref(dateCurrent)?.isValid ? dateCurrent.value : null
       })
     })
 
     return {
       language,
       dateCurrent,
-      dateExpire,
       showDatePickerModal
     }
   }

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue

@@ -28,7 +28,8 @@
         :filter="filterRecipients"
         :label="selectedCollaboratorsLabel"
         :dropdown-should-open="
-          ({ open, search }: DropDownShouldOpenOptions) => open && search.length >= minSearchLength && !searchInProgress
+          ({ open, search }: DropDownShouldOpenOptions) =>
+            open && search.length >= minSearchLength && !searchInProgress
         "
         @search:input="onSearch"
         @update:model-value="resetFocusOnInvite"
@@ -89,18 +90,13 @@
         :is-external="isExternalShareRoleType"
         @option-change="collaboratorRoleChanged"
       />
-      <div class="oc-flex">
-        <div v-if="expirationDate" class="oc-flex oc-flex-middle">
-          <oc-icon
-            v-oc-tooltip="formattedExpirationDate"
-            class="files-collaborators-collaborator-expiration"
-            data-testid="recipient-info-expiration-date"
-            :aria-label="formattedExpirationDate"
-            name="calendar-event"
-            fill-type="line"
-          />
-          <span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
-        </div>
+      <div class="oc-flex oc-flex-middle">
+        <expiration-date-indicator
+          v-if="expirationDate"
+          :expiration-date="DateTime.fromISO(expirationDate)"
+          class="files-collaborators-collaborator-expiration"
+          data-testid="recipient-info-expiration-date"
+        />
         <oc-button
           id="show-more-share-options-btn"
           class="oc-mx-s"
@@ -185,13 +181,13 @@ import {
 
 import { computed, defineComponent, inject, ref, unref, watch, onMounted, nextTick, Ref } from 'vue'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
-import { formatDateFromDateTime, formatRelativeDateFromDateTime } from '@ownclouders/web-pkg'
 import { DateTime } from 'luxon'
 import { OcDrop } from 'design-system/src/components'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 import { isProjectSpaceResource } from '@ownclouders/web-client'
 import { Group } from '@ownclouders/web-client/graph/generated'
+import ExpirationDateIndicator from '../../ExpirationDateIndicator.vue'
 
 // just a dummy function to trick gettext tools
 const $gettext = (str: string) => {
@@ -210,6 +206,7 @@ export type ShareRoleType = { id: string; label: string; longLabel: string }
 export default defineComponent({
   name: 'InviteCollaboratorForm',
   components: {
+    ExpirationDateIndicator,
     AutocompleteItem,
     RoleDropdown,
     RecipientContainer,
@@ -518,6 +515,7 @@ export default defineComponent({
       isExternalShareRoleType,
       selectShareRoleType,
       focusShareInput,
+      DateTime,
 
       // CERN
       accountType,
@@ -536,29 +534,6 @@ export default defineComponent({
 
     selectedCollaboratorsLabel() {
       return this.inviteLabel || this.$gettext('Search')
-    },
-
-    formattedExpirationDate() {
-      return this.expirationDate === null
-        ? null
-        : formatDateFromDateTime(
-            DateTime.fromISO(this.expirationDate).endOf('day'),
-            this.$language.current
-          )
-    },
-    expirationDateRelative() {
-      return this.expirationDate === null
-        ? null
-        : formatRelativeDateFromDateTime(
-            DateTime.fromISO(this.expirationDate).endOf('day'),
-            this.$language.current
-          )
-    },
-    screenreaderShareExpiration() {
-      return this.$gettext('Share expires %{ expiryDateRelative } (%{ expiryDate })', {
-        expiryDateRelative: this.expirationDateRelative,
-        expiryDate: this.expirationDate
-      })
     }
   },
   mounted() {

packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue

@@ -88,17 +88,12 @@
             <span class="text oc-text-truncate" v-text="sharedParentDir" />
           </router-link>
         </div>
-        <span v-if="hasExpirationDate">
-          <oc-icon
-            v-oc-tooltip="expirationDate"
-            class="files-collaborators-collaborator-expiration"
-            data-testid="recipient-info-expiration-date"
-            :aria-label="expirationDate"
-            name="calendar-event"
-            fill-type="line"
-          />
-          <span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
-        </span>
+        <expiration-date-indicator
+          v-if="hasExpirationDate"
+          class="files-collaborators-collaborator-expiration"
+          data-testid="recipient-info-expiration-date"
+          :expiration-date="DateTime.fromISO(share.expirationDateTime)"
+        />
         <edit-dropdown
           :id="`edit-drop-down-${editDropDownToggleId}`"
           class="files-collaborators-collaborator-edit"
@@ -145,18 +140,20 @@ import {
 import { Resource, extractDomSelector } from '@ownclouders/web-client'
 import { computed, defineComponent, inject, PropType, Ref } from 'vue'
 import * as uuid from 'uuid'
-import { formatDateFromDateTime, formatRelativeDateFromDateTime } from '@ownclouders/web-pkg'
+import { formatDateFromDateTime } from '@ownclouders/web-pkg'
 import { useClientService } from '@ownclouders/web-pkg'
 import { OcInfoDrop, OcDrop } from 'design-system/src/components'
 import { RouteLocationNamedRaw } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 import { SpaceResource } from '@ownclouders/web-client'
 import { isProjectSpaceResource } from '@ownclouders/web-client'
 import { ContextualHelperDataListItem } from 'design-system/src/helpers'
+import ExpirationDateIndicator from '../ExpirationDateIndicator.vue'
 
 export default defineComponent({
   name: 'ListItem',
   components: {
+    ExpirationDateIndicator,
     EditDropdown,
     RoleDropdown
   },
@@ -250,7 +247,8 @@ export default defineComponent({
       showMessage,
       showErrorMessage,
       upsertSpace,
-      upsertSpaceMember
+      upsertSpaceMember,
+      DateTime
     }
   },
   computed: {
@@ -313,13 +311,6 @@ export default defineComponent({
       return this.$gettext('Share receiver name: %{ displayName }', context)
     },
 
-    screenreaderShareExpiration() {
-      return this.$gettext('Share expires %{ expiryDateRelative } (%{ expiryDate })', {
-        expiryDateRelative: this.expirationDateRelative,
-        expiryDate: this.expirationDate
-      })
-    },
-
     hasExpirationDate() {
       return !!this.share.expirationDateTime
     },
@@ -331,13 +322,6 @@ export default defineComponent({
       )
     },
 
-    expirationDateRelative() {
-      return formatRelativeDateFromDateTime(
-        DateTime.fromISO(this.share.expirationDateTime).endOf('day'),
-        this.$language.current
-      )
-    },
-
     editDropDownToggleId() {
       return uuid.v4()
     },
@@ -465,10 +449,6 @@ export default defineComponent({
   }
 }
 
-.files-collaborators-collaborator-expiration {
-  margin-top: 5px;
-}
-
 .files-collaborators-collaborator-navigation {
   justify-content: end;
 }

packages/web-app-files/src/components/SideBar/Shares/ExpirationDateIndicator.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="oc-flex oc-flex-center expiration-date-indicator">
+    <oc-icon
+      v-oc-tooltip="expirationDateTooltip"
+      :aria-label="expirationDateTooltip"
+      name="calendar-event"
+      fill-type="line"
+    />
+    <span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, unref } from 'vue'
+import { DateTime } from 'luxon'
+import { formatDateFromDateTime, formatRelativeDateFromDateTime } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+
+export default defineComponent({
+  name: 'ExpirationDateIndicator',
+  props: {
+    expirationDate: { type: Object as PropType<DateTime>, required: false, default: null }
+  },
+  setup(props) {
+    const { $gettext, current: currentLanguage } = useGettext()
+
+    const expirationDateRelative = computed(() => {
+      return formatRelativeDateFromDateTime(props.expirationDate, currentLanguage)
+    })
+
+    const dateExpire = computed(() => {
+      return formatDateFromDateTime(props.expirationDate, currentLanguage)
+    })
+
+    const expirationDateTooltip = computed(() => {
+      return $gettext(
+        'Expires %{timeToExpiry} (%{expiryDate})',
+        { timeToExpiry: unref(expirationDateRelative), expiryDate: unref(dateExpire) },
+        true
+      )
+    })
+
+    const screenreaderShareExpiration = computed(() => {
+      return $gettext('Share expires %{ expiryDateRelative } (%{ expiryDate })', {
+        expiryDateRelative: unref(expirationDateRelative),
+        expiryDate: unref(dateExpire)
+      })
+    })
+
+    return {
+      expirationDateTooltip,
+      screenreaderShareExpiration
+    }
+  }
+})
+</script>