From 47feadc6fae04b05c49f584a94dd80c165cb02ae Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Fri, 19 May 2023 17:38:42 +0200
Subject: [PATCH] Improve a11y of embedded content

---
 com.woltlab.wcf/templates/articleBBCode.tpl   | 14 ++++++++------
 .../files/acp/templates/articleBBCode.tpl     | 14 ++++++++------
 .../files/style/ui/embeddedContent.scss       | 19 +++++++++++++++++++
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/com.woltlab.wcf/templates/articleBBCode.tpl b/com.woltlab.wcf/templates/articleBBCode.tpl
index 7ce1697407..949f0e1806 100644
--- 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 7ce1697407..949f0e1806 100644
--- 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 328e1fa456..03b28ff285 100644
--- 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;
-- 
2.20.1