Accessibility: update accessbility for the main tabs

surveyjs · Dec 16, 2024 · 831ecde · 831ecde
1 parent 66f1ddd
commit 831ecde
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 12 deletions.
diff --git a/packages/survey-creator-angular/src/creator.component.html b/packages/survey-creator-angular/src/creator.component.html
@@ -22,7 +22,9 @@
             <div class="svc-creator__content-holder svc-flex-column">
               <ng-container *ngFor="let tab of creator.tabs">
                 <div class="svc-creator-tab" *ngIf="creator.viewType == tab.id && tab.visible"
+                  role="tabpanel"
                   [attr.id]="'scrollableDiv-' + tab.id"
+                  [attr.aria-labelledby]="'tab-' + tab.id"
                   [class.svc-creator__toolbox--right]="creator.toolboxLocation == 'right'">
                   <ng-template
                     [component]="{ name: tab.componentContent, data: { model: tab.data.model } }"></ng-template>

diff --git a/packages/survey-creator-angular/src/tabbed-menu/tabbed-menu/tabbed-menu-item.component.html b/packages/survey-creator-angular/src/tabbed-menu/tabbed-menu/tabbed-menu-item.component.html
@@ -1,9 +1,23 @@
 <ng-template #template>
-  <div [class]="model.getRootCss()" (click)="model.action()" [key2click]>
+  <div
+    [class]="model.getRootCss()"
+    (click)="model.action()"
+    [key2click]
+    role="tab"
+    [attr.id]="'tab-' + model.id"
+    [attr.aria-selected]="model.active"
+    [attr.aria-controls]="'scrollableDiv-' + model.id"
+  >
     <span *ngIf="model.hasTitle" [class]="model.getTitleCss()">
-      {{model.title}}
+      {{ model.title }}
     </span>
-    <svg *ngIf="model.hasIcon" [iconName]="model.iconName" [size]="'auto'" [class]="model.getIconCss()"
-      [title]="model.tooltip || model.title" sv-ng-svg-icon></svg>
+    <svg
+      *ngIf="model.hasIcon"
+      [iconName]="model.iconName"
+      [size]="'auto'"
+      [class]="model.getIconCss()"
+      [title]="model.tooltip || model.title"
+      sv-ng-svg-icon
+    ></svg>
   </div>
-</ng-template>
+</ng-template>
diff --git a/packages/survey-creator-angular/src/tabbed-menu/tabbed-menu/tabbed-menu.component.html b/packages/survey-creator-angular/src/tabbed-menu/tabbed-menu/tabbed-menu.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div class="svc-tabbed-menu" #container>
+  <div class="svc-tabbed-menu" #container role="tablist">
     <ng-container *ngFor="let action of model.renderedActions">  
       <svc-tabbed-menu-item-wrapper [model]="action"></svc-tabbed-menu-item-wrapper>
     </ng-container>

diff --git a/packages/survey-creator-knockout/src/survey-creator.html b/packages/survey-creator-knockout/src/survey-creator.html
@@ -27,7 +27,8 @@
             <!-- ko foreach: creator.tabs -->
             <!-- ko if: $parent.creator.viewType == id && ($data.visible === undefined || $data.visible) -->
             <div class="svc-creator-tab"
-              data-bind="attr: { id: 'scrollableDiv-' + id }, css: { 'svc-creator__toolbox--right': $parent.creator.toolboxLocation == 'right' }">
+              role="tabpanel"
+              data-bind="attr: { id: 'scrollableDiv-' + id, 'aria-labelledby': 'tab-' + id }, css: { 'svc-creator__toolbox--right': $parent.creator.toolboxLocation == 'right' }">
               <!-- ko component: { name: componentContent, params: { creator: $parent.creator, data: data } } -->
               <!-- /ko -->
             </div>

diff --git a/packages/survey-creator-knockout/src/tabbed-menu/tabbed-menu-item.html b/packages/survey-creator-knockout/src/tabbed-menu/tabbed-menu-item.html
@@ -1,9 +1,13 @@
-<div class="svc-tabbed-menu-item" data-bind="click: action, key2click, css: getRootCss()">
+<div
+  class="svc-tabbed-menu-item"
+  data-bind="click: action, key2click, css: getRootCss(), attr: {id: 'tab-' + id, 'aria-controls': 'scrollableDiv-' + id, 'aria-selected': active}"
+  role="tab"
+>
   <!-- ko if: hasTitle -->
   <span data-bind="text: title, css: getTitleCss()"></span>
   <!-- /ko -->
   <!-- ko if: hasIcon -->
   <!-- ko component: { name: 'sv-svg-icon', params: { iconName: $data.iconName, size: "auto", css: getIconCss(), title: $data.tooltip || $data.title } } -->
   <!-- /ko -->
   <!-- /ko -->
-</div>
+</div>
diff --git a/packages/survey-creator-knockout/src/tabbed-menu/tabbed-menu.html b/packages/survey-creator-knockout/src/tabbed-menu/tabbed-menu.html
@@ -1,4 +1,4 @@
-<div class="svc-tabbed-menu">
+<div class="svc-tabbed-menu" role="tablist">
   <!-- ko foreach: renderedActions -->
   <span
     class="svc-tabbed-menu-item-container"

diff --git a/packages/survey-creator-react/src/SurveyCreator.tsx b/packages/survey-creator-react/src/SurveyCreator.tsx
@@ -152,8 +152,10 @@ export class SurveyCreatorComponent extends SurveyElementBase<
     const className = "svc-creator-tab" + (creator.toolboxLocation == "right" ? " svc-creator__toolbox--right" : "");
     return (
       <div
+        role="tabpanel"
         key={tab.id}
         id={"scrollableDiv-" + tab.id}
+        aria-labelledby={"tab-" + tab.id}
         className={className}
       >
         {component}

diff --git a/packages/survey-creator-react/src/TabbedMenu.tsx b/packages/survey-creator-react/src/TabbedMenu.tsx
@@ -111,7 +111,14 @@ export class TabbedMenuItemComponent extends SurveyElementBase<
   render(): React.JSX.Element {
     const item = this.item;
     return (attachKey2click(
-      <div className={item.getRootCss()} onClick={() => item.action(item)}>
+      <div
+        role="tab"
+        id={"tab-" + item.id}
+        aria-selected={item.active}
+        aria-controls={"scrollableDiv-" + item.id}
+        className={item.getRootCss()}
+        onClick={() => item.action(item)}
+      >
         {item.hasTitle ? <span className={item.getTitleCss()}>{item.title}</span> : null}
         {item.hasIcon ? <SvgIcon iconName={item.iconName} className={item.getIconCss()} size={"auto"} title={item.tooltip || item.title}></SvgIcon> : null}
       </div>

diff --git a/packages/survey-creator-vue/src/Creator.vue b/packages/survey-creator-vue/src/Creator.vue
@@ -48,9 +48,11 @@
               <div class="svc-creator__content-holder svc-flex-column">
                 <template v-for="tab in model.tabs">
                   <div
+                    role="tabpanel"
                     class="svc-creator-tab"
                     v-bind:key="tab.id"
                     v-if="model.viewType == tab.id && tab.visible"
+                    :aria-labelledby="'tab-' + tab.id"
                     :id="'scrollableDiv-' + tab.id"
                     :class="{
                       'svc-creator__toolbox--right':

diff --git a/packages/survey-creator-vue/src/tabbed-menu/TabbedMenu.vue b/packages/survey-creator-vue/src/tabbed-menu/TabbedMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="svc-tabbed-menu" ref="container">
+  <div class="svc-tabbed-menu" ref="container" role="tablist">
     <template v-for="action in model.renderedActions" :key="action.id">
       <SvComponent
         :is="'svc-tabbed-menu-item-wrapper'"

diff --git a/packages/survey-creator-vue/src/tabbed-menu/TabbedMenuItem.vue b/packages/survey-creator-vue/src/tabbed-menu/TabbedMenuItem.vue
@@ -1,5 +1,9 @@
 <template>
   <div
+    role="tab"
+    :id="'tab-' + item.id"
+    :aria-selected="item.active"
+    :aria-controls="'scrollableDiv-' + item.id"
     class="svc-tabbed-menu-item"
     :class="item.getRootCss()"
     @click="item.action"