fix(ui5-carousel): correct navigation buttons behavior (#5302)

The ui5-carousel's navigation buttons now will focus the carousel after
being clicked. This avoids losing the focus when the first/last button
of the carousel dissapears when reaching the fist/last pages.

Fixes: #5125

packages/main/src/Carousel.hbs

@@ -70,7 +70,7 @@
         class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
         icon="slim-arrow-left"
         tabindex="-1"
-        @click={{navigateLeft}}
+        @click={{_navButtonClick}}
     ></ui5-button>
 {{/inline}}
 
@@ -81,6 +81,6 @@
         class="ui5-carousel-navigation-button {{classes.navNextButton}}"
         icon="slim-arrow-right"
         tabindex="-1"
-        @click={{navigateRight}}
+        @click={{_navButtonClick}}
     ></ui5-button>
 {{/inline}}

packages/main/src/Carousel.js

@@ -479,6 +479,16 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_navButtonClick(event) {
+		if (event.target.hasAttribute("arrow-forward")) {
+			this.navigateRight();
+		} else {
+			this.navigateLeft();
+		}
+
+		this.focus();
+	}
+
 	/**
 	 * Changes the currently displayed page.
 	 * @param {Integer} itemIndex The index of the target page

packages/main/src/themes/Carousel.css

@@ -106,6 +106,8 @@
     box-shadow: none;
     cursor: pointer;
     outline-offset: .1rem;
+
+    --_ui5_button_focused_border_radius: 50%;
 }
 
 .ui5-carousel-navigation-arrows .ui5-carousel-navigation-button {