diff options
| author | Julia <julia@insertdomain.name> | 2024-10-02 20:09:08 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-10-03 09:09:08 +0900 |
| commit | 6fd4de246c8ba0c59afe6f0c0a588d01783514fe (patch) | |
| tree | 5aad097810bf6336a964af643735a631e2ff5cc7 /packages/frontend/src/components | |
| parent | fix(misskey-js): build misskey-js with types (#14665) (diff) | |
| download | misskey-6fd4de246c8ba0c59afe6f0c0a588d01783514fe.tar.gz misskey-6fd4de246c8ba0c59afe6f0c0a588d01783514fe.tar.bz2 misskey-6fd4de246c8ba0c59afe6f0c0a588d01783514fe.zip | |
Make post form attachments accessible (#14666)
* 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
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkPostFormAttaches.vue | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue index 80b75a0875..42322fec3d 100644 --- a/packages/frontend/src/components/MkPostFormAttaches.vue +++ b/packages/frontend/src/components/MkPostFormAttaches.vue @@ -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" + 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"/> <div v-if="element.isSensitive" :class="$style.sensitive"> <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); } -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/'); @@ -199,6 +206,10 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void { border-radius: 4px; overflow: hidden; cursor: move; + + &:focus-visible { + outline-offset: 4px; + } } .thumbnail { |