From 4d45cd38d9f18d01ec051c31790f8da27a1d79ef Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Tue, 16 May 2023 22:40:02 -0400
Subject: [PATCH 1/7] focus to elements

---
 packages/client/src/components/MkChatPreview.vue        | 2 +-
 packages/client/src/components/MkGalleryPostPreview.vue | 4 ++--
 packages/client/src/style.scss                          | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkChatPreview.vue b/packages/client/src/components/MkChatPreview.vue
index 6cd79d74c6..13e0d92317 100644
--- a/packages/client/src/components/MkChatPreview.vue
+++ b/packages/client/src/components/MkChatPreview.vue
@@ -1,7 +1,6 @@
 <template>
 	<MkA
 		class="rivslvers"
-		tabindex="-1"
 		:class="{
 			isMe: isMe(message),
 			isRead: message.groupId
@@ -27,6 +26,7 @@
 						: message.user
 				"
 				:show-indicator="true"
+				disableLink
 			/>
 			<header v-if="message.groupId">
 				<span class="name">{{ message.group.name }}</span>
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index f4f6943838..9004a449d9 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
+	<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel">
 		<div class="thumbnail">
 			<ImgWithBlurhash
 				class="img"
@@ -34,7 +34,7 @@ const props = defineProps<{
 	position: relative;
 	height: 200px;
 
-	&:hover {
+	&:hover, &:focus {
 		text-decoration: none;
 		color: var(--accent);
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index e7b60d4761..8191dac267 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -52,6 +52,7 @@ html {
 	line-height: 1.6;
 	text-size-adjust: 100%;
 	tab-size: 2;
+	scroll-padding: 60px;
 
 	&.f-1 {
 		font-size: 15px;

From 1e0d38dc55918a254f25e12bc669ee99dc9b70eb Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 17 May 2023 00:10:24 -0400
Subject: [PATCH 2/7] There seemed to be no use for that ?

---
 .../client/src/components/MkModalWindow.vue   | 29 +------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index ea5a9aca07..40325dfa10 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -51,7 +51,7 @@
 					</button>
 				</div>
 				<div class="body">
-					<slot :width="bodyWidth" :height="bodyHeight"></slot>
+					<slot></slot>
 				</div>
 			</div>
 		</FocusTrap>
@@ -59,7 +59,6 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from "vue";
 import { FocusTrap } from "focus-trap-vue";
 import MkModal from "./MkModal.vue";
 
@@ -90,8 +89,6 @@ const emit = defineEmits<{
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 let rootEl = $shallowRef<HTMLElement>();
 let headerEl = $shallowRef<HTMLElement>();
-let bodyWidth = $ref(0);
-let bodyHeight = $ref(0);
 
 const close = () => {
 	modal.close();
@@ -101,30 +98,6 @@ const onBgClick = () => {
 	emit("click");
 };
 
-const onKeydown = (evt) => {
-	if (evt.which === 27) {
-		// Esc
-		evt.preventDefault();
-		evt.stopPropagation();
-		close();
-	}
-};
-
-const ro = new ResizeObserver((entries, observer) => {
-	bodyWidth = rootEl.offsetWidth;
-	bodyHeight = rootEl.offsetHeight - headerEl.offsetHeight;
-});
-
-onMounted(() => {
-	bodyWidth = rootEl.offsetWidth;
-	bodyHeight = rootEl.offsetHeight - headerEl.offsetHeight;
-	ro.observe(rootEl);
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
-
 defineExpose({
 	close,
 });

From 49acbd10ae1376ca0848d558a346fe80167b870f Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 17 May 2023 12:34:45 -0400
Subject: [PATCH 3/7] Close modals on browser back

---
 packages/client/src/components/MkMediaList.vue | 16 ++++++++++++++++
 packages/client/src/components/MkModal.vue     | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 0b4ed9dac0..6ee427388e 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -108,6 +108,7 @@ onMounted(() => {
 				  },
 		imageClickAction: "close",
 		tapAction: "toggle-controls",
+		preloadFirstSlide: false,
 		pswpModule: PhotoSwipe,
 	});
 
@@ -162,7 +163,22 @@ onMounted(() => {
 		});
 	});
 
+	lightbox.on("afterInit", () => {
+		history.pushState(null, "", location.href);
+		addEventListener("popstate", close);
+	})
+	lightbox.on("close", () => {
+		removeEventListener("popstate", close);
+		history.back();
+	})
+
 	lightbox.init();
+
+	function close() {
+		removeEventListener("popstate", close);
+		history.forward();
+		lightbox.pswp.close();
+	}
 });
 
 const previewable = (file: misskey.entities.DriveFile): boolean => {
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 0a07f57e0b..287fb1d8cb 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, watch, provide } from "vue";
+import { nextTick, onMounted, watch, provide, onUnmounted } from "vue";
 import * as os from "@/os";
 import { isTouchUsing } from "@/scripts/touch";
 import { defaultStore } from "@/store";
@@ -176,7 +176,11 @@ let transitionDuration = $computed(() =>
 let contentClicking = false;
 
 const focusedElement = document.activeElement;
-function close(opts: { useSendAnimation?: boolean } = {}) {
+function close(ev, opts: { useSendAnimation?: boolean } = {}) {
+	removeEventListener("popstate", close);
+	if (props.preferType == "dialog") {
+		history.forward();
+	}
 	if (opts.useSendAnimation) {
 		useSendAnime = true;
 	}
@@ -354,6 +358,10 @@ const onOpened = () => {
 		},
 		{ passive: true }
 	);
+	if (props.preferType == "dialog") {
+		history.pushState(null, "", location.href);
+	}
+	addEventListener("popstate", close);
 };
 
 onMounted(() => {
@@ -379,6 +387,12 @@ onMounted(() => {
 		}).observe(content!);
 	});
 });
+onUnmounted(() => {
+	removeEventListener("popstate", close);
+	if (props.preferType == "dialog") {
+		history.back();
+	}
+});
 
 defineExpose({
 	close,

From 4bebe2187f1f9fe389423cae18c41e72bf147332 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 17 May 2023 12:53:00 -0400
Subject: [PATCH 4/7] add touch events for tooltip on range input

---
 packages/client/src/components/form/range.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index 69bdc81265..664e518e95 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -15,6 +15,8 @@
 					v-on:change="(x) => onChange(x)"
 					@focus="tooltipShow"
 					@blur="tooltipHide"
+					@touchstart="tooltipShow"
+					@touchend="tooltipHide"
 					@mouseenter="tooltipShow"
 					@mouseleave="tooltipHide"
 					@input="(x) => inputVal = x.target.value"

From da522482aca45497060d2af6e40225dc7484a423 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 17 May 2023 13:46:00 -0400
Subject: [PATCH 5/7] Allow pressing esc to close lightbox

---
 packages/client/src/components/MkMediaList.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 6ee427388e..237afc6753 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -166,6 +166,8 @@ onMounted(() => {
 	lightbox.on("afterInit", () => {
 		history.pushState(null, "", location.href);
 		addEventListener("popstate", close);
+		// This is a workaround. Not sure why, but when clicking to open, it doesn't move focus to the photoswipe. Preventing using esc to close. However when using keyboard to open it already focuses the lightbox fine.
+		lightbox.pswp.element.focus();
 	})
 	lightbox.on("close", () => {
 		removeEventListener("popstate", close);

From eec5f5dc23f73dbaec4e59e2b5b02e7dc7b2d2b4 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 17 May 2023 15:24:51 -0400
Subject: [PATCH 6/7] SubNoteContent fixes

---
 packages/client/src/components/MkCwButton.vue |  1 +
 .../src/components/MkShowMoreButton.vue       | 19 ++++++++++++++-----
 .../src/components/MkSubNoteContent.vue       | 17 ++++++++++++-----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 107e140e73..5a66224592 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -59,6 +59,7 @@ defineExpose({
 <style lang="scss" scoped>
 ._button {
 	font-weight: 700;
+	z-index: 2;
 	> span {
 		background: var(--cwBg) !important;
 		color: var(--cwFg);
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
index 3e91d03fe6..481bc510db 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -1,18 +1,18 @@
 <template>
-	<button v-if="modelValue" class="fade _button" @click.stop="toggle">
-		<span>{{ i18n.ts.showMore }}</span>
-	</button>
-	<button v-if="!modelValue" class="showLess _button" @click.stop="toggle">
-		<span>{{ i18n.ts.showLess }}</span>
+	<button ref="el" class="_button" :class="{ fade: modelValue, showLess: !modelValue }" @click.stop="toggle">
+		<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
 	</button>
 </template>
 <script lang="ts" setup>
 import { i18n } from "@/i18n";
+import { ref } from "vue";
 
 const props = defineProps<{
 	modelValue: boolean;
 }>();
 
+const el = ref<HTMLElement>();
+
 const emit = defineEmits<{
 	(ev: "update:modelValue", v: boolean): void;
 }>();
@@ -20,6 +20,14 @@ const emit = defineEmits<{
 const toggle = () => {
 	emit("update:modelValue", !props.modelValue);
 };
+
+function focus() {
+	el.value.focus();
+}
+
+defineExpose({
+	focus,
+});
 </script>
 <style lang="scss" scoped>
 .fade {
@@ -28,6 +36,7 @@ const toggle = () => {
 	bottom: 0;
 	left: 0;
 	width: 100%;
+	z-index: 2;
 	> span {
 		display: inline-block;
 		background: var(--panel);
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 4742611acc..0c766de307 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -40,6 +40,12 @@
 				disableAnim: disableMfm,
 			}"
 		>
+			<XShowMoreButton
+				ref="showMoreButton"
+				v-if="isLong && collapsed"
+				v-model="collapsed"
+				v-on:keydown="focusFooter"
+			></XShowMoreButton>
 			<XCwButton
 				ref="cwButton"
 				v-if="note.cw && !showContent"
@@ -50,7 +56,7 @@
 			<div
 				class="body"
 				v-bind="{
-					'aria-label': !showContent ? '' : null,
+					'aria-hidden': !showContent ? 'true' : null,
 					tabindex: !showContent ? '-1' : null,
 				}"
 			>
@@ -115,16 +121,16 @@
 					</div>
 				</template>
 				<div
-					v-if="note.cw && !showContent"
+					v-if="note.cw && !showContent || showMoreButton && collapsed"
 					tabindex="0"
-					v-on:focus="cwButton?.focus()"
+					v-on:focus="cwButton?.focus(); showMoreButton?.focus()"
 				></div>
 			</div>
 			<XShowMoreButton
-				v-if="isLong"
+				v-if="isLong && !collapsed"
 				v-model="collapsed"
 			></XShowMoreButton>
-			<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
+			<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" />
 		</div>
 		<MkButton
 			v-if="hasMfm && defaultStore.state.animatedMfm"
@@ -171,6 +177,7 @@ const emit = defineEmits<{
 }>();
 
 const cwButton = ref<HTMLElement>();
+const showMoreButton = ref<HTMLElement>();
 const isLong =
 	!props.detailedView &&
 	props.note.cw == null &&

From c3cd14ece052efadb153258ae9a73c0ccee9432c Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 17 May 2023 16:44:06 -0400
Subject: [PATCH 7/7] (actually) fix clicking audio opening post

---
 packages/client/src/components/MkMediaBanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index 833100843e..576455869d 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="mk-media-banner">
+	<div class="mk-media-banner" @click.stop>
 		<div
 			v-if="media.isSensitive && hide"
 			class="sensitive"