From: Marcel Werk <burntime@woltlab.com>
Date: Fri, 19 May 2023 15:38:42 +0000 (+0200)
Subject: Improve a11y of embedded content
X-Git-Tag: 6.0.0_Alpha_1~79^2~3
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=47feadc6fae04b05c49f584a94dd80c165cb02ae;p=GitHub%2FWoltLab%2FWCF.git

Improve a11y of embedded content
---

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;