natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10084
This commit is contained in:
Kainoa Kanter 2023-05-10 22:20:57 +00:00
parent 3adcc107ff f5867f2541
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> <template>
<div v-if="hide" class="qjewsnkg" @click="hide = false"> <button v-if="hide" class="qjewsnkg" @click="hide = false">
<ImgWithBlurhash <ImgWithBlurhash
class="bg" class="bg"
:hash="image.blurhash" :hash="image.blurhash"
@ -15,7 +15,7 @@
<span style="display: block">{{ i18n.ts.clickToShow }}</span> <span style="display: block">{{ i18n.ts.clickToShow }}</span>
</div> </div>
</div> </div>
</div> </button>
<div v-else class="gqnyydlz"> <div v-else class="gqnyydlz">
<a :href="image.url" :title="image.name"> <a :href="image.url" :title="image.name">
<ImgWithBlurhash <ImgWithBlurhash
@ -79,6 +79,7 @@ watch(
<style lang="scss" scoped> <style lang="scss" scoped>
.qjewsnkg { .qjewsnkg {
all: unset;
position: relative; position: relative;
> .bg { > .bg {
@ -103,6 +104,10 @@ watch(
color: #fff; color: #fff;
} }
} }
&:focus-visible {
border: 2px solid var(--accent);
}
} }
.gqnyydlz { .gqnyydlz {

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<div <header
v-if="show" v-if="show"
ref="el" ref="el"
class="fdidabkb" class="fdidabkb"
@ -7,12 +7,17 @@
:style="{ background: bg }" :style="{ background: bg }"
@click="onClick" @click="onClick"
> >
<i <button
@click="goBack()"
v-if="props.displayBackButton" v-if="props.displayBackButton"
class="_button button icon backButton"
@click.stop="goBack()"
@touchstart="preventDrag"
v-tooltip.noDelay="i18n.ts.goBack" 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"> <div v-if="narrow" class="buttons left" @click="openAccountMenu">
<MkAvatar <MkAvatar
v-if="props.displayMyAvatar && $i" v-if="props.displayMyAvatar && $i"
@ -63,7 +68,7 @@
</div> </div>
</div> </div>
</div> </div>
<div ref="tabsEl" v-if="hasTabs" class="tabs"> <nav ref="tabsEl" v-if="hasTabs" class="tabs">
<button <button
v-for="tab in tabs" v-for="tab in tabs"
:ref="(el) => (tabRefs[tab.key] = el)" :ref="(el) => (tabRefs[tab.key] = el)"
@ -79,7 +84,7 @@
<span class="title">{{ tab.title }}</span> <span class="title">{{ tab.title }}</span>
</button> </button>
<div ref="tabHighlightEl" class="highlight"></div> <div ref="tabHighlightEl" class="highlight"></div>
</div> </nav>
</template> </template>
<div class="buttons right"> <div class="buttons right">
<template v-for="action in actions"> <template v-for="action in actions">
@ -94,7 +99,7 @@
</button> </button>
</template> </template>
</div> </div>
</div> </header>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -377,7 +382,7 @@ onUnmounted(() => {
display: none; display: none;
} }
> .button { > .button/*, @at-root .backButton*/ { /* I don't know how to get this to work */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

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

@ -20,6 +20,12 @@ export default {
self.hideTimer = null; self.hideTimer = null;
self.checkTimer = 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 = () => { self.close = () => {
if (self._close) { if (self._close) {
window.clearInterval(self.checkTimer); window.clearInterval(self.checkTimer);

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

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

6
packages/client/src/pages/settings/theme.vue
View File

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

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

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

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

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