Improve a11y of embedded content

diff --git a/com.woltlab.wcf/templates/articleBBCode.tpl b/com.woltlab.wcf/templates/articleBBCode.tpl
index 7ce169740767d5cddec7e577e3f399774e80005b..949f0e180605d8af749e4c9ea8a2ed9d64a39c80 100644 (file)
--- a/com.woltlab.wcf/templates/articleBBCode.tpl
+++ b/com.woltlab.wcf/templates/articleBBCode.tpl
@@ -8,23 +8,25 @@
                        loading="lazy"
                        alt="">
 
-        <div class="embeddedContentCategory">{lang}wcf.article.bbcode.type{/lang}</div>
+               <div class="embeddedContentCategory">{lang}wcf.article.bbcode.type{/lang}</div>
                
-               <div class="embeddedContentTitle" id="{$titleHash}_articleTitle{@$article->articleID}">{$article->getTitle()}</div>
+               <div class="embeddedContentTitle" id="{$titleHash}_articleTitle{@$article->articleID}">
+                       <a href="{@$article->getLink()}" class="embeddedContentTitleLink">{$article->getTitle()}</a>
+               </div>
                
                <div class="embeddedContentDescription">
                        {@$article->getFormattedTeaser()}
                </div>
-
-               <a href="{@$article->getLink()}" class="embeddedContentLinkShadow"></a>
        </div>
        
        <div class="embeddedContentMeta">
-               {user object=$article->getUserProfile() type='avatar32' class='embeddedContentMetaImage' ariaHidden='true' tabindex='-1'}
+               <div class="embeddedContentMetaImage">
+                       {@$article->getUserProfile()->getAvatar()->getImageTag(32)}
+               </div>
                
                <div class="embeddedContentMetaContent">
                        <div class="embeddedContentMetaAuthor">
-                               {user object=$article->getUserProfile() class='username'}
+                               {@$article->getUserProfile()->getFormattedUsername()}
                        </div>
                        
                        <div class="embeddedContentMetaTime">

diff --git a/wcfsetup/install/files/acp/templates/articleBBCode.tpl b/wcfsetup/install/files/acp/templates/articleBBCode.tpl
index 7ce169740767d5cddec7e577e3f399774e80005b..949f0e180605d8af749e4c9ea8a2ed9d64a39c80 100644 (file)
--- a/wcfsetup/install/files/acp/templates/articleBBCode.tpl
+++ b/wcfsetup/install/files/acp/templates/articleBBCode.tpl
@@ -8,23 +8,25 @@
                        loading="lazy"
                        alt="">
 
-        <div class="embeddedContentCategory">{lang}wcf.article.bbcode.type{/lang}</div>
+               <div class="embeddedContentCategory">{lang}wcf.article.bbcode.type{/lang}</div>
                
-               <div class="embeddedContentTitle" id="{$titleHash}_articleTitle{@$article->articleID}">{$article->getTitle()}</div>
+               <div class="embeddedContentTitle" id="{$titleHash}_articleTitle{@$article->articleID}">
+                       <a href="{@$article->getLink()}" class="embeddedContentTitleLink">{$article->getTitle()}</a>
+               </div>
                
                <div class="embeddedContentDescription">
                        {@$article->getFormattedTeaser()}
                </div>
-
-               <a href="{@$article->getLink()}" class="embeddedContentLinkShadow"></a>
        </div>
        
        <div class="embeddedContentMeta">
-               {user object=$article->getUserProfile() type='avatar32' class='embeddedContentMetaImage' ariaHidden='true' tabindex='-1'}
+               <div class="embeddedContentMetaImage">
+                       {@$article->getUserProfile()->getAvatar()->getImageTag(32)}
+               </div>
                
                <div class="embeddedContentMetaContent">
                        <div class="embeddedContentMetaAuthor">
-                               {user object=$article->getUserProfile() class='username'}
+                               {@$article->getUserProfile()->getFormattedUsername()}
                        </div>
                        
                        <div class="embeddedContentMetaTime">

diff --git a/wcfsetup/install/files/style/ui/embeddedContent.scss b/wcfsetup/install/files/style/ui/embeddedContent.scss
index 328e1fa4564864e02455869dc3e0b137d7ac5e2f..03b28ff28559890df508ca3920a065735eccec4d 100644 (file)
--- a/wcfsetup/install/files/style/ui/embeddedContent.scss
+++ b/wcfsetup/install/files/style/ui/embeddedContent.scss
@@ -36,6 +36,25 @@
        position: relative;
 }
 
+.embeddedContentTitleLink {
+       color: inherit;
+
+       &::before {
+               bottom: 0;
+               content: "";
+               left: 0;
+               position: absolute;
+               right: 0;
+               top: 0;
+       }
+
+       &:hover,
+       &:focus {
+               color: inherit;
+       }
+}
+
+/* @deprecated 6.0 Use `.embeddedContentTitleLink` instead */
 .embeddedContentLinkShadow {
        bottom: 0;
        left: 0;