[Carousel A11y]: Change focus order to first focus carousel pages and…

… navigation controls second (#8709) * focus carousel page before carousel navigation controls * tabs to spaces --------- Co-authored-by: Joseph Woo <[email protected]>
microsoft · Oct 26, 2023 · a0fe574 · a0fe574
1 parent f003fe1
commit a0fe574
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/source/nodejs/adaptivecards/src/carousel.ts b/source/nodejs/adaptivecards/src/carousel.ts
@@ -357,10 +357,6 @@ export class Carousel extends Container {
         this._containerForAdorners = containerForAdorners;
 
         cardLevelContainer.appendChild(containerForAdorners);
-
-        const navigationContainer: HTMLElement = document.createElement("div");
-        navigationContainer.className = this.hostConfig.makeCssClassName("ac-carousel-navigation");
-        containerForAdorners.appendChild(navigationContainer);
 
         const carouselWrapper: HTMLElement = document.createElement("div");
         carouselWrapper.className = this.hostConfig.makeCssClassName(
@@ -396,6 +392,9 @@ export class Carousel extends Container {
             carouselWrapper.style.minHeight = "-webkit-min-content";
         }
 
+        const navigationContainer: HTMLElement = document.createElement("div");
+        navigationContainer.className = this.hostConfig.makeCssClassName("ac-carousel-navigation");
+
         const prevElementDiv: HTMLElement = document.createElement("div");
         prevElementDiv.className = this.hostConfig.makeCssClassName(
             "swiper-button-prev"
@@ -461,6 +460,7 @@ export class Carousel extends Container {
         carouselContainer.tabIndex = this.isDesignMode() ? -1 : 0;
 
         containerForAdorners.appendChild(carouselContainer);
+        containerForAdorners.appendChild(navigationContainer);
 
         // `isRtl()` will set the correct value of rtl by reading the value from the parents
         this.rtl = this.isRtl();