Accessibility: change page navigation buttons from div to button element

surveyjs · Dec 4, 2024 · 0b01558 · 0b01558
1 parent c040911
commit 0b01558
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 19 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]
+    <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"></div>
@@ -9,6 +9,6 @@
         <span class="svc-page-navigator-item__text">{{ model.title }}</span>
         <span class="svc-page-navigator-item__dot"></span>
       </div>
-    </div>
+    </button>
   </div>
 </ng-template>
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,10 +1,10 @@
 <ng-template #template>
   <div class="svc-page-navigator" #container [visible]="model.visible">
-      <div class="svc-page-navigator__selector svc-page-navigator__button"
+      <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>
-      </div>
+      </button>
       <div>
         <svc-page-navigator-item *ngFor="let item of model.visibleItems" [model]="item"></svc-page-navigator-item>
       </div>

diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss
@@ -11,6 +11,9 @@ svc-page-navigator-item,
 }
 
 .svc-page-navigator-item-content {
+  border: none;
+  appearance: none;
+  background: none;
   height: 100%;
   width: 100%;
 

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,9 +1,14 @@
-<div class="svc-page-navigator-item-content"
-  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>
+<button
+  class="svc-page-navigator-item-content"
+  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>
 
   <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>
   </div>
-</div>
+</button>
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,10 +1,10 @@
 <!-- ko if: visible -->
 <div class="svc-page-navigator">
-    <div class="svc-page-navigator__selector svc-page-navigator__button"
+    <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>
-    </div>
+    </button>
     <div>
         <!-- ko foreach: visibleItems -->
         <svc-page-navigator-item params="item: $data"></svc-page-navigator-item>

diff --git a/packages/survey-creator-react/src/PageNavigator.tsx b/packages/survey-creator-react/src/PageNavigator.tsx
@@ -57,7 +57,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
       const el = this.containerRef.current as HTMLDivElement;
       if (!!el) {
         const self = this;
-        el.parentElement.parentElement.parentElement.onscroll = function (this: GlobalEventHandlers, ev: Event) {
+        el.parentElement.parentElement.parentElement.onscroll = function(this: GlobalEventHandlers, ev: Event) {
           return self.model.onContainerScroll(ev.currentTarget as HTMLDivElement);
         };
         self.model.setItemsContainer(el.parentElement as HTMLDivElement);
@@ -80,7 +80,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
       className += " svc-page-navigator__button--pressed";
     return (
       <div className="svc-page-navigator" ref={this.containerRef} style={{ display: this.model.visible ? "flex" : "none" }}>
-        {attachKey2click(<div
+        {attachKey2click(<button
           className={className}
           onClick={() => this.model.togglePageSelector()}
           title={this.model.pageSelectorCaption}
@@ -96,7 +96,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
             model={this.model.popupModel}
           //className="svc-page-navigator__popup"
           ></Popup>
-        </div>)}
+        </button>)}
         <div>
           {this.model.visibleItems.map((item) => (
             <SurveyPageNavigatorItem
@@ -124,7 +124,7 @@ export class SurveyPageNavigatorItem extends CreatorModelElement<any, any> {
     }
     return (
       <div className="svc-page-navigator-item">
-        {attachKey2click(<div
+        {attachKey2click(<button
           className={className}
           onClick={(e) => {
             item.action(item);
@@ -136,7 +136,7 @@ export class SurveyPageNavigatorItem extends CreatorModelElement<any, any> {
             <span className="svc-page-navigator-item__text">{item.title}</span>
             <span className="svc-page-navigator-item__dot"></span>
           </div>
-        </div>)}
+        </button>)}
       </div>
     );
   }

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,6 @@
 <template>
   <div class="svc-page-navigator" v-show="model.visible" ref="root">
-    <div
+    <button
       class="svc-page-navigator__selector svc-page-navigator__button"
       @click="model.togglePageSelector($event)"
       v-key2click
@@ -14,7 +14,7 @@
         :size="'auto'"
       ></SvComponent>
       <SvComponent :is="'sv-popup'" :model="model.popupModel"></SvComponent>
-    </div>
+    </button>
     <div>
       <SvComponent
         :is="'svc-page-navigator-item'"

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,6 @@
 <template>
   <div class="svc-page-navigator-item">
-    <div
+    <button
       class="svc-page-navigator-item-content"
       @click="click($event)"
       v-key2click
@@ -17,7 +17,7 @@
         }}</span>
         <span class="svc-page-navigator-item__dot"></span>
       </div>
-    </div>
+    </button>
   </div>
 </template>
 <script lang="ts" setup>