fix: accessibility improvements for creative FAL images

- Add alt="" fallback when LLM omits alt attribute (WCAG 1.1.1)
- Prevent double-encoding of pre-escaped alt values (double_encode=false)
- Add aria-label to image search inputs (WCAG 1.3.1, 3.3.2)
- Add aria-pressed to image cards for selection state (screen readers)
- Add checkmark overlay on selected images (WCAG 1.4.1 - not color-only)
- Add border-2 on selected cards for stronger visual distinction
- Add role="group" + aria-label to image card containers
- Add aria-expanded to source/preview toggle button
- Add role="status" + aria-live="polite" to empty-search alerts
- Increase badge font size from 0.65rem to 0.75rem for contrast
- Add tests for alt fallback and double-encoding prevention

Author: just-tobi

Classes/Service/PageCreatorService.php

@@ -315,13 +315,22 @@ static function (array $matches) use ($publicUrl): string {
                     $resolved,
                 ) ?? $resolved;
 
-                // Escape alt attribute value for XSS safety
+                // Escape alt attribute value for XSS safety (double_encode=false prevents &)
                 $resolved = preg_replace_callback(
                     '/\balt="([^"]*)"/',
-                    static fn(array $m): string => 'alt="' . htmlspecialchars($m[1], ENT_QUOTES, 'UTF-8') . '"',
+                    static fn(array $m): string => 'alt="' . htmlspecialchars($m[1], ENT_QUOTES, 'UTF-8', false) . '"',
                     $resolved,
                 ) ?? $resolved;
 
+                // Ensure alt attribute exists (WCAG 1.1.1)
+                if (!preg_match('/\balt\s*=/', $resolved)) {
+                    $resolved = preg_replace(
+                        '/<img\b/',
+                        '<img alt=""',
+                        $resolved,
+                    ) ?? $resolved;
+                }
+
                 return $resolved;
             },
             $bodytext,

Resources/Public/JavaScript/wizard.js

@@ -725,6 +725,8 @@ class LandingPageWizard {
 
                 const imageList = document.createElement('div');
                 imageList.className = 'd-flex gap-2 flex-wrap mb-2';
+                imageList.setAttribute('role', 'group');
+                imageList.setAttribute('aria-label', this.label('wizard.content.imageSuggestions'));
 
                 const sectionImages = (images[index] && images[index].length > 0) ? images[index] : [];
                 this.renderImageCards(imageList, sectionImages, index);
@@ -735,6 +737,8 @@ class LandingPageWizard {
                     const emptyInfo = document.createElement('div');
                     emptyInfo.className = 'alert alert-info py-2 px-3 mb-2';
                     emptyInfo.style.fontSize = '0.85em';
+                    emptyInfo.setAttribute('role', 'status');
+                    emptyInfo.setAttribute('aria-live', 'polite');
                     emptyInfo.textContent = this.label('wizard.content.imageAutoSearchEmpty', keywords.join(', '));
                     imageSection.appendChild(emptyInfo);
                 }
@@ -749,6 +753,7 @@ class LandingPageWizard {
                 searchInput.type = 'text';
                 searchInput.className = 'form-control form-control-sm';
                 searchInput.placeholder = this.label('wizard.content.imageSearchPlaceholder');
+                searchInput.setAttribute('aria-label', this.label('wizard.content.imageSearchPlaceholder'));
                 searchInput.style.maxWidth = '250px';
                 if (keywords.length > 0) {
                     searchInput.value = keywords.join(' ');
@@ -893,9 +898,11 @@ class LandingPageWizard {
                         const showingSource = source.style.display !== 'none';
                         preview.style.display = showingSource ? 'block' : 'none';
                         source.style.display = showingSource ? 'none' : 'block';
+                        toggleBtn.setAttribute('aria-expanded', showingSource ? 'false' : 'true');
                     }
                 },
             );
+            toggleBtn.setAttribute('aria-expanded', 'false');
 
             const regenerateBtn = this.createButton(
                 this.label('wizard.button.regenerate'),
@@ -959,6 +966,8 @@ class LandingPageWizard {
 
                 const imageList = document.createElement('div');
                 imageList.className = 'd-flex gap-2 flex-wrap mb-2';
+                imageList.setAttribute('role', 'group');
+                imageList.setAttribute('aria-label', this.label('wizard.content.imageSuggestions'));
 
                 if (hasKeywords) {
                     const images = WizardState.getImages();
@@ -970,6 +979,8 @@ class LandingPageWizard {
                         const emptyInfo = document.createElement('div');
                         emptyInfo.className = 'alert alert-info py-2 px-3 mb-2';
                         emptyInfo.style.fontSize = '0.85em';
+                        emptyInfo.setAttribute('role', 'status');
+                        emptyInfo.setAttribute('aria-live', 'polite');
                         emptyInfo.textContent = this.label('wizard.content.imageAutoSearchEmpty', keywords.join(', '));
                         imageSection.appendChild(emptyInfo);
                     }
@@ -985,6 +996,7 @@ class LandingPageWizard {
                 searchInput.type = 'text';
                 searchInput.className = 'form-control form-control-sm';
                 searchInput.placeholder = this.label('wizard.content.imageSearchPlaceholder');
+                searchInput.setAttribute('aria-label', this.label('wizard.content.imageSearchPlaceholder'));
                 searchInput.style.maxWidth = '250px';
                 if (hasKeywords) {
                     searchInput.value = keywords.join(' ');
@@ -1116,6 +1128,7 @@ class LandingPageWizard {
             imgCard.setAttribute('tabindex', '0');
             imgCard.setAttribute('aria-label', img.title || img.name || 'Image');
             imgCard.dataset.imageUid = String(img.uid);
+            imgCard.style.position = 'relative';
 
             // Auto-select recommended image when no image is selected yet
             const isRecommended = img.recommended === true;
@@ -1124,8 +1137,11 @@ class LandingPageWizard {
                 sections[sectionIndex].imageUid = img.uid;
             }
 
-            if (sections[sectionIndex].imageUid === img.uid) {
-                imgCard.classList.add('border-primary', 'shadow-sm');
+            const isSelected = sections[sectionIndex].imageUid === img.uid;
+            imgCard.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
+            if (isSelected) {
+                imgCard.classList.add('border-primary', 'border-2', 'shadow-sm');
+                this._addCheckOverlay(imgCard);
             }
 
             // Thumbnail or placeholder
@@ -1153,7 +1169,7 @@ class LandingPageWizard {
                 badge.className = img.generated
                     ? 'badge bg-warning text-dark mb-1'
                     : 'badge bg-success text-white mb-1';
-                badge.style.fontSize = '0.65rem';
+                badge.style.fontSize = '0.75rem';
                 badge.textContent = img.generated ? 'AI' : '\u2605 Best';
                 imgBody.appendChild(badge);
             }
@@ -1167,16 +1183,21 @@ class LandingPageWizard {
 
             const selectImage = () => {
                 const secs = WizardState.getContentSections();
-                const isSelected = secs[sectionIndex].imageUid === img.uid;
+                const wasSelected = secs[sectionIndex].imageUid === img.uid;
 
-                secs[sectionIndex].imageUid = isSelected ? 0 : img.uid;
+                secs[sectionIndex].imageUid = wasSelected ? 0 : img.uid;
 
-                // Update visual state for all cards in this section's image list
+                // Update visual + ARIA state for all cards in this section's image list
                 imageList.querySelectorAll('.card').forEach((c) => {
-                    c.classList.remove('border-primary', 'shadow-sm');
+                    c.classList.remove('border-primary', 'border-2', 'shadow-sm');
+                    c.setAttribute('aria-pressed', 'false');
+                    const check = c.querySelector('.image-check-overlay');
+                    if (check) check.remove();
                 });
-                if (!isSelected) {
-                    imgCard.classList.add('border-primary', 'shadow-sm');
+                if (!wasSelected) {
+                    imgCard.classList.add('border-primary', 'border-2', 'shadow-sm');
+                    imgCard.setAttribute('aria-pressed', 'true');
+                    this._addCheckOverlay(imgCard);
                 }
             };
 
@@ -1192,6 +1213,23 @@ class LandingPageWizard {
         });
     }
 
+    /**
+     * Add a checkmark overlay to an image card to visually indicate selection.
+     * Provides a non-color visual indicator (WCAG 1.4.1).
+     *
+     * @param {HTMLElement} card
+     */
+    _addCheckOverlay(card) {
+        const check = document.createElement('span');
+        check.className = 'image-check-overlay';
+        check.setAttribute('aria-hidden', 'true');
+        check.textContent = '\u2713';
+        check.style.cssText = 'position:absolute;top:4px;right:4px;background:#0d6efd;color:#fff;'
+            + 'border-radius:50%;width:20px;height:20px;display:flex;align-items:center;'
+            + 'justify-content:center;font-size:12px;font-weight:bold;line-height:1;';
+        card.appendChild(check);
+    }
+
     /**
      * Re-render content sections using the appropriate renderer for the current generation mode.
      *

Tests/Unit/Service/PageCreatorServiceTest.php

@@ -921,6 +921,55 @@ public function resolveImagePlaceholdersEscapesAltAttribute(): void
         self::assertStringContainsString('src="/fileadmin/hero.jpg"', $result);
     }
 
+    #[Test]
+    public function resolveImagePlaceholdersAddsAltWhenMissing(): void
+    {
+        $file = $this->createMock(File::class);
+        $file->method('getPublicUrl')->willReturn('/fileadmin/hero.jpg');
+
+        $resourceFactory = $this->createMock(ResourceFactory::class);
+        $resourceFactory->method('getFileObject')->with(1)->willReturn($file);
+
+        $dh = $this->createMockDataHandler(['NEW_page' => 1]);
+        $subject = $this->createService($dh, resourceFactory: $resourceFactory);
+
+        $method = new ReflectionMethod(PageCreatorService::class, 'resolveImagePlaceholders');
+        $result = $method->invoke(
+            $subject,
+            '<img data-image-slot="0">',
+            1,
+        );
+
+        // Must have alt attribute for WCAG 1.1.1 compliance
+        self::assertStringContainsString('alt=""', $result);
+        self::assertStringContainsString('src="/fileadmin/hero.jpg"', $result);
+    }
+
+    #[Test]
+    public function resolveImagePlaceholdersDoesNotDoubleEncodeAlt(): void
+    {
+        $file = $this->createMock(File::class);
+        $file->method('getPublicUrl')->willReturn('/fileadmin/hero.jpg');
+
+        $resourceFactory = $this->createMock(ResourceFactory::class);
+        $resourceFactory->method('getFileObject')->with(1)->willReturn($file);
+
+        $dh = $this->createMockDataHandler(['NEW_page' => 1]);
+        $subject = $this->createService($dh, resourceFactory: $resourceFactory);
+
+        $method = new ReflectionMethod(PageCreatorService::class, 'resolveImagePlaceholders');
+        // LLM already produced escaped entity
+        $result = $method->invoke(
+            $subject,
+            '<img data-image-slot="0" alt="Tom &amp; Jerry">',
+            1,
+        );
+
+        // Should not double-encode to &amp;amp;
+        self::assertStringContainsString('alt="Tom &amp; Jerry"', $result);
+        self::assertStringNotContainsString('&amp;amp;', $result);
+    }
+
     #[Test]
     public function htmlCtypeWithImageButNoPlaceholderSkipsSysFileReference(): void
     {