diff --git a/source/nodejs/adaptivecards/src/card-elements.ts b/source/nodejs/adaptivecards/src/card-elements.ts index cb38c9d626..83a6702092 100644 --- a/source/nodejs/adaptivecards/src/card-elements.ts +++ b/source/nodejs/adaptivecards/src/card-elements.ts @@ -6117,7 +6117,15 @@ export class AdaptiveCard extends ContainerWithActions { if (renderedCard) { renderedCard.classList.add(this.hostConfig.makeCssClassName("ac-adaptiveCard")); - renderedCard.tabIndex = 0; + + // Having a tabIndex on the root container for a card can mess up accessibility in some scenarios. + // However, we've shipped this behavior before, and so can't just turn it off in a point release. For + // now, to unblock accessibility scenarios for our customers, we've got an option to turn it off. In a + // future release, we should strongly consider flipping the default such that we *don't* emit a tabIndex + // by default. + if (GlobalSettings.setTabIndexAtCardRoot) { + renderedCard.tabIndex = 0; + } if (this.speak) { renderedCard.setAttribute("aria-label", this.speak); diff --git a/source/nodejs/adaptivecards/src/shared.ts b/source/nodejs/adaptivecards/src/shared.ts index a98750b61c..2173b1f845 100644 --- a/source/nodejs/adaptivecards/src/shared.ts +++ b/source/nodejs/adaptivecards/src/shared.ts @@ -12,6 +12,7 @@ export class GlobalSettings { static useBuiltInInputValidation: boolean = true; static displayInputValidationErrors: boolean = true; static allowPreProcessingPropertyValues: boolean = false; + static setTabIndexAtCardRoot: boolean = true; } export const ContentTypes = {