Fix focusing inside of CW's

This commit is contained in:
Freeplay 2023-04-28 19:28:25 -04:00
parent 56b6b450c0
commit 6498a90dc1
3 changed files with 42 additions and 7 deletions

View File

@ -1,5 +1,6 @@
<template>
<button
ref="el"
class="_button"
:class="{ showLess: modelValue, fade: !modelValue }"
@click.stop="toggle"
@ -12,7 +13,7 @@
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { computed, ref } from "vue";
import { length } from "stringz";
import * as misskey from "calckey-js";
import { concat } from "@/scripts/array";
@ -27,6 +28,8 @@ const emit = defineEmits<{
(ev: "update:modelValue", v: boolean): void;
}>();
const el = ref<HTMLElement>();
const label = computed(() => {
return concat([
props.note.text
@ -43,6 +46,14 @@ const label = computed(() => {
const toggle = () => {
emit("update:modelValue", !props.modelValue);
};
function focus() {
el.value.focus();
}
defineExpose({
focus
});
</script>
<style lang="scss" scoped>
@ -62,7 +73,7 @@ const toggle = () => {
}
}
}
&:hover > span {
&:hover > span, &:focus > span {
background: var(--cwFg) !important;
color: var(--cwBg) !important;
}

View File

@ -84,6 +84,7 @@
:detailedView="detailedView"
:parentId="appearNote.parentId"
@push="(e) => router.push(notePage(e))"
@focusfooter="footerEl.focus()"
></MkSubNoteContent>
<div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini />
@ -117,7 +118,7 @@
<MkTime :time="appearNote.createdAt" mode="absolute" />
</MkA>
</div>
<footer ref="el" class="footer" @click.stop>
<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
<XReactionsViewer
v-if="enableEmojiReactions"
ref="reactionsViewer"
@ -278,6 +279,7 @@ const isRenote =
note.poll == null;
const el = ref<HTMLElement>();
const footerEl = ref<HTMLElement>();
const menuButton = ref<HTMLElement>();
const starButton = ref<InstanceType<typeof XStarButton>>();
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();

View File

@ -35,7 +35,11 @@
class="content"
:class="{ collapsed, isLong, showContent: note.cw && !showContent }"
>
<div class="body">
<XCwButton ref="cwButton" v-if="note.cw && !showContent" v-model="showContent" :note="note" v-on:keydown="focusFooter" />
<div
class="body"
v-bind="{ 'aria-label': !showContent ? '' : null, 'tabindex': !showContent ? '-1' : null }"
>
<span v-if="note.deletedAt" style="opacity: 0.5"
>({{ i18n.ts.deleted }})</span
>
@ -96,6 +100,11 @@
<XNoteSimple :note="note.renote" />
</div>
</template>
<div
v-if="!showContent"
tabindex="0"
v-on:focus="cwButton?.focus()"
></div>
</div>
<button
v-if="isLong && collapsed"
@ -111,13 +120,13 @@
>
<span>{{ i18n.ts.showLess }}</span>
</button>
<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" />
</div>
</div>
</template>
<script lang="ts" setup>
import {} from "vue";
import { ref } from "vue";
import * as misskey from "calckey-js";
import * as mfm from "mfm-js";
import XNoteSimple from "@/components/MkNoteSimple.vue";
@ -138,8 +147,10 @@ const props = defineProps<{
const emit = defineEmits<{
(ev: "push", v): void;
(ev: "focusfooter"): void;
}>();
const cwButton = ref<HTMLElement>();
const isLong =
!props.detailedView &&
props.note.cw == null &&
@ -151,6 +162,13 @@ const urls = props.note.text
: null;
let showContent = $ref(false);
function focusFooter(ev) {
if (ev.key == "Tab" && !ev.getModifierState("Shift")) {
emit("focusfooter");
}
}
</script>
<style lang="scss" scoped>
@ -242,6 +260,9 @@ let showContent = $ref(false);
margin-top: -50px;
padding-top: 50px;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
&.collapsed > .body {
box-sizing: border-box;
@ -271,6 +292,7 @@ let showContent = $ref(false);
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
> span {
display: inline-block;
background: var(--panel);
@ -279,7 +301,7 @@ let showContent = $ref(false);
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
&:hover {
&:hover, &:focus {
> span {
background: var(--panelHighlight);
}