Fix action's disableTabStop is not working in some frameworks (#7292)

surveyjs · Nov 7, 2023 · 0a0b70f · 0a0b70f
1 parent 5b9ec3c
commit 0a0b70f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/packages/survey-angular-ui/src/components/action-bar/action-bar-item-dropdown.component.html b/packages/survey-angular-ui/src/components/action-bar/action-bar-item-dropdown.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-    <button type="button" (click)="model.action(model, model.getIsTrusted($event))" [key2click]="{ processEsc: false }" [class]="model.getActionBarItemCss()" [title]="model.tooltip || model.title" [disabled]="model.disabled" [attr.role]="model.ariaRole">
+    <button type="button" (click)="model.action(model, model.getIsTrusted($event))" [key2click]="{ processEsc: false, disableTabStop: model.disableTabStop }" [class]="model.getActionBarItemCss()" [title]="model.tooltip || model.title" [disabled]="model.disabled" [attr.role]="model.ariaRole">
         <svg *ngIf="model.iconName" [iconName]="model.iconName" [size]="model.iconSize" [title]="model.tooltip || model.title" [class]="model.cssClasses.itemIcon" sv-ng-svg-icon></svg>
         <span *ngIf="model.hasTitle" [class]="model.getActionBarItemTitleCss()">{{ model.title }}</span>
     </button>

diff --git a/packages/survey-angular-ui/src/components/action-bar/action-bar-item.component.html b/packages/survey-angular-ui/src/components/action-bar/action-bar-item.component.html
@@ -1,6 +1,5 @@
 <ng-template #template>
-  <button type="button" (click)="model.action(model, model.getIsTrusted($event))" [key2click]="{ processEsc: false }" [class]="model.getActionBarItemCss()" [attr.title]="model.tooltip || model.title" [attr.aria-checked]="model.ariaChecked" [attr.aria-expanded]="model.ariaExpanded" [attr.role]="model.ariaRole" [disabled]="model.disabled" 
-    data-bind="key2click: { processEsc: false }">
+  <button type="button" (click)="model.action(model, model.getIsTrusted($event))" [key2click]="{ processEsc: false, disableTabStop: model.disableTabStop }" [class]="model.getActionBarItemCss()" [attr.title]="model.tooltip || model.title" [attr.aria-checked]="model.ariaChecked" [attr.aria-expanded]="model.ariaExpanded" [attr.role]="model.ariaRole" [disabled]="model.disabled">
     <svg *ngIf="model.iconName" [iconName]="model.iconName" [size]="model.iconSize" [title]="model.tooltip || model.title" [class]="model.cssClasses.itemIcon" sv-ng-svg-icon></svg>
     <span *ngIf="model.hasTitle" [class]="model.getActionBarItemTitleCss()">{{ model.title }}</span>
   </button>

diff --git a/src/react/components/action-bar/action-bar-item.tsx b/src/react/components/action-bar/action-bar-item.tsx
@@ -99,7 +99,7 @@ export class SurveyActionBarItem extends SurveyElementBase<
         role={this.item.ariaRole}
       >
         {buttonContent}
-      </button>, null, { processEsc: false });
+      </button>, this.item, { processEsc: false });
 
     return button;
   }

diff --git a/testCafe/survey/titleActions.js b/testCafe/survey/titleActions.js
@@ -46,6 +46,26 @@ frameworks.forEach((framework) => {
     await t.expect(await getQuestionState()).eql("expanded");
   });
 
+  test("check action with disableTabStop: true", async (t) => {
+    await initSurvey(framework, json, {
+      onGetQuestionTitleActions: (_, opt) => {
+        opt.titleActions = [
+          {
+            title: "Action",
+            disableTabStop: true,
+            action: () => {
+              opt.question.state = "expanded";
+            },
+          },
+        ];
+      },
+    });
+    const visibleAction = Selector("h5 .sv-action:not(.sv-action--hidden)");
+    await t
+      .expect(visibleAction.find("button").innerText).eql("Action")
+      .expect(visibleAction.find("button").getAttribute("tabindex")).eql("-1");
+  });
+
   test("check action with icon", async (t) => {
     await initSurvey(framework, json, {
       onGetQuestionTitleActions: (_, opt) => {