[TASK] Do not wrap images directly with links

We are removing the links from images to avoid that someone can consider them as functional. https://www.w3.org/WAI/tutorials/images/functional/
benjaminkott · Jun 15, 2023 · 077a765 · 077a765
1 parent c918a8a
commit 077a765
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 42 deletions.
diff --git a/Classes/ViewHelpers/Link/LightboxViewHelper.php b/Classes/ViewHelpers/Link/LightboxViewHelper.php
@@ -34,6 +34,7 @@ public function initializeArguments()
 
         $this->registerArgument('caption', 'string', 'Specifies an caption text', false);
         $this->registerArgument('lightbox-title', 'string', 'Specifies an title text', false);
+        $this->registerArgument('lightbox-alt', 'string', 'Specifies an alt text', false);
         $this->registerArgument('lightbox-caption', 'string', 'Specifies an caption text', false);
 
         $this->registerArgument('image', 'object', 'image', true);
@@ -78,8 +79,9 @@ public function render(): string
             $this->tag->addAttribute('href', $imageUri);
             $this->tag->addAttribute('data-lightbox-width', $processedImage->getProperty('width') !== null ? strval($processedImage->getProperty('width')) : null);
             $this->tag->addAttribute('data-lightbox-height', $processedImage->getProperty('height') !== null ? strval($processedImage->getProperty('height')) : null);
-            $this->tag->addAttribute('data-lightbox-title', isset($this->arguments['lightbox-title']) ? $this->arguments['lightbox-title'] : (isset($this->arguments['title']) ? $this->arguments['title'] : null));
-            $this->tag->addAttribute('data-lightbox-caption', isset($this->arguments['lightbox-caption']) ? $this->arguments['lightbox-caption'] : (isset($this->arguments['caption']) ? $this->arguments['caption'] : null));
+            $this->tag->addAttribute('data-lightbox-title', isset($this->arguments['lightbox-title']) ? $this->arguments['lightbox-title'] : null);
+            $this->tag->addAttribute('data-lightbox-alt', isset($this->arguments['lightbox-alt']) ? $this->arguments['lightbox-alt'] : null);
+            $this->tag->addAttribute('data-lightbox-caption', isset($this->arguments['lightbox-caption']) ? $this->arguments['lightbox-caption'] : null);
             $this->tag->setContent(strval($this->renderChildren()));
             $this->tag->forceClosingTag(true);
         } catch (ResourceDoesNotExistException $e) {

diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -55,6 +55,9 @@
             </trans-unit>
 
             <trans-unit id="lightbox.link.title">
+                <source>Show larger version</source>
+            </trans-unit>
+            <trans-unit id="lightbox.link.title.prefixed">
                 <source>Show larger version for: %s</source>
             </trans-unit>
 

diff --git a/Resources/Private/Partials/ContentElements/Media/Type/Image.html b/Resources/Private/Partials/ContentElements/Media/Type/Image.html
@@ -1,35 +1,36 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">
 <figure class="image">
+    <f:render partial="Media/Rendering/Image" arguments="{file: file, data: data, settings: settings, variants: variants}" />
+    <f:if condition="{file.properties.description}">
+        <figcaption class="caption"><f:format.nl2br>{file.properties.description}</f:format.nl2br></figcaption>
+    </f:if>
     <f:if condition="{file.properties.link}">
         <f:then>
-            <f:link.typolink parameter="{file.properties.link}" title="{file.properties.title}">
-                <f:render partial="Media/Rendering/Image" arguments="{file: file, data: data, settings: settings, variants: variants}" />
-            </f:link.typolink>
+            <f:link.typolink parameter="{file.properties.link}" />
         </f:then>
         <f:else>
             <f:if condition="{data.image_zoom}">
-                <f:then>
-                    <bk2k:link.lightbox
-                        image="{file}"
-                        maxHeight="{settings.lightbox.image.maxHeight}"
-                        maxWidth="{settings.lightbox.image.maxWidth}"
-                        class="{settings.lightbox.cssClass}"
-                        rel="{settings.lightbox.prefix}-{data.uid}"
-                        title="{f:translate(key: 'lightbox.link.title', extensionName: 'bootstrap_package', arguments: '{0: file.properties.title}')}"
-                        lightbox-title="{file.properties.title}"
-                        lightbox-caption="{file.properties.description}"
-                    >
-                        <f:render partial="Media/Rendering/Image" arguments="{file: file, data: data, settings: settings, variants: variants}" />
-                    </bk2k:link.lightbox>
-                </f:then>
-                <f:else>
-                    <f:render partial="Media/Rendering/Image" arguments="{file: file, data: data, settings: settings, variants: variants}" />
-                </f:else>
+                <bk2k:link.lightbox
+                    image="{file}"
+                    maxHeight="{settings.lightbox.image.maxHeight}"
+                    maxWidth="{settings.lightbox.image.maxWidth}"
+                    class="{settings.lightbox.cssClass}"
+                    rel="{settings.lightbox.prefix}-{data.uid}"
+                    lightbox-title="{file.properties.title}"
+                    lightbox-alt="{file.properties.alternative}"
+                    lightbox-caption="{file.properties.description}"
+                >
+                    <f:if condition="{file.properties.title}">
+                        <f:then>
+                            {f:translate(key: 'lightbox.link.title.prefixed', extensionName: 'bootstrap_package', arguments: '{0: file.properties.title}')}
+                        </f:then>
+                        <f:else>
+                            {f:translate(key: 'lightbox.link.title', extensionName: 'bootstrap_package')}
+                        </f:else>
+                    </f:if>
+                </bk2k:link.lightbox>
             </f:if>
         </f:else>
     </f:if>
-    <f:if condition="{file.properties.description}">
-        <figcaption class="caption"><f:format.nl2br>{file.properties.description}</f:format.nl2br></figcaption>
-    </f:if>
 </figure>
 </html>
diff --git a/Resources/Public/Css/bootstrap5-rte.css b/Resources/Public/Css/bootstrap5-rte.css
@@ -18332,6 +18332,26 @@ a.lightbox {
   cursor: zoom-in;
 }
 
+.image {
+  position: relative;
+}
+
+.image > a {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  outline: 0;
+  overflow: hidden;
+  text-indent: -9999px;
+}
+
+.image > a:focus {
+  outline-offset: 1px;
+  outline: 2px solid;
+}
+
 .pswp__dynamic-caption__title,
 .pswp__dynamic-caption__subtitle {
   word-wrap: break-word;

diff --git a/Resources/Public/Css/bootstrap5-rte.min.css b/Resources/Public/Css/bootstrap5-rte.min.css
diff --git a/Resources/Public/Css/bootstrap5-theme.css b/Resources/Public/Css/bootstrap5-theme.css
@@ -18332,6 +18332,26 @@ a.lightbox {
   cursor: zoom-in;
 }
 
+.image {
+  position: relative;
+}
+
+.image > a {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  outline: 0;
+  overflow: hidden;
+  text-indent: -9999px;
+}
+
+.image > a:focus {
+  outline-offset: 1px;
+  outline: 2px solid;
+}
+
 .pswp__dynamic-caption__title,
 .pswp__dynamic-caption__subtitle {
   word-wrap: break-word;

diff --git a/Resources/Public/Css/bootstrap5-theme.min.css b/Resources/Public/Css/bootstrap5-theme.min.css
diff --git a/Resources/Public/JavaScript/Dist/bootstrap.lightbox.min.js b/Resources/Public/JavaScript/Dist/bootstrap.lightbox.min.js
diff --git a/Resources/Public/JavaScript/Src/bootstrap.lightbox.js b/Resources/Public/JavaScript/Src/bootstrap.lightbox.js
@@ -10,36 +10,36 @@ window.addEventListener('DOMContentLoaded', function () {
             let title = null;
             if ("lightboxTitle" in element.dataset && element.dataset.lightboxTitle !== '') {
                 title = element.dataset.lightboxTitle
-            } else if (element.hasAttribute('title') && element.getAttribute('title') !== '') {
-                title = element.getAttribute('title');
+            }
+            let alternative = null;
+            if ("lightboxAlt" in element.dataset && element.dataset.lightboxAlt !== '') {
+                alternative = element.dataset.lightboxAlt
             }
             let caption = null;
             if ("lightboxCaption" in element.dataset && element.dataset.lightboxCaption !== '') {
                 caption = element.dataset.lightboxCaption
-            } else if (element.parentNode.querySelector('figcaption') && element.parentNode.querySelector('figcaption').textContent !== '') {
-                caption = element.parentNode.querySelector('figcaption').textContent
-            }
-            if (caption) {
                 caption = caption.replace(/(?:\r\n|\r|\n)/g, '<br />');
             }
-            if (!title && !!caption) {
-                // If title is not given but caption is, swap properties to workaround an issue where photoswipe doesn't
-                // show the description
-                title = caption;
-                caption = null;
+
+            let imgElement = null;
+            if (element.querySelector('img')) {
+                imgElement = element.querySelector('img');
+            } else if (element.parentElement.querySelector('img')) {
+                imgElement = element.parentElement.querySelector('img');
             }
+
             let item = {
                 id: Array.from(document.querySelectorAll('a.lightbox[rel=' + gid + ']')).indexOf(element),
                 src: element.getAttribute('href'),
                 width: element.dataset.lightboxWidth,
                 height: element.dataset.lightboxHeight,
                 title: title,
+                alt: alternative,
                 caption: caption,
                 element: element,
+                imgElement: imgElement,
             };
-            if (element.querySelector('img')) {
-                item.msrc = element.querySelector('img').getAttribute('src');
-            }
+
             items.push(item);
         });
 
@@ -51,6 +51,12 @@ window.addEventListener('DOMContentLoaded', function () {
                 showHideAnimationType: 'zoom',
                 pswpModule: PhotoSwipe
             });
+            gallery.addFilter('thumbEl', (thumbEl, data, index) => {
+                if (data.imgElement) {
+                    return data.imgElement;
+                }
+                return thumbEl;
+            });
             new PhotoSwipeDynamicCaption(gallery, {
                 type: 'auto',
                 captionContent: (slide) => {

diff --git a/Resources/Public/Scss/plugins/_photoswipe.scss b/Resources/Public/Scss/plugins/_photoswipe.scss
@@ -10,6 +10,23 @@
 a.lightbox {
     cursor: zoom-in;
 }
+.image {
+    position: relative;
+}
+.image > a {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    outline: 0;
+    overflow: hidden;
+    text-indent: -9999px;
+    &:focus {
+        outline-offset: 1px;
+        outline: 2px solid;
+    }
+}
 
 //
 // Caption