Skip to content

Commit d32abae

Browse files
PytalPytal
committed
fix(files_sharing): Return focus to trigger element on sharing details close
Signed-off-by: Christopher Ng <[email protected]>
1 parent e49c331 commit d32abae

File tree

3 files changed

+91
-62
lines changed

3 files changed

+91
-62
lines changed

‎apps/files_sharing/src/components/SharingEntryLink.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,9 @@
125125
@close="onMenuClose">
126126
<template v-if="share">
127127
<template v-if="share.canEdit && canReshare">
128-
<NcActionButton :disabled="saving" @click.prevent="openSharingDetails">
128+
<NcActionButton :disabled="saving"
129+
:close-after-click="true"
130+
@click.prevent="openSharingDetails">
129131
<template #icon>
130132
<Tune />
131133
</template>

‎apps/files_sharing/src/components/SharingInput.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
:user-select="true"
3636
:options="options"
3737
@search="asyncFind"
38-
@option:selected="openSharingDetails">
38+
@option:selected="onSelected">
3939
<template #no-options="{ search }">
4040
{{ search ? noResultText : t('files_sharing', 'No recommendations. Start typing.') }}
4141
</template>
@@ -155,6 +155,11 @@ export default {
155155
},
156156
157157
methods: {
158+
onSelected(option) {
159+
this.value = null // Reset selected option
160+
this.openSharingDetails(option)
161+
},
162+
158163
async asyncFind(query) {
159164
// save current query to check if we display
160165
// recommendations or search results

‎apps/files_sharing/src/views/SharingTab.vue‎

Lines changed: 82 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -28,68 +28,69 @@
2828
<h2>{{ error }}</h2>
2929
</div>
3030

31-
<template v-if="!showSharingDetailsView">
32-
<!-- shares content -->
33-
<div class="sharingTab__content">
34-
<!-- shared with me information -->
35-
<ul>
36-
<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
37-
<template #avatar>
38-
<NcAvatar :user="sharedWithMe.user"
39-
:display-name="sharedWithMe.displayName"
40-
class="sharing-entry__avatar" />
41-
</template>
42-
</SharingEntrySimple>
43-
</ul>
44-
45-
<!-- add new share input -->
46-
<SharingInput v-if="!loading"
47-
:can-reshare="canReshare"
48-
:file-info="fileInfo"
49-
:link-shares="linkShares"
50-
:reshare="reshare"
51-
:shares="shares"
52-
@open-sharing-details="toggleShareDetailsView" />
53-
54-
<!-- link shares list -->
55-
<SharingLinkList v-if="!loading"
56-
ref="linkShareList"
57-
:can-reshare="canReshare"
58-
:file-info="fileInfo"
59-
:shares="linkShares"
60-
@open-sharing-details="toggleShareDetailsView" />
61-
62-
<!-- other shares list -->
63-
<SharingList v-if="!loading"
64-
ref="shareList"
65-
:shares="shares"
66-
:file-info="fileInfo"
67-
@open-sharing-details="toggleShareDetailsView" />
68-
69-
<!-- inherited shares -->
70-
<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
71-
72-
<!-- internal link copy -->
73-
<SharingEntryInternal :file-info="fileInfo" />
74-
75-
<!-- projects -->
76-
<CollectionList v-if="projectsEnabled && fileInfo"
77-
:id="`${fileInfo.id}`"
78-
type="file"
79-
:name="fileInfo.name" />
80-
</div>
81-
82-
<!-- additional entries, use it with cautious -->
83-
<div v-for="(section, index) in sections"
84-
:ref="'section-' + index"
85-
:key="index"
86-
class="sharingTab__additionalContent">
87-
<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
88-
</div>
89-
</template>
31+
<!-- shares content -->
32+
<div v-show="!showSharingDetailsView"
33+
class="sharingTab__content">
34+
<!-- shared with me information -->
35+
<ul>
36+
<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
37+
<template #avatar>
38+
<NcAvatar :user="sharedWithMe.user"
39+
:display-name="sharedWithMe.displayName"
40+
class="sharing-entry__avatar" />
41+
</template>
42+
</SharingEntrySimple>
43+
</ul>
44+
45+
<!-- add new share input -->
46+
<SharingInput v-if="!loading"
47+
:can-reshare="canReshare"
48+
:file-info="fileInfo"
49+
:link-shares="linkShares"
50+
:reshare="reshare"
51+
:shares="shares"
52+
@open-sharing-details="toggleShareDetailsView" />
53+
54+
<!-- link shares list -->
55+
<SharingLinkList v-if="!loading"
56+
ref="linkShareList"
57+
:can-reshare="canReshare"
58+
:file-info="fileInfo"
59+
:shares="linkShares"
60+
@open-sharing-details="toggleShareDetailsView" />
61+
62+
<!-- other shares list -->
63+
<SharingList v-if="!loading"
64+
ref="shareList"
65+
:shares="shares"
66+
:file-info="fileInfo"
67+
@open-sharing-details="toggleShareDetailsView" />
68+
69+
<!-- inherited shares -->
70+
<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
71+
72+
<!-- internal link copy -->
73+
<SharingEntryInternal :file-info="fileInfo" />
74+
75+
<!-- projects -->
76+
<CollectionList v-if="projectsEnabled && fileInfo"
77+
:id="`${fileInfo.id}`"
78+
type="file"
79+
:name="fileInfo.name" />
80+
</div>
81+
82+
<!-- additional entries, use it with cautious -->
83+
<div v-for="(section, index) in sections"
84+
v-show="!showSharingDetailsView"
85+
:ref="'section-' + index"
86+
:key="index"
87+
class="sharingTab__additionalContent">
88+
<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
89+
</div>
9090

9191
<!-- share details -->
92-
<SharingDetailsTab v-else :file-info="shareDetailsData.fileInfo"
92+
<SharingDetailsTab v-if="showSharingDetailsView"
93+
:file-info="shareDetailsData.fileInfo"
9394
:share="shareDetailsData.share"
9495
@close-sharing-details="toggleShareDetailsView"
9596
@add:share="addShare"
@@ -154,6 +155,7 @@ export default {
154155
projectsEnabled: loadState('core', 'projects_enabled', false),
155156
showSharingDetailsView: false,
156157
shareDetailsData: {},
158+
returnFocusElement: null,
157159
}
158160
},
159161
@@ -389,11 +391,31 @@ export default {
389391
}
390392
})
391393
},
394+
392395
toggleShareDetailsView(eventData) {
396+
if (!this.showSharingDetailsView) {
397+
const isAction = Array.from(document.activeElement.classList)
398+
.some(className => className.startsWith('action-'))
399+
if (isAction) {
400+
const menuId = document.activeElement.closest('[role="menu"]')?.id
401+
this.returnFocusElement = document.querySelector(`[aria-controls="${menuId}"]`)
402+
} else {
403+
this.returnFocusElement = document.activeElement
404+
}
405+
}
406+
393407
if (eventData) {
394408
this.shareDetailsData = eventData
395409
}
410+
396411
this.showSharingDetailsView = !this.showSharingDetailsView
412+
413+
if (!this.showSharingDetailsView) {
414+
this.$nextTick(() => { // Wait for next tick as the element must be visible to be focused
415+
this.returnFocusElement?.focus()
416+
this.returnFocusElement = null
417+
})
418+
}
397419
},
398420
},
399421
}

0 commit comments

Comments
 (0)