diff --git a/source/nodejs/adaptivecards/src/card-elements.ts b/source/nodejs/adaptivecards/src/card-elements.ts index 46fb0cfddc..549cda62d1 100644 --- a/source/nodejs/adaptivecards/src/card-elements.ts +++ b/source/nodejs/adaptivecards/src/card-elements.ts @@ -6866,7 +6866,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 (Shared.GlobalSettings.setTabIndexAtCardRoot) { + renderedCard.tabIndex = 0; + } if (!Utils.isNullOrEmpty(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 fe06333778..b687e38357 100644 --- a/source/nodejs/adaptivecards/src/shared.ts +++ b/source/nodejs/adaptivecards/src/shared.ts @@ -2,6 +2,10 @@ // Licensed under the MIT License. import * as Enums from "./enums"; +export class GlobalSettings { + static setTabIndexAtCardRoot: boolean = true; +} + export const ContentTypes = { applicationJson: "application/json", applicationXWwwFormUrlencoded: "application/x-www-form-urlencoded"