Skip to content

Commit 13c03d9

Browse files
dkd-oerteldmh
dkd-oertel
authored and
dmh
committed
[BUGFIX] Use class for logo carousel aria labels (#426)
* use class for logo carousel aria labels * update css/less
1 parent cb48742 commit 13c03d9

File tree

4 files changed

+163
-148
lines changed

4 files changed

+163
-148
lines changed

‎Resources/Private/Templates/ContentElements/LogoCarousel.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
<div class="js__logo-carousel__btn-prev logo-carousel__btn-prev swiper-button-prev" role="button" tabindex="0"></div>
4040

4141
<f:comment> These labels are used in carousel.js for aria-labels in logo carousel.</f:comment>
42-
<script id="js__aria-labels" type="application/json">
42+
<script class="js__aria-labels" type="application/json">
4343
{
4444
"ariaLabel": {
4545
"prevSlideMessage": "<f:translate key='logoCarousel.ariaLabel.prevSlideMessage' extensionName='theme_t3kit' />",

‎Resources/Public/css/main.js‎

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -214,60 +214,65 @@ jQuery(function ($) {
214214
$(document).ready(function () {
215215
// initialize swiper when document ready
216216
// http://idangero.us/swiper/api/
217-
$('.js__logo-carousel').each(function () {
218-
// Get json content from element LogoCarousel.html
219-
var label = JSON.parse($('#js__aria-labels').html())
220-
221-
var swiper = $(this).swiper({
222-
nextButton: '.js__logo-carousel__btn-next',
223-
prevButton: '.js__logo-carousel__btn-prev',
224-
slidesPerView: 5,
225-
preloadImages: false,
226-
lazyLoading: true,
227-
watchSlidesVisibility: true,
228-
lazyLoadingInPrevNext: true,
229-
slideVisibleClass: 'is-visible',
230-
spaceBetween: 20,
231-
autoplay: $(this).data('autoplay'),
232-
a11y: true,
233-
prevSlideMessage: label.ariaLabel.prevSlideMessage,
234-
nextSlideMessage: label.ariaLabel.nextSlideMessage,
235-
firstSlideMessage: label.ariaLabel.firstSlideMessage,
236-
lastSlideMessage: label.ariaLabel.lastSlideMessage,
237-
paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
238-
// Responsive breakpoints
239-
breakpoints: {
240-
// when window width is <= 480px
241-
480: {
242-
slidesPerView: 1
243-
},
244217

245-
// when window width is <= 600px
246-
600: {
247-
slidesPerView: 2
248-
},
249-
250-
// when window width is <= 768px
251-
768: {
252-
slidesPerView: 3
253-
},
254-
255-
// when window width is <= 992px
256-
992: {
257-
slidesPerView: 4
258-
}
259-
}
260-
})
261-
// if the selected swipe is not visible when focused
262-
// put it into view
263-
$(swiper.slides).each(function (index, element) {
264-
$(element).on('focusin', function (e) {
265-
if ($(e.target).not('.is-visible')) {
266-
swiper.slideTo(index)
218+
// Get json content from element LogoCarousel.html
219+
var ariaLabels = document.getElementsByClassName('js__aria-labels')
220+
if (ariaLabels) {
221+
// Use only first aria label object because they are all equal
222+
var label = JSON.parse(ariaLabels[0].innerHTML)
223+
224+
$('.js__logo-carousel').each(function () {
225+
var swiper = $(this).swiper({
226+
nextButton: '.js__logo-carousel__btn-next',
227+
prevButton: '.js__logo-carousel__btn-prev',
228+
slidesPerView: 5,
229+
preloadImages: false,
230+
lazyLoading: true,
231+
watchSlidesVisibility: true,
232+
lazyLoadingInPrevNext: true,
233+
slideVisibleClass: 'is-visible',
234+
spaceBetween: 20,
235+
autoplay: $(this).data('autoplay'),
236+
a11y: true,
237+
prevSlideMessage: label.ariaLabel.prevSlideMessage,
238+
nextSlideMessage: label.ariaLabel.nextSlideMessage,
239+
firstSlideMessage: label.ariaLabel.firstSlideMessage,
240+
lastSlideMessage: label.ariaLabel.lastSlideMessage,
241+
paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
242+
// Responsive breakpoints
243+
breakpoints: {
244+
// when window width is <= 480px
245+
480: {
246+
slidesPerView: 1
247+
},
248+
249+
// when window width is <= 600px
250+
600: {
251+
slidesPerView: 2
252+
},
253+
254+
// when window width is <= 768px
255+
768: {
256+
slidesPerView: 3
257+
},
258+
259+
// when window width is <= 992px
260+
992: {
261+
slidesPerView: 4
262+
}
267263
}
268264
})
265+
// if the selected swipe is not visible when focused
266+
// put it into view
267+
$(swiper.slides).each(function (index, element) {
268+
$(element).on('focusin', function (e) {
269+
if ($(e.target).not('.is-visible')) {
270+
swiper.slideTo(index)
271+
}
272+
})
273+
})
269274
})
270-
})
275+
}
271276
})
272277
})(jQuery)
273278

‎Resources/Public/less/main.js‎

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -214,60 +214,65 @@ jQuery(function ($) {
214214
$(document).ready(function () {
215215
// initialize swiper when document ready
216216
// http://idangero.us/swiper/api/
217-
$('.js__logo-carousel').each(function () {
218-
// Get json content from element LogoCarousel.html
219-
var label = JSON.parse($('#js__aria-labels').html())
220-
221-
var swiper = $(this).swiper({
222-
nextButton: '.js__logo-carousel__btn-next',
223-
prevButton: '.js__logo-carousel__btn-prev',
224-
slidesPerView: 5,
225-
preloadImages: false,
226-
lazyLoading: true,
227-
watchSlidesVisibility: true,
228-
lazyLoadingInPrevNext: true,
229-
slideVisibleClass: 'is-visible',
230-
spaceBetween: 20,
231-
autoplay: $(this).data('autoplay'),
232-
a11y: true,
233-
prevSlideMessage: label.ariaLabel.prevSlideMessage,
234-
nextSlideMessage: label.ariaLabel.nextSlideMessage,
235-
firstSlideMessage: label.ariaLabel.firstSlideMessage,
236-
lastSlideMessage: label.ariaLabel.lastSlideMessage,
237-
paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
238-
// Responsive breakpoints
239-
breakpoints: {
240-
// when window width is <= 480px
241-
480: {
242-
slidesPerView: 1
243-
},
244217

245-
// when window width is <= 600px
246-
600: {
247-
slidesPerView: 2
248-
},
249-
250-
// when window width is <= 768px
251-
768: {
252-
slidesPerView: 3
253-
},
254-
255-
// when window width is <= 992px
256-
992: {
257-
slidesPerView: 4
258-
}
259-
}
260-
})
261-
// if the selected swipe is not visible when focused
262-
// put it into view
263-
$(swiper.slides).each(function (index, element) {
264-
$(element).on('focusin', function (e) {
265-
if ($(e.target).not('.is-visible')) {
266-
swiper.slideTo(index)
218+
// Get json content from element LogoCarousel.html
219+
var ariaLabels = document.getElementsByClassName('js__aria-labels')
220+
if (ariaLabels) {
221+
// Use only first aria label object because they are all equal
222+
var label = JSON.parse(ariaLabels[0].innerHTML)
223+
224+
$('.js__logo-carousel').each(function () {
225+
var swiper = $(this).swiper({
226+
nextButton: '.js__logo-carousel__btn-next',
227+
prevButton: '.js__logo-carousel__btn-prev',
228+
slidesPerView: 5,
229+
preloadImages: false,
230+
lazyLoading: true,
231+
watchSlidesVisibility: true,
232+
lazyLoadingInPrevNext: true,
233+
slideVisibleClass: 'is-visible',
234+
spaceBetween: 20,
235+
autoplay: $(this).data('autoplay'),
236+
a11y: true,
237+
prevSlideMessage: label.ariaLabel.prevSlideMessage,
238+
nextSlideMessage: label.ariaLabel.nextSlideMessage,
239+
firstSlideMessage: label.ariaLabel.firstSlideMessage,
240+
lastSlideMessage: label.ariaLabel.lastSlideMessage,
241+
paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
242+
// Responsive breakpoints
243+
breakpoints: {
244+
// when window width is <= 480px
245+
480: {
246+
slidesPerView: 1
247+
},
248+
249+
// when window width is <= 600px
250+
600: {
251+
slidesPerView: 2
252+
},
253+
254+
// when window width is <= 768px
255+
768: {
256+
slidesPerView: 3
257+
},
258+
259+
// when window width is <= 992px
260+
992: {
261+
slidesPerView: 4
262+
}
267263
}
268264
})
265+
// if the selected swipe is not visible when focused
266+
// put it into view
267+
$(swiper.slides).each(function (index, element) {
268+
$(element).on('focusin', function (e) {
269+
if ($(e.target).not('.is-visible')) {
270+
swiper.slideTo(index)
271+
}
272+
})
273+
})
269274
})
270-
})
275+
}
271276
})
272277
})(jQuery)
273278

‎felayout_t3kit/dev/js/main/contentElements/carousel.js‎

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,64 @@
66
$(document).ready(function () {
77
// initialize swiper when document ready
88
// http://idangero.us/swiper/api/
9-
$('.js__logo-carousel').each(function () {
10-
// Get json content from element LogoCarousel.html
11-
var label = JSON.parse($('#js__aria-labels').html())
129

13-
var swiper = $(this).swiper({
14-
nextButton: '.js__logo-carousel__btn-next',
15-
prevButton: '.js__logo-carousel__btn-prev',
16-
slidesPerView: 5,
17-
preloadImages: false,
18-
lazyLoading: true,
19-
watchSlidesVisibility: true,
20-
lazyLoadingInPrevNext: true,
21-
slideVisibleClass: 'is-visible',
22-
spaceBetween: 20,
23-
autoplay: $(this).data('autoplay'),
24-
a11y: true,
25-
prevSlideMessage: label.ariaLabel.prevSlideMessage,
26-
nextSlideMessage: label.ariaLabel.nextSlideMessage,
27-
firstSlideMessage: label.ariaLabel.firstSlideMessage,
28-
lastSlideMessage: label.ariaLabel.lastSlideMessage,
29-
paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
30-
// Responsive breakpoints
31-
breakpoints: {
32-
// when window width is <= 480px
33-
480: {
34-
slidesPerView: 1
35-
},
10+
// Get json content from element LogoCarousel.html
11+
var ariaLabels = document.getElementsByClassName('js__aria-labels')
12+
if (ariaLabels) {
13+
// Use only first aria label object because they are all equal
14+
var label = JSON.parse(ariaLabels[0].innerHTML)
3615

37-
// when window width is <= 600px
38-
600: {
39-
slidesPerView: 2
40-
},
16+
$('.js__logo-carousel').each(function () {
17+
var swiper = $(this).swiper({
18+
nextButton: '.js__logo-carousel__btn-next',
19+
prevButton: '.js__logo-carousel__btn-prev',
20+
slidesPerView: 5,
21+
preloadImages: false,
22+
lazyLoading: true,
23+
watchSlidesVisibility: true,
24+
lazyLoadingInPrevNext: true,
25+
slideVisibleClass: 'is-visible',
26+
spaceBetween: 20,
27+
autoplay: $(this).data('autoplay'),
28+
a11y: true,
29+
prevSlideMessage: label.ariaLabel.prevSlideMessage,
30+
nextSlideMessage: label.ariaLabel.nextSlideMessage,
31+
firstSlideMessage: label.ariaLabel.firstSlideMessage,
32+
lastSlideMessage: label.ariaLabel.lastSlideMessage,
33+
paginationBulletMessage: label.ariaLabel.paginationBulletMessage,
34+
// Responsive breakpoints
35+
breakpoints: {
36+
// when window width is <= 480px
37+
480: {
38+
slidesPerView: 1
39+
},
4140

42-
// when window width is <= 768px
43-
768: {
44-
slidesPerView: 3
45-
},
41+
// when window width is <= 600px
42+
600: {
43+
slidesPerView: 2
44+
},
4645

47-
// when window width is <= 992px
48-
992: {
49-
slidesPerView: 4
50-
}
51-
}
52-
})
53-
// if the selected swipe is not visible when focused
54-
// put it into view
55-
$(swiper.slides).each(function (index, element) {
56-
$(element).on('focusin', function (e) {
57-
if ($(e.target).not('.is-visible')) {
58-
swiper.slideTo(index)
46+
// when window width is <= 768px
47+
768: {
48+
slidesPerView: 3
49+
},
50+
51+
// when window width is <= 992px
52+
992: {
53+
slidesPerView: 4
54+
}
5955
}
6056
})
57+
// if the selected swipe is not visible when focused
58+
// put it into view
59+
$(swiper.slides).each(function (index, element) {
60+
$(element).on('focusin', function (e) {
61+
if ($(e.target).not('.is-visible')) {
62+
swiper.slideTo(index)
63+
}
64+
})
65+
})
6166
})
62-
})
67+
}
6368
})
6469
})(jQuery)

0 commit comments

Comments
 (0)