TMS-934: Add screen-reader info for article categories

CHANGELOG.MD

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-934: Add screen-reader info for article categories.
 - TMS-936: Image carousel accessibility fixes
 - TMS-933: Modaal accessibility fixes
 

lang/fi.po

@@ -1,8 +1,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: TMS Theme Base\n"
-"POT-Creation-Date: 2023-10-05 11:17+0300\n"
-"PO-Revision-Date: 2023-10-05 11:17+0300\n"
+"POT-Creation-Date: 2023-10-11 13:38+0300\n"
+"PO-Revision-Date: 2023-10-11 13:39+0300\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "Language: fi\n"
@@ -818,6 +818,11 @@ msgctxt "theme-frontend"
 msgid "Text:"
 msgstr "Teksti:"
 
+#: models/strings.php:105
+msgctxt "theme-frontend"
+msgid "Articletype:"
+msgstr "Artikkelityyppi:"
+
 #: models/strings.php:108 models/strings.php:182
 msgctxt "theme-frontend"
 msgid "Month"

lang/tms-theme-base.pot

@@ -2,7 +2,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: TMS Theme Base\n"
-"POT-Creation-Date: 2023-10-05 11:17+0300\n"
+"POT-Creation-Date: 2023-10-11 13:38+0300\n"
 "PO-Revision-Date: 2022-01-12 10:08+0200\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -806,7 +806,7 @@ msgstr ""
 
 #: models/strings.php:105
 msgctxt "theme-frontend"
-msgid "Text:"
+msgid "Articletype:"
 msgstr ""
 
 #: models/strings.php:108 models/strings.php:182

models/strings.php

@@ -103,6 +103,7 @@ public function s() : array {
             'single'             => [
                 'image_credits'   => _x( 'Image:', 'theme-frontend', 'tms-theme-base' ),
                 'writing_credits' => _x( 'Text:', 'theme-frontend', 'tms-theme-base' ),
+                'article_type'    => _x( 'Articletype:', 'theme-frontend', 'tms-theme-base' ),
             ],
             'home'               => [
                 'month'              => _x( 'Month', 'theme-frontend', 'tms-theme-base' ),

partials/views/single/single-meta.dust

@@ -1,4 +1,4 @@
-<div class="entry__meta {spacing_class|s}">
+<div class="entry__meta {spacing_class|attr}">
     <div class="is-flex is-flex-wrap-wrap has-text-small">
         <div>
             {@strtodate value=content.post_date format="j.n.Y H:i" /}
@@ -7,15 +7,15 @@
         <div class="is-flex has-width-100-until-tablet mt-3 mt-0-tablet ml-auto-tablet">
             {?content.fields.writing_credits}
                 <div>
-                    {Strings.s.single.writing_credits|s}
-                    {content.fields.writing_credits|s}
+                    {Strings.s.single.writing_credits|html}
+                    {content.fields.writing_credits|html}
                 </div>
             {/content.fields.writing_credits}
 
             {?content.fields.image_credits}
                 <div class="ml-4 ml-6-fullhd">
-                    {Strings.s.single.image_credits|s}
-                    {content.fields.image_credits|s}
+                    {Strings.s.single.image_credits|html}
+                    {content.fields.image_credits|html}
                 </div>
             {/content.fields.image_credits}
         </div>
@@ -24,15 +24,18 @@
     {?content.categories}
         <div class="is-flex is-flex-wrap-wrap mt-4">
             {#content.categories}
-                <a href="{permalink}" class="pill mr-2 mb-2">{name|s}</a>
+                <a href="{permalink|url}" class="pill mr-2 mb-2">
+                    <span class="is-sr-only">{Strings.s.single.article_type|html}</span>
+                    {name|html}
+                </a>
             {/content.categories}
         </div>
     {/content.categories}
 
     {?content.tags}
         <div class="is-flex is-flex-wrap-wrap mt-4">
             {#content.tags}
-                <a href="{permalink}" class="pill is-outlined mr-2 mb-2">{name|s}</a>
+                <a href="{permalink|url}" class="pill is-outlined mr-2 mb-2">{name|html}</a>
             {/content.tags}
         </div>
     {/content.tags}