Skip to content
Snippets Groups Projects
Verified Commit 7a1596ca authored by Julia's avatar Julia
Browse files

Make post form attachments accessible

Adds a role="button", tabindex, and @keydown to MkPostFormAttaches in
order to make it accessible to keyboard users.
parent c224ed03
No related branches found
No related tags found
2 merge requests!733release 2024.9.1,!638Make post form attachments accessible
Pipeline #1249 failed with stage
in 24 minutes and 37 seconds
This commit is part of merge request !638. Comments created here will be created in the context of that merge request.
......@@ -7,7 +7,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<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)">
<template #item="{element}">
<div :class="$style.file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<div
:class="$style.file"
@click="showFileMenu(element, $event)"
@keydown.space.enter="showFileMenu(element, $event)"
@contextmenu.prevent="showFileMenu(element, $event)"
role="button"
tabindex="0"
>
<MkDriveFileThumbnail :data-id="element.id" :class="$style.thumbnail" :file="element" fit="cover"/>
<div v-if="element.isSensitive" :class="$style.sensitive">
<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
......@@ -132,7 +139,7 @@ async function crop(file: Misskey.entities.DriveFile): Promise<void> {
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;
const isImage = file.type.startsWith('image/');
......@@ -187,6 +194,10 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void {
border-radius: var(--radius-xs);
overflow: hidden;
cursor: move;
&:focus-visible {
outline-offset: 4px;
}
}
.thumbnail {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment