[JS] Make tabIndex on root card turnoffable (#4020)

Fixes #2236
microsoft · May 18, 2020 · 73e1271 · 73e1271
1 parent 8450bc1
commit 73e1271
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -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 = {