Fix more unfocusable elements

This commit is contained in:
Freeplay 2023-05-10 17:44:08 -04:00
parent 5e23d960ab
commit f5867f2541
5 changed files with 25 additions and 12 deletions

View file

@ -1,5 +1,5 @@
<template>
<div v-if="hide" class="qjewsnkg" @click="hide = false">
<button v-if="hide" class="qjewsnkg" @click="hide = false">
<ImgWithBlurhash
class="bg"
:hash="image.blurhash"
@ -15,7 +15,7 @@
<span style="display: block">{{ i18n.ts.clickToShow }}</span>
</div>
</div>
</div>
</button>
<div v-else class="gqnyydlz">
<a :href="image.url" :title="image.name">
<ImgWithBlurhash
@ -79,6 +79,7 @@ watch(
<style lang="scss" scoped>
.qjewsnkg {
all: unset;
position: relative;
> .bg {
@ -103,6 +104,10 @@ watch(
color: #fff;
}
}
&:focus-visible {
border: 2px solid var(--accent);
}
}
.gqnyydlz {

View file

@ -197,7 +197,7 @@
</div>
</article>
</div>
<div v-else class="muted" @click="muted.muted = false">
<button v-else class="muted _button" @click="muted.muted = false">
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
<template #name>
<MkA
@ -212,7 +212,7 @@
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
</template>
</I18n>
</div>
</button>
</template>
<script lang="ts" setup>
@ -747,5 +747,6 @@ function readPromo() {
padding: 8px;
text-align: center;
opacity: 0.7;
width: 100%;
}
</style>

View file

@ -3,7 +3,7 @@
v-size="{ max: [310, 500] }"
class="gafaadew"
:class="{ modal, _popup: modal }"
:aria-label="i18n.ts.blocks.post"
:aria-label="i18n.ts._pages.blocks.post"
@dragover.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"

View file

@ -7,12 +7,17 @@
:style="{ background: bg }"
@click="onClick"
>
<i
@click="goBack()"
<button
v-if="props.displayBackButton"
class="_button button icon backButton"
@click.stop="goBack()"
@touchstart="preventDrag"
v-tooltip.noDelay="i18n.ts.goBack"
class="icon backButton ph-caret-left ph-bold ph-lg"
>
<i
class="ph-caret-left ph-bold ph-lg"
></i>
</button>
<div v-if="narrow" class="buttons left" @click="openAccountMenu">
<MkAvatar
v-if="props.displayMyAvatar && $i"
@ -377,7 +382,7 @@ onUnmounted(() => {
display: none;
}
> .button {
> .button/*, @at-root .backButton*/ { /* I don't know how to get this to work */
display: flex;
align-items: center;
justify-content: center;

View file

@ -296,7 +296,6 @@ definePageMetadata({
> .toggleWrapper {
display: inline-block;
text-align: left;
overflow: clip;
padding: 0 100px;
vertical-align: bottom;
@ -304,6 +303,10 @@ definePageMetadata({
position: absolute;
left: -99em;
}
&:focus-within > .toggle {
outline: auto;
}
}
.toggle {
@ -506,7 +509,6 @@ definePageMetadata({
}
}
}
> .sync {
padding: 14px 16px;
border-top: solid 0.5px var(--divider);