[FEATURE] more accessible news-carousel (#352)

* [FEATURE] more accessbible news-carousel * use article tag for each news section * use buttons for prev/next navigation * Hide previous/next navigation and pagination for screenreaders: the see the whole list of news anyway and therefore have no additional from those elements * use image tags instead of background images * make focus visible on a-tags of focused images * [FEATURE] more accessible news-carousel resolve linting error (missing empty line between statements in less file)
t3kit · Nov 16, 2017 · 4c9b2aa · 4c9b2aa
1 parent 44bf7ef
commit 4c9b2aa
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 20 deletions.
diff --git a/Resources/Private/Extensions/News/Partials/List/NewsCarousel.html b/Resources/Private/Extensions/News/Partials/List/NewsCarousel.html
@@ -1,12 +1,13 @@
 {namespace n=GeorgRinger\News\ViewHelpers}
 <div class="news-list-view news-carousel {f:format.case(value: '{settings.templateLayout}', mode: 'lower')}">
+	<button aria-hidden="true" class="js__news-carousel__btn-prev news-carousel__btn-prev swiper-button-prev"></button>
 	<div class="swiper-container news-carousel__container js__news-carousel">
 	<!-- Additional required wrapper -->
-		<div class="swiper-wrapper news-carousel__wrapper">
+		<ul class="swiper-wrapper news-carousel__wrapper">
 			<f:for each="{news}" as="newsItem" iteration="iterator">
 
-			<div class="swiper-slide news-carousel__slide">
-				<div class="article articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
+			<li class="swiper-slide news-carousel__slide">
+				<article class="article articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
 					<n:excludeDisplayedNews newsItem="{newsItem}"/>
 
 					<f:if condition="{newsItem.mediaPreviews}">
@@ -16,13 +17,13 @@
 								<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
 									<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
 										<f:if condition="{mediaElement.originalResource.type} == 2">
-											<div class="news-carousel__media-preview"  style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
+											<f:media width="355" class="news-carousel__media-preview"  file="{mediaElement.originalResource}"/>
 										</f:if>
 										<f:if condition="{mediaElement.originalResource.type} == 4">
 											<f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
 										</f:if>
 										<f:if condition="{mediaElement.originalResource.type} == 5">
-											<div class="news-carousel__media-preview"  style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
+											<f:media width="355" class="news-carousel__media-preview"  file="{mediaElement.originalResource}"/>
 										</f:if>
 									</f:alias>
 								</n:link>
@@ -46,9 +47,9 @@
 						<f:else>
 							<f:if condition="{settings.displayDummyIfNoMedia}">
 								<div class="news-carousel__img-wrap">
-									<div class="no-media-element">
+									<div class="no-media-element" aria-hidden="true">
 										<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
-										<div class="news-carousel__media-preview"  style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');"></div>
+											<f:image width="355" class="news-carousel__media-preview"  src="{settings.list.media.dummyImage}"/>
 										</n:link>
 									</div>
 
@@ -92,15 +93,14 @@ <h3>
 						</f:if>
 					</div>
 
-				</div>
+				</article>
 
-			</div>
+			</li>
 
 			</f:for>
-		</div>
-		<div class="js__news-carousel__pagination news-carousel__pagination swiper-pagination"></div>
+		</ul>
+		<div aria-hidden="true" class="js__news-carousel__pagination news-carousel__pagination swiper-pagination"></div>
 	</div>
-	<div class="js__news-carousel__btn-prev news-carousel__btn-prev swiper-button-prev"></div>
-	<div class="js__news-carousel__btn-next news-carousel__btn-next swiper-button-next"></div>
+	<button aria-hidden="true" class="js__news-carousel__btn-next news-carousel__btn-next swiper-button-next"></button>
 
 </div>
diff --git a/felayout_t3kit/dev/styles/main/plugins/news/newsCarousel.less b/felayout_t3kit/dev/styles/main/plugins/news/newsCarousel.less
@@ -17,19 +17,30 @@
 
 .news-carousel__wrapper {
     padding-bottom: 40px;
+    list-style-type: none;
 }
 
 .news-carousel__media-preview {
-    min-height: 180px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    margin-bottom: 20px;
+    width: 100%;
+    height: auto;
+}
+
+// if object-fit property is supported image in 180px height and use object fit.
+@supports (object-fit: cover) {
+    .news-carousel__media-preview {
+        height: 180px;
+        object-fit: cover;
+    }
 }
 
 .news-carousel__img-wrap {
     position: relative;
+
+    a {
+        display: inline-block;
+    }
 }
+
 //header
 .news-carousel__slide .news-article-header h3 {
     font-size: 18px;
@@ -88,6 +99,7 @@
 .news-carousel__btn-next,
 .news-carousel__btn-prev {
     display: none;
+    border: none;
 }
 
 @media (min-width: @screen-md-min) {
@@ -99,7 +111,8 @@
 
         color: @main-color;
         -moz-osx-font-smoothing: grayscale;
-        height: auto;
+        height: 100%;
+        top: 0;
         font-size: 30px;
     }
 }
@@ -159,7 +172,8 @@
     transition: opacity 0.5s ease, visibility 0.5s ease;
 }
 
-.news-carousel__img-wrap a:hover:after {
+.news-carousel__img-wrap a:hover:after,
+.news-carousel__img-wrap a:focus:after {
     opacity: 0.7;
     visibility: visible;
 }