From a0fe57449c29cedfccddba667b0029497b97be4c Mon Sep 17 00:00:00 2001 From: Vsevolod Date: Thu, 26 Oct 2023 02:02:28 -0700 Subject: [PATCH] [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 --- source/nodejs/adaptivecards/src/carousel.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/source/nodejs/adaptivecards/src/carousel.ts b/source/nodejs/adaptivecards/src/carousel.ts index ea318ea2ad..6472821402 100644 --- 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();