Fixed #7067 - aria-progressbar-name - Ensures every ARIA progressbar …

…node has an accessible name (#7068) Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
surveyjs · Oct 4, 2023 · 6ecdce2 · 6ecdce2
1 parent c2c8fd4
commit 6ecdce2
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 2 deletions.
diff --git a/packages/survey-angular-ui/src/components/progress/default/progress.component.html b/packages/survey-angular-ui/src/components/progress/default/progress.component.html
@@ -1,7 +1,7 @@
 <ng-template #template>
   <div [class]="model.getProgressCssClasses(container)">
     <div [class]="model.css.progressBar" [style.width]="model.progressValue + '%'"
-        role="progressbar" aria-valuemin="0" aria-valuemax="100">
+        role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="progress">
         <span [class]="getProgressTextInBarCss(model.css)">
           {{ model.progressText }}
         </span>

diff --git a/packages/survey-vue3-ui/src/components/progress/Progress.vue b/packages/survey-vue3-ui/src/components/progress/Progress.vue
@@ -6,6 +6,7 @@
       role="progressbar"
       aria-valuemin="0"
       aria-valuemax="100"
+      aria-label="progress"
     >
       <span :class="getProgressTextInBarCss(survey.css)">{{
         survey.progressText

diff --git a/src/knockout/components/progress/progress.html b/src/knockout/components/progress/progress.html
@@ -1,6 +1,6 @@
 <div data-bind="css: getProgressCssClasses()">
     <div data-bind="css: model.css.progressBar, style: { width: model.progressValue + '%' }"
-        role="progressbar" aria-valuemin="0" aria-valuemax="100">
+        role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="progress">
         <span data-bind="text: model.progressText, css: getProgressTextInBarCss(model.css)"></span>
     </div>
     <span data-bind="text: model.progressText, css: getProgressTextUnderBarCss(model.css)"></span>

diff --git a/src/react/reactSurveyProgress.tsx b/src/react/reactSurveyProgress.tsx
@@ -28,6 +28,7 @@ export class SurveyProgress extends SurveyNavigationBase {
           role="progressbar"
           aria-valuemin={0}
           aria-valuemax={100}
+          aria-label="progress"
         >
           <span
             className={SurveyProgressModel.getProgressTextInBarCss(this.css)}

diff --git a/src/vue/progress.vue b/src/vue/progress.vue
@@ -6,6 +6,7 @@
       role="progressbar"
       aria-valuemin="0"
       aria-valuemax="100"
+      aria-label="progress"
     >
       <span :class="getProgressTextInBarCss(survey.css)">{{
         survey.progressText

diff --git a/testCafe/a11y/navigation.ts b/testCafe/a11y/navigation.ts
@@ -0,0 +1,85 @@
+import { frameworks, urlV2, initSurvey } from "../helper";
+import { fixture, Selector, test } from "testcafe";
+import { axeCheck, createReport } from "axe-testcafe";
+const title = "navigation";
+
+const json = {
+  "progressBarType": "pages",
+  "showProgressBar": "top",
+  "title": "Customer Satisfaction Survey",
+  "pages": [{
+    "navigationTitle": "Overall satisfaction",
+    "elements": [{
+      "type": "matrix",
+      "name": "qualities",
+      "title": "Please indicate if you agree or disagree with the following statements",
+      "columns": [{
+        "value": 5,
+        "text": "Strongly agree"
+      }, {
+        "value": 4,
+        "text": "Agree"
+      }, {
+        "value": 3,
+        "text": "Neutral"
+      }, {
+        "value": 2,
+        "text": "Disagree"
+      }, {
+        "value": 1,
+        "text": "Strongly disagree"
+      }],
+      "rows": [{
+        "value": "affordable",
+        "text": "Product is affordable"
+      }, {
+        "value": "does-what-it-claims",
+        "text": "Product does what it claims"
+      }, {
+        "value": "better-than-others",
+        "text": "Product is better than other products on the market"
+      }, {
+        "value": "easy-to-use",
+        "text": "Product is easy to use"
+      }]
+    }]
+  }, {
+    "navigationTitle": "Pricing",
+    "elements": [{
+      "type": "radiogroup",
+      "name": "price-comparison",
+      "title": "Compared to our competitors, do you feel our product is:",
+      "choices": [
+        "Less expensive",
+        "Priced about the same",
+        "More expensive",
+        "Not sure"
+      ]
+    }]
+  }, {
+    "navigationTitle": "Contacts",
+    "elements": [{
+      "type": "text",
+      "name": "email",
+      "title": "Please leave your email address if you would like us to contact you."
+    }]
+  }],
+  "showQuestionNumbers": false
+};
+
+frameworks.forEach((framework) => {
+  fixture`${framework} a11y:${title}`.page`${urlV2}${framework}`.beforeEach(
+    async (t) => {
+      await initSurvey(framework, json);
+    }
+  );
+
+  test("progress bar", async (t) => {
+    await t
+      .expect(
+        await Selector("[role='progressbar']").hasAttribute(
+          "aria-label"
+        )
+      ).ok();
+  });
+});
diff --git a/testCafe/helper.js b/testCafe/helper.js
@@ -12,6 +12,7 @@ export const frameworks = environment
 // eslint-disable-next-line no-console
 console.log("Frameworks: " + frameworks.join(", "));
 export const url = "http://127.0.0.1:8080/examples_test/default/";
+export const urlV2 = "http://127.0.0.1:8080/examples_test/defaultV2/";
 export const url_test = "http://127.0.0.1:8080/examples_test/";
 export const FLOAT_PRECISION = 0.01;