mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-16 00:19:39 +02:00
♿️ fix(worldream): add a11y attributes to modal and dialog components
This commit is contained in:
parent
272132cfc2
commit
44e28bbba8
4 changed files with 14 additions and 2 deletions
|
|
@ -108,6 +108,9 @@
|
|||
<div
|
||||
class="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity"
|
||||
onclick={toggleDialog}
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-label="Close dialog"
|
||||
></div>
|
||||
|
||||
<!-- Modal panel -->
|
||||
|
|
|
|||
|
|
@ -190,6 +190,9 @@
|
|||
<div
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90 p-4"
|
||||
onclick={closeLightbox}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="relative max-h-full max-w-6xl">
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -166,11 +166,15 @@
|
|||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
||||
transition:fade={{ duration: 200 }}
|
||||
onclick={onClose}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="relative w-full max-w-3xl rounded-lg bg-theme-surface p-6 shadow-xl"
|
||||
transition:scale={{ duration: 200, start: 0.95 }}
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
role="document"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
|
|
@ -200,6 +204,8 @@
|
|||
ondragleave={handleDragLeave}
|
||||
ondragover={handleDragOver}
|
||||
ondrop={handleDrop}
|
||||
role="region"
|
||||
aria-label="Datei-Upload-Bereich"
|
||||
>
|
||||
<svg
|
||||
class="mx-auto mb-4 h-12 w-12 text-theme-text-secondary"
|
||||
|
|
|
|||
|
|
@ -253,8 +253,8 @@
|
|||
|
||||
const contentFields = getContentFields();
|
||||
|
||||
// Check if layout should be side-by-side
|
||||
const isSideBySide = node.kind === 'character' || node.kind === 'object';
|
||||
// Check if layout should be side-by-side (reactive to node changes)
|
||||
const isSideBySide = $derived(node.kind === 'character' || node.kind === 'object');
|
||||
</script>
|
||||
|
||||
{#if !isSideBySide && (node.kind === 'world' || node.kind === 'place') && !loadingImages && (images.length > 0 || node.image_url)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue