From 8dc41eabb4d7ca36373667abf4f9207a311a3391 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Tue, 20 Jun 2023 10:24:38 +0200
Subject: [PATCH] [TASK] Add role and roledescription to carousel

Related: #1381
---
 .../Private/Templates/ContentElements/Carousel.html   | 11 ++++++++++-
 .../Templates/ContentElements/CarouselFullscreen.html | 11 ++++++++++-
 .../Templates/ContentElements/CarouselSmall.html      | 11 ++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/Resources/Private/Templates/ContentElements/Carousel.html b/Resources/Private/Templates/ContentElements/Carousel.html
index bbe7ce4ed..4bf48d9cc 100644
--- a/Resources/Private/Templates/ContentElements/Carousel.html
+++ b/Resources/Private/Templates/ContentElements/Carousel.html
@@ -8,6 +8,8 @@
             data-bs-wrap="{f:if(condition:data.pi_flexform.wrap,then:'true',else:'false')}"
             data-bs-ride="{f:if(condition:data.pi_flexform.autoplay,then:'carousel',else:'false')}"
             {f:if(condition: data.pi_flexform.interval, then: 'data-bs-interval="{data.pi_flexform.interval}"')}
+            role="region"
+            aria-roledescription="carousel"
         >
             <f:render partial="Carousel/Control/Indicator" arguments="{_all}" />
             <div class="carousel-inner">
@@ -22,7 +24,14 @@
                         <f:if condition="{item.data.background_color}"><f:variable name="itemStyle">{itemStyle} --carousel-item-background: {item.data.background_color};</f:variable></f:if>
                         <f:if condition="{item.data.text_color}"><f:variable name="itemStyle">{itemStyle} --carousel-item-color: {item.data.text_color};</f:variable></f:if>
                     </f:if>
-                    <div class="{itemClass}" aria-current="{f:if(condition: iteration.isFirst, then:'true', else: 'false')}" data-itemno="{iteration.index}" style="{itemStyle}">
+                    <div
+                        class="{itemClass}"
+                        aria-current="{f:if(condition: iteration.isFirst, then:'true', else: 'false')}"
+                        data-itemno="{iteration.index}"
+                        style="{itemStyle}"
+                        role="group"
+                        aria-roledescription="slide"
+                        >
                         <f:render partial="Carousel/General/BackgroundImage" arguments="{_all}" />
                         <div class="carousel-content">
                             <f:render partial="Carousel/Item/{item.data.item_type -> bk2k:format.upperCamelCase()}" arguments="{_all}" />
diff --git a/Resources/Private/Templates/ContentElements/CarouselFullscreen.html b/Resources/Private/Templates/ContentElements/CarouselFullscreen.html
index d02662ac6..234c016c0 100644
--- a/Resources/Private/Templates/ContentElements/CarouselFullscreen.html
+++ b/Resources/Private/Templates/ContentElements/CarouselFullscreen.html
@@ -8,6 +8,8 @@
             data-bs-wrap="{f:if(condition:data.pi_flexform.wrap,then:'true',else:'false')}"
             data-bs-ride="{f:if(condition:data.pi_flexform.autoplay,then:'carousel',else:'false')}"
             {f:if(condition: data.pi_flexform.interval, then: 'data-bs-interval="{data.pi_flexform.interval}"')}
+            role="region"
+            aria-roledescription="carousel"
         >
             <f:render partial="Carousel/Control/Indicator" arguments="{_all}" />
             <div class="carousel-inner">
@@ -22,7 +24,14 @@
                         <f:if condition="{item.data.background_color}"><f:variable name="itemStyle">{itemStyle} --carousel-item-background: {item.data.background_color};</f:variable></f:if>
                         <f:if condition="{item.data.text_color}"><f:variable name="itemStyle">{itemStyle} --carousel-item-color: {item.data.text_color};</f:variable></f:if>
                     </f:if>
-                    <div class="{itemClass}" aria-current="{f:if(condition: iteration.isFirst, then:'true', else: 'false')}" data-itemno="{iteration.index}" style="{itemStyle}">
+                    <div
+                        class="{itemClass}"
+                        aria-current="{f:if(condition: iteration.isFirst, then:'true', else: 'false')}"
+                        data-itemno="{iteration.index}"
+                        style="{itemStyle}"
+                        role="group"
+                        aria-roledescription="slide"
+                        >
                         <f:render partial="Carousel/General/BackgroundImage" arguments="{_all}" />
                         <div class="carousel-content">
                             <f:render partial="Carousel/Item/{item.data.item_type -> bk2k:format.upperCamelCase()}" arguments="{_all}" />
diff --git a/Resources/Private/Templates/ContentElements/CarouselSmall.html b/Resources/Private/Templates/ContentElements/CarouselSmall.html
index 8a0bf1586..e79254750 100644
--- a/Resources/Private/Templates/ContentElements/CarouselSmall.html
+++ b/Resources/Private/Templates/ContentElements/CarouselSmall.html
@@ -8,6 +8,8 @@
             data-bs-wrap="{f:if(condition:data.pi_flexform.wrap,then:'true',else:'false')}"
             data-bs-ride="{f:if(condition:data.pi_flexform.autoplay,then:'carousel',else:'false')}"
             {f:if(condition: data.pi_flexform.interval, then: 'data-bs-interval="{data.pi_flexform.interval}"')}
+            role="region"
+            aria-roledescription="carousel"
         >
             <f:render partial="Carousel/Control/Indicator" arguments="{_all}" />
             <div class="carousel-inner">
@@ -22,7 +24,14 @@
                         <f:if condition="{item.data.background_color}"><f:variable name="itemStyle">{itemStyle} --carousel-item-background: {item.data.background_color};</f:variable></f:if>
                         <f:if condition="{item.data.text_color}"><f:variable name="itemStyle">{itemStyle} --carousel-item-color: {item.data.text_color};</f:variable></f:if>
                     </f:if>
-                    <div class="{itemClass}" aria-current="{f:if(condition: iteration.isFirst, then:'true', else: 'false')}" data-itemno="{iteration.index}" style="{itemStyle}">
+                    <div
+                        class="{itemClass}"
+                        aria-current="{f:if(condition: iteration.isFirst, then:'true', else: 'false')}"
+                        data-itemno="{iteration.index}"
+                        style="{itemStyle}"
+                        role="group"
+                        aria-roledescription="slide"
+                        >
                         <f:render partial="Carousel/General/BackgroundImage" arguments="{_all}" />
                         <div class="carousel-content">
                             <f:render partial="Carousel/Item/{item.data.item_type -> bk2k:format.upperCamelCase()}" arguments="{_all}" />