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 index 4763ba36f9..a76ec18426 100644 --- 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 @@
+ role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="progress"> {{ model.progressText }} diff --git a/packages/survey-vue3-ui/src/components/progress/Progress.vue b/packages/survey-vue3-ui/src/components/progress/Progress.vue index 40fa4d8fa5..ad59d04bbb 100644 --- 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" > {{ survey.progressText diff --git a/src/knockout/components/progress/progress.html b/src/knockout/components/progress/progress.html index 5b789f5401..545de7f878 100644 --- a/src/knockout/components/progress/progress.html +++ b/src/knockout/components/progress/progress.html @@ -1,6 +1,6 @@
+ role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="progress">
diff --git a/src/react/reactSurveyProgress.tsx b/src/react/reactSurveyProgress.tsx index bb16e5a9d9..8a9bfd6a91 100644 --- 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" > {{ survey.progressText diff --git a/testCafe/a11y/navigation.ts b/testCafe/a11y/navigation.ts new file mode 100644 index 0000000000..86e2d4bde5 --- /dev/null +++ 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(); + }); +}); \ No newline at end of file diff --git a/testCafe/helper.js b/testCafe/helper.js index 4e249771a0..2cd4e86739 100644 --- 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;