Accessibility: change page navigation buttons from div to button element

surveyjs · Dec 16, 2024 · 9e4b3d8 · 9e4b3d8
1 parent 66f1ddd
commit 9e4b3d8
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 17 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">
@@ -11,6 +11,6 @@
         <span class="svc-page-navigator-item__text">{{ model.title }}</span>
         <span class="svc-page-navigator-item__dot"><span class="svc-page-navigator-item__dot-content"></span></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
@@ -15,6 +15,12 @@ svc-page-navigator-item,
   align-items: center;
   position: relative;
 
+  border: none;
+  appearance: none;
+  background: none;
+  height: 100%;
+  width: 100%;
+
   &:hover,
   &:focus {
     outline: none;
@@ -132,4 +138,4 @@ svc-page-navigator-item,
     color: $foreground;
     opacity: 0.25;
   }
-}
+}
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
@@ -3,9 +3,8 @@
   <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,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
@@ -61,7 +61,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}
@@ -77,7 +77,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
@@ -105,7 +105,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);
@@ -117,7 +117,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 className="svc-page-navigator-item__dot-content"></span></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 class="svc-page-navigator-item__dot-content"></span></span>
       </div>
-    </div>
+    </button>
   </div>
 </template>
 <script lang="ts" setup>