@@ -89,6 +92,8 @@ SPDX-License-Identifier: AGPL-3.0-only
v-if="imageRef.comment"
v-tooltip:dialog="imageRef.comment"
:class="['_button', $style.controlItem]"
+ tabindex="-1"
+ @click.stop="() => {}"
>
ALT
@@ -99,6 +104,8 @@ SPDX-License-Identifier: AGPL-3.0-only
v-if="['image/gif', 'image/apng'].includes(imageRef.type)"
v-tooltip:dialog="i18n.ts._tms.displayingGifFiles"
:class="['_button', $style.controlItem]"
+ tabindex="-1"
+ @click.stop="() => {}"
>
GIF
@@ -106,6 +113,8 @@ SPDX-License-Identifier: AGPL-3.0-only
v-if="imageRef.isSensitive"
v-tooltip:dialog="i18n.ts._tms.displayingSensitiveFiles"
:class="['_button', $style.controlItem]"
+ tabindex="-1"
+ @click.stop="() => {}"
>
NSFW
@@ -196,6 +205,10 @@ const showImageMenu = (ev: MouseEvent) => {
overflow: hidden; // fallback (overflow: clip)
overflow: clip;
border-radius: var(--mediaList-radius, 8px);
+
+ &:focus-visible {
+ outline: none;
+ }
}
.rootVisible {
@@ -296,6 +309,10 @@ const showImageMenu = (ev: MouseEvent) => {
&:last-child {
padding-right: clamp(4px, calc(8px * var(--mediaImage-scale)), 8px);
}
+
+ &:focus-visible {
+ outline: none;
+ }
}
.controlsUpperRight {
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index d9d2541fe21c..295efce3d1e5 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -39,6 +39,7 @@ import 'photoswipe/style.css';
import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
import { claimZIndex } from '@/os.js';
import { defaultStore } from '@/store.js';
+import { focusParent } from '@/scripts/tms/focus.js';
import XAudio from '@/components/MkMediaAudio.vue';
import XBanner from '@/components/MkMediaBanner.vue';
import XImage from '@/components/MkMediaImage.vue';
@@ -55,7 +56,9 @@ const gallery = shallowRef
();
const pswpZIndex = claimZIndex('middle');
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
const count = computed(() => props.mediaList.filter(media => previewable(media)).length);
-let lightbox: PhotoSwipeLightbox | null;
+let lightbox: PhotoSwipeLightbox | null = null;
+
+let activeEl: HTMLElement | null = null;
const popstateHandler = (): void => {
if (lightbox?.pswp && lightbox.pswp.isOpen === true) {
@@ -66,7 +69,7 @@ const popstateHandler = (): void => {
async function calcAspectRatio() {
if (!gallery.value) return;
- let img = props.mediaList[0];
+ const img = props.mediaList[0];
if (props.mediaList.length !== 1 || !(img.properties.width && img.properties.height)) {
gallery.value.style.aspectRatio = '';
@@ -141,6 +144,7 @@ onMounted(() => {
bgOpacity: 1,
showAnimationDuration: 100,
hideAnimationDuration: 100,
+ returnFocus: false,
pswpModule: PhotoSwipe,
});
@@ -169,39 +173,47 @@ onMounted(() => {
lightbox.on('uiRegister', () => {
lightbox?.pswp?.ui?.registerElement({
name: 'altText',
- className: 'pwsp__alt-text-container',
+ className: 'pswp__alt-text-container',
appendTo: 'wrapper',
- onInit: (el, pwsp) => {
- let textBox = document.createElement('p');
- textBox.className = 'pwsp__alt-text _acrylic';
+ onInit: (el, pswp) => {
+ const textBox = document.createElement('p');
+ textBox.className = 'pswp__alt-text _acrylic';
el.appendChild(textBox);
- pwsp.on('change', () => {
- textBox.textContent = pwsp.currSlide?.data.comment;
+ pswp.on('change', () => {
+ textBox.textContent = pswp.currSlide?.data.comment;
});
},
});
});
- lightbox.init();
-
- window.addEventListener('popstate', popstateHandler);
-
- lightbox.on('beforeOpen', () => {
+ lightbox.on('afterInit', () => {
+ activeEl = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+ focusParent(activeEl, true, true);
+ lightbox?.pswp?.element?.focus({
+ preventScroll: true,
+ });
history.pushState(null, '', '#pswp');
});
- lightbox.on('close', () => {
+ lightbox.on('destroy', () => {
+ focusParent(activeEl, true, false);
+ activeEl = null;
if (window.location.hash === '#pswp') {
history.back();
}
});
+
+ window.addEventListener('popstate', popstateHandler);
+
+ lightbox.init();
});
onUnmounted(() => {
window.removeEventListener('popstate', popstateHandler);
lightbox?.destroy();
lightbox = null;
+ activeEl = null;
});
const previewable = (file: Misskey.entities.DriveFile): boolean => {
@@ -209,6 +221,16 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => {
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
};
+
+const openGallery = () => {
+ if (props.mediaList.filter(media => previewable(media)).length > 0) {
+ lightbox?.loadAndOpen(0);
+ }
+};
+
+defineExpose({
+ openGallery,
+});