SubNoteContent fixes

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);

packages/client/src/components/MkShowMoreButton.vue

@@ -1,18 +1,18 @@
 <template>
-	<button v-if="modelValue" class="fade _button" @click.stop="toggle">
+	<button ref="el" class="_button" :class="{ fade: modelValue, showLess: !modelValue }" @click.stop="toggle">
-		<span>{{ i18n.ts.showMore }}</span>
+		<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
-	</button>
-	<button v-if="!modelValue" class="showLess _button" @click.stop="toggle">
-		<span>{{ 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);

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 &&