[FEATURE]: add logoCarousel accessibility (#332)

* add tabindex to access prev/next icon * add aria-label for prev/next icon * control autoplay in element settings
t3kit · Nov 24, 2017 · 4b36c9b · 4b36c9b
1 parent 299ca0b
commit 4b36c9b
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 33 deletions.
diff --git a/Configuration/FlexForms/flexform_logoCarousel.xml b/Configuration/FlexForms/flexform_logoCarousel.xml
@@ -0,0 +1,27 @@
+<T3DataStructure>
+	<meta>
+		<langDisable>1</langDisable>
+	</meta>
+	<sheets>
+		<sDEF>
+			<ROOT>
+				<TCEforms>
+					<sheetTitle>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:elem.flexform.sheetGeneral</sheetTitle>
+				</TCEforms>
+				<type>array</type>
+				<el>
+					<interval>
+						<TCEforms>
+							<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:logoCarousel.flexform.interval</label>
+							<config>
+								<type>input</type>
+								<rows>1</rows>
+								<default>2500</default>
+							</config>
+						</TCEforms>
+					</interval>
+				</el>
+			</ROOT>
+		</sDEF>
+	</sheets>
+</T3DataStructure>
diff --git a/Configuration/TCA/Overrides/tt_content.php b/Configuration/TCA/Overrides/tt_content.php
@@ -489,9 +489,9 @@
             --div--;' .  $coreLanguageFilePrefix .'general,
                 --palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,
                 --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.headers;headers,
+                --linebreak--,pi_flexform;' . $contentElementLanguageFilePrefix . 'tt_content.tabs.settings,
             --div--;' . $contentElementLanguageFilePrefix . 'logoCarousel.tabs.logos,image,
                 --palette--;' . $contentElementLanguageFilePrefix . 'tt_content.palette.imageSize;imageMaxSize,
-
             --div--;' . $frontendLanguageFilePrefix . 'tabs.appearance,
                 --palette--;' . $frontendLanguageFilePrefix . 'palette.frames;frames,
                 --palette--;' . $frontendLanguageFilePrefix . 'palette.appearanceLinks;appearanceLinks,
@@ -506,6 +506,8 @@
         '
     ];
 
+    $GLOBALS['TCA']['tt_content']['columns']['pi_flexform']['config']['ds']['*,logoCarousel'] = $flexformPath . 'flexform_logoCarousel.xml';
+
     // logoCarousel flexform
     // ======================= logoCarousel [end] ==========================================
 

diff --git a/Resources/Private/Language/ContentElements.xlf b/Resources/Private/Language/ContentElements.xlf
@@ -304,6 +304,9 @@
 			<trans-unit id="logoCarousel.tabs.logos">
 				<source>Logos</source>
 			</trans-unit>
+			<trans-unit id="logoCarousel.flexform.interval">
+				<source>Interval in milliseconds(ms)</source>
+			</trans-unit>
 
 			<!--Quote Element-->
 			<trans-unit id="quote.title">

diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
@@ -13,6 +13,22 @@
 			<trans-unit id="bootstrapCarousel.ariaLabel.control">
 				<target>Zeige Bild %1$s von %2$s</target>
 			</trans-unit>
+			<!--LogoCarousel Element-->
+			<trans-unit id="logoCarousel.ariaLabel.nextSlideMessage">
+				<target>Zeige nächstes Logo</target>
+			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.prevSlideMessage">
+				<target>Zeige vorheriges Logo</target>
+			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.firstSlideMessage">
+				<source>Das ist der erste Slide</source>
+			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.lastSlideMessage">
+				<source>Das ist der letzte Slide</source>
+			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.paginationBulletMessage">
+				<source>Zum Slide {{index}} springen</source>
+      </trans-unit>
 			<trans-unit id="skipLinks.mainNav" xml:space="preserve">
 				<target>Direkt zur Hauptnavigation springen</target>
 			</trans-unit>

diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -50,6 +50,21 @@
 			<trans-unit id="contentElement.slider.linkText" xml:space="preserve">
 				<source>Read more</source>
 			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.nextSlideMessage">
+				<source>Show next item</source>
+			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.prevSlideMessage">
+				<source>Show previous item</source>
+			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.firstSlideMessage">
+				<source>This is the first slide</source>
+			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.lastSlideMessage">
+				<source>This is the last slide</source>
+			</trans-unit>
+			<trans-unit id="logoCarousel.ariaLabel.paginationBulletMessage">
+				<source>Go to slide {{index}}</source>
+			</trans-unit>
 
 
 			<!-- Warning message for outdated browsers -->

diff --git a/Resources/Private/Templates/ContentElements/LogoCarousel.html b/Resources/Private/Templates/ContentElements/LogoCarousel.html
@@ -4,13 +4,13 @@
 <f:section name="Main">
 <!-- theme_t3kit: Templates/ContentElements/LogoCarousel.html [begin] -->
 	<f:if condition="{logos}">
-		<div class="logo-carousel swiper-container js__logo-carousel">
+		<div class="logo-carousel swiper-container js__logo-carousel" data-autoplay="{f:if(condition:'{settings.interval}==0', then:'false', else:'{settings.interval}')}">
 			<div class="swiper-wrapper logo-carousel__wrp">
 				<f:for each="{logos}" as="logo">
 					<div class="swiper-slide logo-carousel__slide">
 						<f:if condition="{logo.referenceProperties.link}">
 							<f:then>
-								<f:link.typolink parameter="{logo.referenceProperties.link}" class="logo-carousel__link" title="{logo.title}">
+								<f:link.typolink parameter="{logo.referenceProperties.link}" class="logo-carousel__link" title="{logo.alternative}">
 									<f:render section="renderLogo" arguments="{
 										logoUid: logo.uid,
 										alt: logo.alternative,
@@ -33,8 +33,21 @@
 					</div>
 				</f:for>
 			</div>
-			<div class="js__logo-carousel__btn-next logo-carousel__btn-next swiper-button-next"></div>
-			<div class="js__logo-carousel__btn-prev logo-carousel__btn-prev swiper-button-prev"></div>
+			<div class="js__logo-carousel__btn-next logo-carousel__btn-next swiper-button-next" role="button" tabindex="0"></div>
+			<div class="js__logo-carousel__btn-prev logo-carousel__btn-prev swiper-button-prev" role="button" tabindex="0"></div>
+
+			<f:comment> These labels are used in carousel.js for aria-labels in logo carousel.</f:comment>
+			<script id="js__aria-labels" type="application/json">
+				{
+					"ariaLabel": {
+						"prevSlideMessage": "<f:translate key='logoCarousel.ariaLabel.prevSlideMessage' extensionName='theme_t3kit' />",
+						"nextSlideMessage": "<f:translate key='logoCarousel.ariaLabel.nextSlideMessage' extensionName='theme_t3kit' />",
+						"firstSlideMessage": "<f:translate key='logoCarousel.ariaLabel.firstSlideMessage' extensionName='theme_t3kit' />",
+						"lastSlideMessage": "<f:translate key='logoCarousel.ariaLabel.lastSlideMessage' extensionName='theme_t3kit' />",
+						"paginationBulletMessage": "<f:translate key='logoCarousel.ariaLabel.paginationBulletMessage' extensionName='theme_t3kit' />"
+					}
+				}
+			</script>
 		</div>
 	</f:if>
 <!-- theme_t3kit: Templates/ContentElements/LogoCarousel.html [end] -->

diff --git a/felayout_t3kit/dev/js/main/contentElements/carousel.js b/felayout_t3kit/dev/js/main/contentElements/carousel.js
@@ -6,38 +6,49 @@
   $(document).ready(function () {
     // initialize swiper when document ready
     // http://idangero.us/swiper/api/
-    $('.js__logo-carousel').swiper({
-      nextButton: '.js__logo-carousel__btn-next',
-      prevButton: '.js__logo-carousel__btn-prev',
-      slidesPerView: 5,
-      preloadImages: false,
-      lazyLoading: true,
-      watchSlidesVisibility: true,
-      lazyLoadingInPrevNext: true,
-      spaceBetween: 20,
-      autoplay: 2500,
-      // Responsive breakpoints
-      breakpoints: {
-        // when window width is <= 480px
-        480: {
-          slidesPerView: 1
-        },
+    $('.js__logo-carousel').each(function () {
+      // Get json content from element LogoCarousel.html
+      var label = JSON.parse($('#js__aria-labels').html())
 
-        // when window width is <= 600px
-        600: {
-          slidesPerView: 2
-        },
+      $(this).swiper({
+        nextButton: '.js__logo-carousel__btn-next',
+        prevButton: '.js__logo-carousel__btn-prev',
+        slidesPerView: 5,
+        preloadImages: false,
+        lazyLoading: true,
+        watchSlidesVisibility: true,
+        lazyLoadingInPrevNext: true,
+        spaceBetween: 20,
+        autoplay: $(this).data('autoplay'),
+        a11y: true,
+        prevSlideMessage: label.ariaLabel.prevSlideMessage,
+        nextSlideMessage: label.ariaLabel.nextSlideMessage,
+        firstSlideMessage: label.ariaLabel.firstSlideMessage,
+        lastSlideMessage: label.ariaLabel.lastSlideMessage,
+        paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
+        // Responsive breakpoints
+        breakpoints: {
+          // when window width is <= 480px
+          480: {
+            slidesPerView: 1
+          },
 
-        // when window width is <= 768px
-        768: {
-          slidesPerView: 3
-        },
+          // when window width is <= 600px
+          600: {
+            slidesPerView: 2
+          },
 
-        // when window width is <= 992px
-        992: {
-          slidesPerView: 4
+          // when window width is <= 768px
+          768: {
+            slidesPerView: 3
+          },
+
+          // when window width is <= 992px
+          992: {
+            slidesPerView: 4
+          }
         }
-      }
+      })
     })
   })
 })(jQuery)