laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make post form attachments accessible (#14666)

Browse Source 
* fix(frontend): Make post form attachments accessible

Adds a role="button", tabindex, and @keydown to MkPostFormAttaches in
order to make it accessible to keyboard users.

* Fix for linter

* Add spacing in type signature
This commit is contained in:
Julia 2024-10-02 20:09:08 -04:00 committed by GitHub
parent e9519b02fb
commit 6fd4de246c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/frontend/src/components/MkPostFormAttaches.vue
View File

@ -7,7 +7,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-show="props.modelValue.length != 0" :class="$style.root"> <div v-show="props.modelValue.length != 0" :class="$style.root">
<Sortable :modelValue="props.modelValue" :class="$style.files" itemKey="id" :animation="150" :delay="100" :delayOnTouchOnly="true" @update:modelValue="v => emit('update:modelValue', v)"> <Sortable :modelValue="props.modelValue" :class="$style.files" itemKey="id" :animation="150" :delay="100" :delayOnTouchOnly="true" @update:modelValue="v => emit('update:modelValue', v)">
<template #item="{element}"> <template #item="{element}">
<div :class="$style.file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)"> <div
:class="$style.file"
role="button"
tabindex="0"
@click="showFileMenu(element, $event)"
@keydown.space.enter="showFileMenu(element, $event)"
@contextmenu.prevent="showFileMenu(element, $event)"
>
<MkDriveFileThumbnail :data-id="element.id" :class="$style.thumbnail" :file="element" fit="cover"/> <MkDriveFileThumbnail :data-id="element.id" :class="$style.thumbnail" :file="element" fit="cover"/>
<div v-if="element.isSensitive" :class="$style.sensitive"> <div v-if="element.isSensitive" :class="$style.sensitive">
<i class="ti ti-eye-exclamation" style="margin: auto;"></i> <i class="ti ti-eye-exclamation" style="margin: auto;"></i>
@ -133,7 +140,7 @@ async function crop(file: Misskey.entities.DriveFile): Promise<void> {
emit('replaceFile', file, newFile); emit('replaceFile', file, newFile);
} }
function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void { function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | KeyboardEvent): void {
if (menuShowing) return; if (menuShowing) return;
const isImage = file.type.startsWith('image/'); const isImage = file.type.startsWith('image/');
@ -199,6 +206,10 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void {
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
cursor: move; cursor: move;
&:focus-visible {
outline-offset: 4px;
}
} }
.thumbnail { .thumbnail {