Accessibility: change page navigation buttons from div to button element

surveyjs · Dec 16, 2024 · 0b5d842 · 0b5d842
1 parent 66f1ddd
commit 0b5d842
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 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
@@ -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
@@ -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
@@ -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>
+</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
@@ -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
@@ -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
@@ -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
@@ -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