Skip to content

Commit 4a7bed6

Browse files
dkd-oerteldmh
dkd-oertel
authored and
dmh
committed
[FEATURE] Use <img> + object-fit in News ext. instead of background-images. Accessibility
* [FEATURE] revert "[BUGFIX] partly revert - improve news list accessibility (#343)" This reverts commit ed1b624. * [FEATURE] revert "[BUGFIX] revert - change markup for news list (#373)" This reverts commit a4286d0. * [FEATURE] revert "[BUGFIX] revert PR adjust image height settings for news cards template (#382)" This reverts commit b305f6a. * [FEATURE] revert "[BUGFIX] revert PR Improve news cards accessibility (#351)" This reverts commit 2d33074. * [FEATURE] revert "[BUGFIX] revert news-carousel accessibility improvements (#352)" This reverts commit f1b155e. * Issue #83227: Add object-fit polyfill and remove background images * update css/less * remove unnecessary tag to fix error * adjust less formatting for stylelint * update css/less * remove wrong indentation * update css/less
1 parent 1f207eb commit 4a7bed6

File tree

21 files changed

+1013
-192
lines changed

21 files changed

+1013
-192
lines changed

‎Resources/Private/Extensions/News/Partials/List/Cards.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,19 @@
3333
<div class="news-cards__img-wrap">
3434
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
3535
<f:if condition="{mediaElement.originalResource.type} == 2">
36-
<div class="news-cards__media-preview" style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
36+
<div class="news-cards__media-preview"
37+
style="height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}px">
38+
<f:media file="{mediaElement}" width="768" class="object-fit"/>
39+
</div>
3740
</f:if>
3841
<f:if condition="{mediaElement.originalResource.type} == 4">
39-
<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
42+
<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}"/>
4043
</f:if>
4144
<f:if condition="{mediaElement.originalResource.type} == 5">
42-
<div class="news-cards__media-preview" style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
45+
<div class="news-cards__media-preview"
46+
style="height:{f:if(condition: settings.detail.media.image.maxHeight, then: settings.list.media.image.maxHeight, else: settings.media.maxHeight)}px">
47+
<f:media file="{mediaElement}" width="768" class="object-fit"/>
48+
</div>
4349
</f:if>
4450
</f:alias>
4551
</div>
@@ -48,7 +54,10 @@
4854
<f:if condition="{settings.displayDummyIfNoMedia}">
4955
<div class="news-cards__img-wrap">
5056
<div class="no-media-element">
51-
<div class="news-cards__media-preview" style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');"></div>
57+
<div class="news-cards__media-preview"
58+
style="height:{f:if(condition:settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}px">
59+
<f:image src="{settings.list.media.dummyImage}" class="img-responsive object-fit" title="" alt="" />
60+
</div>
5261
</div>
5362
</div>
5463
</f:if>
@@ -92,7 +101,7 @@ <h3>{newsItem.title}</h3>
92101
</div>
93102
</n:link>
94103
<div class="news-cards__more-link">
95-
<n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{newsItem.title}">
104+
<n:link newsItem="{newsItem}" settings="{settings}" class="more" additionalAttributes="{aria-label: '{f:translate(key:\'news.more-link.linktext\', extensionName:\'Theme_t3kit\')}{newsItem.title}'}" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
96105
<f:translate key="more-link"/>
97106
</n:link>
98107
</div>

‎Resources/Private/Extensions/News/Partials/List/NewsCarousel.html‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{namespace n=GeorgRinger\News\ViewHelpers}
22
<div class="news-list-view news-carousel {f:format.case(value: '{settings.templateLayout}', mode: 'lower')}">
3+
<button aria-hidden="true" class="js__news-carousel__btn-prev news-carousel__btn-prev swiper-button-prev"></button>
34
<div class="swiper-container news-carousel__container js__news-carousel">
45
<!-- Additional required wrapper -->
5-
<div class="swiper-wrapper news-carousel__wrapper">
6+
<ul class="swiper-wrapper news-carousel__wrapper">
67
<f:for each="{news}" as="newsItem" iteration="iterator">
78

8-
<div class="swiper-slide news-carousel__slide">
9-
<div class="article articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
9+
<li class="swiper-slide news-carousel__slide">
10+
<article class="article articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
1011
<n:excludeDisplayedNews newsItem="{newsItem}"/>
1112

1213
<f:if condition="{newsItem.mediaPreviews}">
@@ -16,13 +17,17 @@
1617
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
1718
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
1819
<f:if condition="{mediaElement.originalResource.type} == 2">
19-
<div class="news-carousel__media-preview" style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
20+
<div class="news-carousel__media-preview">
21+
<f:media file="{mediaElement}" class="object-fit"/>
22+
</div>
2023
</f:if>
2124
<f:if condition="{mediaElement.originalResource.type} == 4">
2225
<f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
2326
</f:if>
2427
<f:if condition="{mediaElement.originalResource.type} == 5">
25-
<div class="news-carousel__media-preview" style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
28+
<div class="news-carousel__media-preview">
29+
<f:media file="{mediaElement}" class="object-fit"/>
30+
</div>
2631
</f:if>
2732
</f:alias>
2833
</n:link>
@@ -46,9 +51,11 @@
4651
<f:else>
4752
<f:if condition="{settings.displayDummyIfNoMedia}">
4853
<div class="news-carousel__img-wrap">
49-
<div class="no-media-element">
54+
<div class="no-media-element" aria-hidden="true">
5055
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
51-
<div class="news-carousel__media-preview" style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');"></div>
56+
<div class="news-carousel__media-preview">
57+
<f:image src="{settings.list.media.dummyImage}" class="img-responsive object-fit" title="" alt="" />
58+
</div>
5259
</n:link>
5360
</div>
5461

@@ -92,15 +99,14 @@ <h3>
9299
</f:if>
93100
</div>
94101

95-
</div>
102+
</article>
96103

97-
</div>
104+
</li>
98105

99106
</f:for>
100-
</div>
101-
<div class="js__news-carousel__pagination news-carousel__pagination swiper-pagination"></div>
107+
</ul>
108+
<div aria-hidden="true" class="js__news-carousel__pagination news-carousel__pagination swiper-pagination"></div>
102109
</div>
103-
<div class="js__news-carousel__btn-prev news-carousel__btn-prev swiper-button-prev"></div>
104-
<div class="js__news-carousel__btn-next news-carousel__btn-next swiper-button-next"></div>
110+
<button aria-hidden="true" class="js__news-carousel__btn-next news-carousel__btn-next swiper-button-next"></button>
105111

106112
</div>

‎Resources/Private/Extensions/News/Partials/List/SimpleList.html‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,20 @@
2626
<!-- media preview element -->
2727
<f:then>
2828
<div class="news-simple-list__img-wrap">
29-
<n:link newsItem="{newsItem}" settings="{settings}" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
29+
<n:link newsItem="{newsItem}" settings="{settings}" additionalAttributes="{aria-label: '{f:translate(key:\'news.more-link.linktext\', extensionName:\'Theme_t3kit\')}{newsItem.title}'}" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
3030
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
3131
<f:if condition="{mediaElement.originalResource.type} == 2">
32-
<div class="news-simple-list__media-preview" style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
32+
<div class="news-simple-list__media-preview">
33+
<f:media file="{mediaElement}" class="object-fit"/>
34+
</div>
3335
</f:if>
3436
<f:if condition="{mediaElement.originalResource.type} == 4">
3537
<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
3638
</f:if>
3739
<f:if condition="{mediaElement.originalResource.type} == 5">
38-
<div class="news-simple-list__media-preview" style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
40+
<div class="news-simple-list__media-preview">
41+
<f:media file="{mediaElement}" class="object-fit"/>
42+
</div>
3943
</f:if>
4044
</f:alias>
4145
</n:link>
@@ -45,7 +49,11 @@
4549
<f:if condition="{settings.displayDummyIfNoMedia}">
4650
<div class="news-simple-list__img-wrap">
4751
<div class="no-media-element">
48-
<div class="news-simple-list__media-preview" style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');"></div>
52+
<n:link newsItem="{newsItem}" settings="{settings}" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
53+
<div class="news-simple-list__media-preview">
54+
<f:image src="{settings.list.media.dummyImage}" class="img-responsive object-fit" title="" alt="" />
55+
</div>
56+
</n:link>
4957
</div>
5058
</div>
5159
</f:if>
@@ -86,13 +94,11 @@ <h3>{newsItem.title}</h3>
8694
</f:else>
8795
</f:if>
8896
</div>
97+
<div class="news-simple-list__more-link">
98+
<n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
99+
<f:translate key="more-link"/>
100+
</n:link>
101+
</div>
89102
</div>
90-
91-
<div class="news-simple-list__more-link">
92-
<n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
93-
<f:translate key="more-link"/>
94-
</n:link>
95-
</div>
96-
97103
</article>
98104
</f:section>

‎Resources/Private/Extensions/News/Partials/List/Timeline.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,17 @@ <h2 class="news-timeline__header">{currentYear}</h2>
6060
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
6161
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
6262
<f:if condition="{mediaElement.originalResource.type} == 2">
63-
<div class="news-timeline__media-preview" style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
63+
<div class="news-timeline__media-preview">
64+
<f:media file="{mediaElement}" class="object-fit"/>
65+
</div>
6466
</f:if>
6567
<f:if condition="{mediaElement.originalResource.type} == 4">
6668
<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
6769
</f:if>
6870
<f:if condition="{mediaElement.originalResource.type} == 5">
69-
<div class="news-timeline__media-preview" style="background-image:url('{f:uri.image(src: mediaElement.uid, treatIdAsReference: 1)}');"></div>
71+
<div class="news-timeline__media-preview">
72+
<f:media file="{mediaElement}" class="object-fit"/>
73+
</div>
7074
</f:if>
7175
</f:alias>
7276
</n:link>
@@ -77,7 +81,9 @@ <h2 class="news-timeline__header">{currentYear}</h2>
7781
<div class="news-timeline__img-wrap">
7882
<div class="no-media-element">
7983
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
80-
<div class="news-timeline__media-preview" style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');"></div>
84+
<div class="news-timeline__media-preview">
85+
<f:image src="{settings.list.media.dummyImage}" class="img-responsive object-fit" title="" alt="" />
86+
</div>
8187
</n:link>
8288
</div>
8389
</div>

‎Resources/Private/Extensions/News/TypoScript/setup.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
plugin.tx_news.settings.defaultDetailPid = {$themes.configuration.features.newsDefaultDetailPid}
2-
plugin.tx_news.settings.detail.media.image.lightbox.class = {$styles.content.textmedia.linkWrap.lightboxCssClass}
32

43
plugin.tx_news.settings.newsCarousel.cropMaxCharacters = 136
54

@@ -25,13 +24,16 @@ plugin.tx_news.settings.detail.showPrevNext = 1
2524
# show a file type icon above the file name
2625
plugin.tx_news.settings.detail.showRelatedFileIcon = 0
2726

28-
# Lightbox data-caption attribute settings for use in Partials/Detail/MediaImage.html
2927
plugin.tx_news.settings {
30-
detail.media.image.lightbox {
31-
glue = {$lightbox.dataCaption.glue}
32-
includeTitle = {$lightbox.dataCaption.includeTitle}
33-
includeDescription = {$lightbox.dataCaption.includeDescription}
34-
includeCopyright = {$lightbox.dataCaption.includeCopyright}
35-
labelCopyright = {$lightbox.dataCaption.labelCopyright}
28+
detail.media.image {
29+
# Lightbox data-caption attribute settings for use in Partials/Detail/MediaImage.html
30+
lightbox {
31+
glue = {$lightbox.dataCaption.glue}
32+
includeTitle = {$lightbox.dataCaption.includeTitle}
33+
includeDescription = {$lightbox.dataCaption.includeDescription}
34+
includeCopyright = {$lightbox.dataCaption.includeCopyright}
35+
labelCopyright = {$lightbox.dataCaption.labelCopyright}
36+
class = {$styles.content.textmedia.linkWrap.lightboxCssClass}
37+
}
3638
}
3739
}

‎Resources/Private/Language/de.locallang.xlf‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,18 @@
4444
<trans-unit id="breadcrumb_label" xml:space="preserve">
4545
<target>Sie sind hier</target>
4646
</trans-unit>
47+
<!--News-->
48+
<!-- news custom labels -->
49+
<trans-unit id="news.more-link.linktext" xml:space="preserve">
50+
<target>Öffne News - </target>
51+
</trans-unit>
52+
<!-- news pagination aria labels -->
53+
<trans-unit id="paginate.list.ariaLabel" xml:space="preserve">
54+
<target>Paginierung</target>
55+
</trans-unit>
56+
<trans-unit id="paginate.page.ariaLabel" xml:space="preserve">
57+
<target>Seite</target>
58+
</trans-unit>
4759
</body>
4860
</file>
4961
</xliff>

‎Resources/Private/Language/locallang.xlf‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,16 @@
5353
<trans-unit id="news-single-video-header" xml:space="preserve">
5454
<source>Video</source>
5555
</trans-unit>
56+
<trans-unit id="news.more-link.linktext" xml:space="preserve">
57+
<source>Open News - </source>
58+
</trans-unit>
59+
<!--- news pagination aria labels -->
60+
<trans-unit id="paginate.list.ariaLabel" xml:space="preserve">
61+
<source>Pagination</source>
62+
</trans-unit>
63+
<trans-unit id="paginate.page.ariaLabel" xml:space="preserve">
64+
<source>Page</source>
65+
</trans-unit>
5666

5767

5868
<!-- ContentElements labels -->

0 commit comments

Comments
 (0)