Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'keyboard-accessibility' (#10084) from Freeplay/calckey:keyboard-accessibility into develop

Browse Source 
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10084
This commit is contained in:
Kainoa Kanter 2023-05-10 22:20:57 +00:00
commit 8154082b72
10 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/client/src/components/MkMediaImage.vue
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 {

5
packages/client/src/components/MkNote.vue
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>

5
packages/client/src/components/MkPostForm.vue
View File

@ -1,8 +1,9 @@
<template>
<div
<section
v-size="{ max: [310, 500] }"
class="gafaadew"
:class="{ modal, _popup: modal }"
:aria-label="i18n.ts._pages.blocks.post"
@dragover.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@ -218,7 +219,7 @@
/>
</datalist>
</div>
</div>
</section>
</template>
<script lang="ts" setup>

8
packages/client/src/components/MkSuperMenu.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="rrevdjwu" :class="{ grid }">
<div v-for="group in def" class="group">
<nav class="rrevdjwu" :class="{ grid }">
<section v-for="group in def" class="group">
<div v-if="group.title" class="title">{{ group.title }}</div>
<div class="items">
@ -48,8 +48,8 @@
</MkA>
</template>
</div>
</div>
</div>
</section>
</nav>
</template>
<script lang="ts">

23
packages/client/src/components/global/MkPageHeader.vue
View File

@ -1,5 +1,5 @@
<template>
<div
<header
v-if="show"
ref="el"
class="fdidabkb"
@ -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>
>
<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"
@ -63,7 +68,7 @@
</div>
</div>
</div>
<div ref="tabsEl" v-if="hasTabs" class="tabs">
<nav ref="tabsEl" v-if="hasTabs" class="tabs">
<button
v-for="tab in tabs"
:ref="(el) => (tabRefs[tab.key] = el)"
@ -79,7 +84,7 @@
<span class="title">{{ tab.title }}</span>
</button>
<div ref="tabHighlightEl" class="highlight"></div>
</div>
</nav>
</template>
<div class="buttons right">
<template v-for="action in actions">
@ -94,7 +99,7 @@
</button>
</template>
</div>
</div>
</header>
</template>
<script lang="ts" setup>
@ -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;

6
packages/client/src/directives/tooltip.ts
View File

@ -20,6 +20,12 @@ export default {
self.hideTimer = null;
self.checkTimer = null;
if (!binding.modifiers.noLabel) {
if (!document.body.contains(el)) return;
if (self.text == null) return;
el.setAttribute("aria-label", self.text);
}
self.close = () => {
if (self._close) {
window.clearInterval(self.checkTimer);

4
packages/client/src/pages/settings/index.vue
View File

@ -26,14 +26,14 @@
></MkSuperMenu>
</div>
</div>
<div
<section
v-if="!(narrow && currentPage?.route.name == null)"
class="main"
>
<div class="bkzroven">
<RouterView />
</div>
</div>
</section>
</div>
</div>
</MkSpacer>

6
packages/client/src/pages/settings/theme.vue
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);

8
packages/client/src/ui/_common_/navbar.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="mvcprjjd" :class="{ iconOnly }">
<header class="mvcprjjd" :class="{ iconOnly }">
<div class="body">
<div class="top">
<div
@ -22,7 +22,7 @@
/><!-- <MkAcct class="text" :user="$i"/> -->
</button>
</div>
<div class="middle">
<nav class="middle">
<MkA
v-click-anime
v-tooltip.noDelay.right="i18n.ts.timeline"
@ -111,7 +111,7 @@
<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.settings }}</span>
</MkA>
</div>
</nav>
<div class="bottom">
<button
v-tooltip.noDelay.right="i18n.ts.note"
@ -137,7 +137,7 @@
</button> -->
</div>
</div>
</div>
</header>
</template>
<script lang="ts" setup>

4
packages/client/src/ui/universal.widgets.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="efzpzdvf">
<aside class="efzpzdvf" :aria-label="i18n.ts._deck._columns.widgets">
<MkAd class="a" :prefer="['widget']" />
<XWidgets
:edit="editMode"
@ -26,7 +26,7 @@
>
<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
</button>
</div>
</aside>
</template>
<script lang="ts" setup>