From 0b5d842b784714986285ee79d577fe29b2dc699b Mon Sep 17 00:00:00 2001
From: Koen Van Geert <koen.vangeert@collibra.com>
Date: Wed, 27 Nov 2024 17:45:55 +0100
Subject: [PATCH] Accessibility: change page navigation buttons from div to
 button element

---
 .../src/page-navigator/page-navigator-item.component.html     | 2 +-
 .../src/page-navigator/page-navigator.component.html          | 2 +-
 .../src/page-navigator/page-navigator-item.html               | 4 ++--
 .../src/page-navigator/page-navigator.html                    | 2 +-
 packages/survey-creator-react/src/PageNavigator.tsx           | 2 ++
 .../survey-creator-vue/src/page-navigator/PageNavigator.vue   | 1 +
 .../src/page-navigator/PageNavigatorItem.vue                  | 1 +
 7 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/survey-creator-angular/src/page-navigator/page-navigator-item.component.html b/packages/survey-creator-angular/src/page-navigator/page-navigator-item.component.html
index e8ae1f6ef5..b50c29eae4 100644
--- a/packages/survey-creator-angular/src/page-navigator/page-navigator-item.component.html
+++ b/packages/survey-creator-angular/src/page-navigator/page-navigator-item.component.html
@@ -1,6 +1,6 @@
 <ng-template #template>
   <div class="svc-page-navigator-item">
-    <div class="svc-page-navigator-item-content" (click)="click($event)" [key2click]
+    <div role="button" class="svc-page-navigator-item-content" (click)="click($event)" [key2click]
       [class.svc-page-navigator-item--selected]="model.active"
       [class.svc-page-navigator-item--disabled]="anyModel.disabled">
       <div class="svc-page-navigator-item__dot" [attr.title]="model.title">
diff --git a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
index f670d44207..14922ac310 100644
--- a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
+++ b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
@@ -1,6 +1,6 @@
 <ng-template #template>
   <div class="svc-page-navigator" #container [visible]="model.visible">
-      <div class="svc-page-navigator__selector svc-page-navigator__button"
+      <div role="button" class="svc-page-navigator__selector svc-page-navigator__button"
           (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__button--pressed]="model.isPopupOpened">
           <svg class="svc-page-navigator__button-icon" [iconName]="model.icon" [size]="'auto'" sv-ng-svg-icon></svg>
           <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
diff --git a/packages/survey-creator-knockout/src/page-navigator/page-navigator-item.html b/packages/survey-creator-knockout/src/page-navigator/page-navigator-item.html
index e375e13ae2..c6474b7879 100644
--- a/packages/survey-creator-knockout/src/page-navigator/page-navigator-item.html
+++ b/packages/survey-creator-knockout/src/page-navigator/page-navigator-item.html
@@ -1,11 +1,11 @@
 <div class="svc-page-navigator-item-content"
+  role="button"
   data-bind="click: action, key2click, css: { 'svc-page-navigator-item--selected': active, 'svc-page-navigator-item--disabled': disabled }">
   <div class="svc-page-navigator-item__dot" data-bind="attr: { title: text }">
     <div class="svc-page-navigator-item__dot-content"></div>
   </div>
-
   <div class="svc-page-navigator-item__banner">
     <span class="svc-page-navigator-item__text" data-bind="text: text"></span>
     <span class="svc-page-navigator-item__dot"><span class="svc-page-navigator-item__dot-content"></span></span>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
index 0b1c948ebf..50dbb26159 100644
--- a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
+++ b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
@@ -1,6 +1,6 @@
 <!-- ko if: visible -->
 <div class="svc-page-navigator">
-    <div class="svc-page-navigator__selector svc-page-navigator__button"
+    <div role="button" class="svc-page-navigator__selector svc-page-navigator__button"
         data-bind="click: togglePageSelector, key2click, attr: { title: pageSelectorCaption }, css: { 'svc-page-navigator__button--pressed': isPopupOpened }">
         <sv-svg-icon class="svc-page-navigator__button-icon" params="iconName: icon, size: 'auto'"></sv-svg-icon>
         <sv-popup params="model: popupModel, cssClass: 'svc-page-navigator__popup'"></sv-popup>
diff --git a/packages/survey-creator-react/src/PageNavigator.tsx b/packages/survey-creator-react/src/PageNavigator.tsx
index 05e549dc22..59234135a9 100644
--- a/packages/survey-creator-react/src/PageNavigator.tsx
+++ b/packages/survey-creator-react/src/PageNavigator.tsx
@@ -62,6 +62,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
     return (
       <div className="svc-page-navigator" ref={this.containerRef} style={{ display: this.model.visible ? "flex" : "none" }}>
         {attachKey2click(<div
+          role="button"
           className={className}
           onClick={() => this.model.togglePageSelector()}
           title={this.model.pageSelectorCaption}
@@ -106,6 +107,7 @@ export class SurveyPageNavigatorItem extends CreatorModelElement<any, any> {
     return (
       <div className="svc-page-navigator-item">
         {attachKey2click(<div
+          role="button"
           className={className}
           onClick={(e) => {
             item.action(item);
diff --git a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
index b2a74fb3d1..90c42b1455 100644
--- a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
+++ b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="svc-page-navigator" v-show="model.visible" ref="root">
     <div
+      role="button"
       class="svc-page-navigator__selector svc-page-navigator__button"
       @click="model.togglePageSelector($event)"
       v-key2click
diff --git a/packages/survey-creator-vue/src/page-navigator/PageNavigatorItem.vue b/packages/survey-creator-vue/src/page-navigator/PageNavigatorItem.vue
index 9bb916fb72..6e6930f967 100644
--- a/packages/survey-creator-vue/src/page-navigator/PageNavigatorItem.vue
+++ b/packages/survey-creator-vue/src/page-navigator/PageNavigatorItem.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="svc-page-navigator-item">
     <div
+      role="button"
       class="svc-page-navigator-item-content"
       @click="click($event)"
       v-key2click