[TASK] Make focus visible for carousel links

Relates: #1383
benjaminkott · Jun 20, 2023 · 5f31391 · 5f31391
1 parent ca6df9f
commit 5f31391
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 15 deletions.
diff --git a/Resources/Private/Partials/ContentElements/Carousel/Item/BackgroundImage.html b/Resources/Private/Partials/ContentElements/Carousel/Item/BackgroundImage.html
@@ -1,3 +1,3 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
-<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}"> </f:link.typolink>
+<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}" class="carousel-content-link"> </f:link.typolink>
 </html>
diff --git a/Resources/Private/Partials/ContentElements/Carousel/Item/Header.html b/Resources/Private/Partials/ContentElements/Carousel/Item/Header.html
@@ -1,5 +1,5 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
-<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}">
+<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}" class="carousel-content-link">
     <div class="carousel-content-inner">
         <div class="carousel-text-inner">
             <h{item.data.header_layout} class="carousel-header awesome{f:if(condition: item.data.header_class, then: ' {item.data.header_class}')}{f:if(condition: item.data.header_position, then: ' text-{item.data.header_position}')}"><f:format.htmlspecialchars doubleEncode="false">{item.data.header}</f:format.htmlspecialchars></h{item.data.header_layout}>

diff --git a/Resources/Private/Partials/ContentElements/Carousel/Item/Image.html b/Resources/Private/Partials/ContentElements/Carousel/Item/Image.html
@@ -1,5 +1,5 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
-<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}">
+<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}" class="carousel-content-link">
     <div class="carousel-content-inner">
         <div class="carousel-image">
             <f:if condition="{item.images.0}">

diff --git a/Resources/Private/Partials/ContentElements/Carousel/Item/TextAndImage.html b/Resources/Private/Partials/ContentElements/Carousel/Item/TextAndImage.html
@@ -1,5 +1,5 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
-<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}">
+<f:link.typolink parameter="{item.data.link}" additionalAttributes="{draggable:'false'}" class="carousel-content-link">
     <div class="carousel-content-inner">
         <div class="carousel-text">
             <h{item.data.header_layout} class="carousel-header{f:if(condition: item.data.header_class, then: ' {item.data.header_class}')}{f:if(condition: item.data.header_position, then: ' text-{item.data.header_position}')}"><f:format.htmlspecialchars doubleEncode="false">{item.data.header}</f:format.htmlspecialchars></h{item.data.header_layout}>

diff --git a/Resources/Public/Css/bootstrap5-rte.css b/Resources/Public/Css/bootstrap5-rte.css
@@ -15747,7 +15747,7 @@ textarea.form-control.error {
   width: var(--carousel-control-width);
 }
 
-.carousel .carousel-control:focus .carousel-control-icon {
+.carousel .carousel-control:focus-visible .carousel-control-icon {
   outline: 2px solid;
 }
 
@@ -15777,7 +15777,7 @@ textarea.form-control.error {
   height: 4px;
 }
 
-.carousel .carousel-indicators button:focus {
+.carousel .carousel-indicators button:focus-visible {
   outline-offset: 1px;
   outline: 2px solid currentColor;
 }
@@ -15842,9 +15842,23 @@ textarea.form-control.error {
   right: 0;
 }
 
+.carousel .carousel-content-link:focus-visible {
+  outline: none;
+}
+
+.carousel .carousel-content-link:focus-visible:before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  box-shadow: inset 0 0 0 1px #000000, inset 0 0 0 2px #ffffff;
+}
+
 .carousel-item-type-header a[class=""], .carousel-item-type-header a[class=""]:hover,
 .carousel-item-type-header a:not([class]),
-.carousel-item-type-header a:not([class]):hover {
+.carousel-item-type-header a:not([class]):hover,
+.carousel-item-type-header a.carousel-content-link,
+.carousel-item-type-header a.carousel-content-link:hover {
   color: var(--carousel-item-color);
 }
 
@@ -15864,6 +15878,14 @@ textarea.form-control.error {
   }
 }
 
+.carousel-item-type-text a[class=""], .carousel-item-type-text a[class=""]:hover,
+.carousel-item-type-text a:not([class]),
+.carousel-item-type-text a:not([class]):hover,
+.carousel-item-type-text a.carousel-content-link,
+.carousel-item-type-text a.carousel-content-link:hover {
+  color: var(--carousel-item-color);
+}
+
 .carousel-item-type-text .carousel-text-inner {
   margin: 0 auto;
 }
@@ -15880,6 +15902,14 @@ textarea.form-control.error {
   }
 }
 
+.carousel-item-type-text_and_image a[class=""], .carousel-item-type-text_and_image a[class=""]:hover,
+.carousel-item-type-text_and_image a:not([class]),
+.carousel-item-type-text_and_image a:not([class]):hover,
+.carousel-item-type-text_and_image a.carousel-content-link,
+.carousel-item-type-text_and_image a.carousel-content-link:hover {
+  color: var(--carousel-item-color);
+}
+
 .carousel-item-type-text_and_image .carousel-image {
   display: none;
 }

diff --git a/Resources/Public/Css/bootstrap5-rte.min.css b/Resources/Public/Css/bootstrap5-rte.min.css
diff --git a/Resources/Public/Css/bootstrap5-theme.css b/Resources/Public/Css/bootstrap5-theme.css
@@ -15747,7 +15747,7 @@ textarea.form-control.error {
   width: var(--carousel-control-width);
 }
 
-.carousel .carousel-control:focus .carousel-control-icon {
+.carousel .carousel-control:focus-visible .carousel-control-icon {
   outline: 2px solid;
 }
 
@@ -15777,7 +15777,7 @@ textarea.form-control.error {
   height: 4px;
 }
 
-.carousel .carousel-indicators button:focus {
+.carousel .carousel-indicators button:focus-visible {
   outline-offset: 1px;
   outline: 2px solid currentColor;
 }
@@ -15842,9 +15842,23 @@ textarea.form-control.error {
   right: 0;
 }
 
+.carousel .carousel-content-link:focus-visible {
+  outline: none;
+}
+
+.carousel .carousel-content-link:focus-visible:before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  box-shadow: inset 0 0 0 1px #000000, inset 0 0 0 2px #ffffff;
+}
+
 .carousel-item-type-header a[class=""], .carousel-item-type-header a[class=""]:hover,
 .carousel-item-type-header a:not([class]),
-.carousel-item-type-header a:not([class]):hover {
+.carousel-item-type-header a:not([class]):hover,
+.carousel-item-type-header a.carousel-content-link,
+.carousel-item-type-header a.carousel-content-link:hover {
   color: var(--carousel-item-color);
 }
 
@@ -15864,6 +15878,14 @@ textarea.form-control.error {
   }
 }
 
+.carousel-item-type-text a[class=""], .carousel-item-type-text a[class=""]:hover,
+.carousel-item-type-text a:not([class]),
+.carousel-item-type-text a:not([class]):hover,
+.carousel-item-type-text a.carousel-content-link,
+.carousel-item-type-text a.carousel-content-link:hover {
+  color: var(--carousel-item-color);
+}
+
 .carousel-item-type-text .carousel-text-inner {
   margin: 0 auto;
 }
@@ -15880,6 +15902,14 @@ textarea.form-control.error {
   }
 }
 
+.carousel-item-type-text_and_image a[class=""], .carousel-item-type-text_and_image a[class=""]:hover,
+.carousel-item-type-text_and_image a:not([class]),
+.carousel-item-type-text_and_image a:not([class]):hover,
+.carousel-item-type-text_and_image a.carousel-content-link,
+.carousel-item-type-text_and_image a.carousel-content-link:hover {
+  color: var(--carousel-item-color);
+}
+
 .carousel-item-type-text_and_image .carousel-image {
   display: none;
 }

diff --git a/Resources/Public/Css/bootstrap5-theme.min.css b/Resources/Public/Css/bootstrap5-theme.min.css
diff --git a/Resources/Public/Scss/components/_carousel.scss b/Resources/Public/Scss/components/_carousel.scss
@@ -239,7 +239,7 @@ $carousel-item-layouts: map-merge(
     }
     .carousel-control {
         width: var(--carousel-control-width);
-        &:focus {
+        &:focus-visible {
             .carousel-control-icon {
                 outline: 2px solid;
             }
@@ -265,7 +265,7 @@ $carousel-item-layouts: map-merge(
             overflow: hidden;
             color: inherit;
             height: 4px;
-            &:focus {
+            &:focus-visible {
                 outline-offset: 1px;
                 outline: 2px solid currentColor;
             }
@@ -323,14 +323,27 @@ $carousel-item-layouts: map-merge(
             }
         }
     }
+    .carousel-content-link {
+        &:focus-visible {
+            outline: none;
+            &:before {
+                content: '';
+                position: absolute;
+                height: 100%;
+                width: 100%;
+                box-shadow: inset 0 0 0 1px #000000, inset 0 0 0 2px #ffffff;
+            }
+        }
+    }
 }
 
 //
 // Type: Header
 // --------------------------------------------------
 .carousel-item-type-header {
     a[class=""],
-    a:not([class]) {
+    a:not([class]),
+    a.carousel-content-link {
         &,
         &:hover {
             color: var(--carousel-item-color);
@@ -351,6 +364,14 @@ $carousel-item-layouts: map-merge(
 // Type: Text
 // --------------------------------------------------
 .carousel-item-type-text {
+    a[class=""],
+    a:not([class]),
+    a.carousel-content-link {
+        &,
+        &:hover {
+            color: var(--carousel-item-color);
+        }
+    }
     .carousel-text-inner {
         margin: 0 auto;
         @include media-breakpoint-up(md) {
@@ -366,6 +387,14 @@ $carousel-item-layouts: map-merge(
 // Type: Text and Image
 // --------------------------------------------------
 .carousel-item-type-text_and_image {
+    a[class=""],
+    a:not([class]),
+    a.carousel-content-link {
+        &,
+        &:hover {
+            color: var(--carousel-item-color);
+        }
+    }
     .carousel-image {
         display: none;
         img {