️ fix(worldream): add a11y attributes to modal and dialog components

This commit is contained in:
Wuesteon 2025-12-15 19:14:08 +01:00
parent 272132cfc2
commit 44e28bbba8
4 changed files with 14 additions and 2 deletions

View file

@ -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 -->

View file

@ -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

View file

@ -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"

View file

@ -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)}