Improved a11y of content items

diff --git a/com.woltlab.wcf/templates/articleListItems.tpl b/com.woltlab.wcf/templates/articleListItems.tpl
index 3f3aeba59982520ec9623dfaa0f7e0cce6ab3fa4..fbdc522170f3a079e65fb85f2656c0fbf95d210b 100644 (file)
--- a/com.woltlab.wcf/templates/articleListItems.tpl
+++ b/com.woltlab.wcf/templates/articleListItems.tpl
@@ -27,14 +27,12 @@
                                                </div>
                                        {/if}
                                        
-                                       <h2 class="contentItemTitle">{$article->getTitle()}</h2>
+                                       <h2 class="contentItemTitle"><a href="{$article->getLink()}" class="contentItemTitleLink">{$article->getTitle()}</a></h2>
                                        
                                        <div class="contentItemDescription">
                                                {@$article->getFormattedTeaser()}
                                        </div>
                                </div>
-                               
-                               <a href="{$article->getLink()}" class="contentItemLinkShadow"></a>
                        </div>
                        
                        <div class="contentItemMeta">

diff --git a/wcfsetup/install/files/style/ui/contentItem.scss b/wcfsetup/install/files/style/ui/contentItem.scss
index dc2d09a5b307afa1572fb2d53b9aa77fe6334169..872b8a78664eb516a79bd79c220e61e09f47c61a 100644 (file)
--- a/wcfsetup/install/files/style/ui/contentItem.scss
+++ b/wcfsetup/install/files/style/ui/contentItem.scss
@@ -31,9 +31,27 @@
 
 .contentItemLink {
        flex: 1 auto;
-       position: relative;
 }
 
+.contentItemTitleLink {
+       color: inherit;
+
+       &::before {
+               bottom: 0;
+               content: "";
+               left: 0;
+               position: absolute;
+               right: 0;
+               top: 0;
+       }
+
+       &:hover,
+       &:focus {
+               color: inherit;
+       }
+}
+
+/* Deprecated: use contentItemTitleLink instead. */
 .contentItemLinkShadow {
        bottom: 0;
        left: 0;