SDSS-846: A11y | Updates to News Vertical Card component (#220)

* SDSS-846: A11y | Updates to News Vertical Card component.
SU-SWS · Aug 30, 2023 · efecbfe · efecbfe
1 parent e498542
commit efecbfe
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/dist/css/sdss_subtheme.css b/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/dist/css/sdss_subtheme.css
diff --git a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/news/_news.scss b/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/news/_news.scss
@@ -10,6 +10,11 @@
       margin-right: 0;
     }
 
+    .su-news-header {
+      display: flex;
+      flex-direction: column;
+    }
+
     .su-news-vertical-teaser__link,
     .su-link {
       @include sdss-link--primary;
@@ -64,6 +69,8 @@
 .news-vertical-teaser__pub-date {
   @include responsive-spacing('padding-bottom', 0);
   @include responsive-spacing('padding-top', 0);
+
+  order: -1;
 }
 
 .news-vertical-teaser__source {

diff --git a/...subtheme/templates/components/news-vertical-teaser/pattern-news-vertical-teaser.html.twig b/...subtheme/templates/components/news-vertical-teaser/pattern-news-vertical-teaser.html.twig
@@ -40,7 +40,7 @@
 
 <article{{ attributes.addClass(classes) }}>
   {%- if news_url is not empty -%}
-    <a {{ news_url_attributes.addClass('su-news-vertical-teaser__link') }} href="{{ news_url }}">
+    <a {{ news_url_attributes.addClass('su-news-vertical-teaser__link') }} href="{{ news_url }}" tab-index="-1" aria-hidden="true">
   {%- endif -%}
   <figure class="su-media su-media--image su-card__media">
     <div class="su-media__wrapper">
@@ -50,7 +50,6 @@
   {%- if news_url is not empty -%}
     </a>
   {%- endif -%}
-  <div class="news-vertical-teaser__pub-date">{{ news_list_publishing_date }}</div>
   <div class="su-news-header">
     {%- if news_url is not empty -%}
       <a {{ news_url_attributes.addClass('su-news-vertical-teaser__link') }} href="{{ news_url }}">
@@ -61,6 +60,7 @@
     {%- if news_url is not empty -%}
       </a>
     {%- endif -%}
+    <div class="news-vertical-teaser__pub-date">{{ news_list_publishing_date }}</div>
 
       <div class="news-vertical-teaser__source">
       {% if news_source|render|striptags('<drupal-render-placeholder>')|trim is not empty %}
@@ -75,4 +75,4 @@
   {%- if news_footer is not empty -%}
     <div class="news-vertical-teaser__footer">{{ news_footer }}</div>
   {%- endif -%}
-</article>
+</article>