[BUGFIX] revert news-carousel accessibility improvements (#352)

t3kit · Feb 15, 2018 · f1b155e · f1b155e
1 parent 790748b
commit f1b155e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 39 deletions.
diff --git a/Resources/Private/Extensions/News/Partials/List/NewsCarousel.html b/Resources/Private/Extensions/News/Partials/List/NewsCarousel.html
@@ -1,13 +1,12 @@
 {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 -->
-		<ul class="swiper-wrapper news-carousel__wrapper">
+		<div class="swiper-wrapper news-carousel__wrapper">
 			<f:for each="{news}" as="newsItem" iteration="iterator">
 
-			<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">
+			<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">
 					<n:excludeDisplayedNews newsItem="{newsItem}"/>
 
 					<f:if condition="{newsItem.mediaPreviews}">
@@ -17,19 +16,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="height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}px">
-												<f:media file="{mediaElement}" width="355"/>
-											</div>
+											<div class="news-carousel__media-preview"  style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
 										</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="height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}px">
-												<f:media file="{mediaElement}" width="355"/>
-											</div>
+											<div class="news-carousel__media-preview"  style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
 										</f:if>
 									</f:alias>
 								</n:link>
@@ -53,11 +46,9 @@
 						<f:else>
 							<f:if condition="{settings.displayDummyIfNoMedia}">
 								<div class="news-carousel__img-wrap">
-									<div class="no-media-element" aria-hidden="true">
+									<div class="no-media-element">
 										<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)}');
-										height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}px"></div>
+										<div class="news-carousel__media-preview"  style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');"></div>
 										</n:link>
 									</div>
 
@@ -101,14 +92,15 @@ <h3>
 						</f:if>
 					</div>
 
-				</article>
+				</div>
 
-			</li>
+			</div>
 
 			</f:for>
-		</ul>
-		<div aria-hidden="true" class="js__news-carousel__pagination news-carousel__pagination swiper-pagination"></div>
+		</div>
+		<div class="js__news-carousel__pagination news-carousel__pagination swiper-pagination"></div>
 	</div>
-	<button aria-hidden="true" class="js__news-carousel__btn-next news-carousel__btn-next swiper-button-next"></button>
+	<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>
 
 </div>
diff --git a/felayout_t3kit/dev/styles/main/plugins/news/newsCarousel.less b/felayout_t3kit/dev/styles/main/plugins/news/newsCarousel.less
@@ -17,31 +17,19 @@
 
 .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;
-    overflow: hidden;
-    position: relative;
-
-    img {
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-        position: absolute;
-        max-width: none;
-    }
 }
 
 .news-carousel__img-wrap {
     position: relative;
 }
-
 //header
 .news-carousel__slide .news-article-header h3 {
     font-size: 18px;
@@ -100,7 +88,6 @@
 .news-carousel__btn-next,
 .news-carousel__btn-prev {
     display: none;
-    border: none;
 }
 
 @media (min-width: @screen-md-min) {
@@ -112,8 +99,7 @@
 
         color: @main-color;
         -moz-osx-font-smoothing: grayscale;
-        height: 100%;
-        top: 0;
+        height: auto;
         font-size: 30px;
     }
 }
@@ -173,8 +159,7 @@
     transition: opacity 0.5s ease, visibility 0.5s ease;
 }
 
-.news-carousel__img-wrap a:hover:after,
-.news-carousel__img-wrap a:focus:after {
+.news-carousel__img-wrap a:hover:after {
     opacity: 0.7;
     visibility: visible;
 }