diff --git a/accessibilityTests/helper.js b/accessibilityTests/helper.ts
similarity index 81%
rename from accessibilityTests/helper.js
rename to accessibilityTests/helper.ts
index be2d027ffb..dd3fe0b9a8 100644
--- a/accessibilityTests/helper.js
+++ b/accessibilityTests/helper.ts
@@ -19,7 +19,7 @@ export const applyTheme = ClientFunction((theme) => {
});
export const initSurvey = ClientFunction(
- (framework, json, events, isDesignMode, props) => {
+ (framework, json, events?, isDesignMode?, props?) => {
// eslint-disable-next-line no-console
console.error = (msg) => {
throw new Error(msg);
@@ -72,7 +72,7 @@ export const initSurvey = ClientFunction(
data: { survey: model },
});
} else if (framework === "angular" || framework == "vue3") {
- window.setSurvey(model);
+ (window as any).setSurvey(model);
}
window["survey"] = model;
}
@@ -80,3 +80,29 @@ export const initSurvey = ClientFunction(
// https://www.deque.com/axe/core-documentation/api-documentation/#overview
export const axeTags = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "best-practice", "section508", "wcag412"];
+
+export const axeContext = { include: [[".sv_p_root"]] };
+export const axeOptions = {
+ runOnly: {
+ type: "tag",
+ values: axeTags
+ },
+ rules: {
+ //https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
+ "color-contrast": {
+ enabled: false
+ },
+ "document-title": {
+ enabled: false
+ },
+ "landmark-one-main": {
+ enabled: false
+ },
+ "page-has-heading-one": {
+ enabled: false
+ },
+ "region": {
+ enabled: false
+ }
+ }
+};
diff --git a/accessibilityTests/matrices.ts b/accessibilityTests/matrices.ts
index 1e2b46307f..72390f235d 100644
--- a/accessibilityTests/matrices.ts
+++ b/accessibilityTests/matrices.ts
@@ -1,260 +1,69 @@
-import { frameworks, url, initSurvey, axeTags } from "./helper";
+import { frameworks, url, initSurvey, axeTags, axeContext, axeOptions } from "./helper";
import { fixture, test } from "testcafe";
import { axeCheck, createReport } from "axe-testcafe";
const title = "matrices";
-const json = {
- "elements": [
- {
- type: "matrix",
- name: "Quality",
- title: "Matrix",
- columns: [
- {
- value: 1,
- text: "Strongly Disagree"
- },
- {
- value: 2,
- text: "Disagree"
- },
- {
- value: 3,
- text: "Neutral"
- },
- {
- value: 4,
- text: "Agree"
- },
- {
- value: 5,
- text: "Strongly Agree"
- }
- ],
- 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"
- }
- ]
- },
- {
- type: "matrix Dropdown",
- name: "frameworksRate",
- title: "Matrixdropdown",
- choices: ["Excelent", "Good", "Average", "Fair", "Poor"],
- columns: [
- {
- name: "using",
- title: "Do you use it?",
- choices: ["Yes", "No"],
- cellType: "radiogroup"
- },
- {
- name: "experience",
- title: "How long do you use it?",
- choices: [
+frameworks.forEach((framework) => {
+ fixture`${framework} a11y:${title}`.page`${url}${framework}`.beforeEach(
+ async (t) => {
+ }
+ );
+
+ test("axe check matrix", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "matrix",
+ name: "Quality",
+ title: "Matrix",
+ columns: [
{
- value: 5,
- text: "3-5 years"
+ value: 1,
+ text: "Strongly Disagree"
},
{
value: 2,
- text: "1-2 years"
+ text: "Disagree"
},
{
- value: 1,
- text: "less than a year"
+ value: 3,
+ text: "Neutral"
+ },
+ {
+ value: 4,
+ text: "Agree"
+ },
+ {
+ value: 5,
+ text: "Strongly Agree"
+ }
+ ],
+ 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"
}
]
},
- {
- name: "strength",
- title: "What is main strength?",
- choices: ["Easy", "Compact", "Fast", "Powerfull"],
- cellType: "checkbox"
- },
- {
- name: "knowledge",
- title: "Please describe your experience",
- cellType: "text"
- },
- {
- name: "rate",
- title: "Please rate the framework itself"
- }
- ],
- rows: [
- {
- value: "angularv1",
- text: "angularjs v1.x"
- },
- {
- value: "angularv2",
- text: "angularjs v2"
- },
- {
- value: "knockoutjs"
- },
- {
- value: "reactjs"
- }
]
- },
- {
- type: "matrixdynamic",
- name: "teachersRate",
- title: "Matrix Dynamic",
- addRowText: "Add Subject",
- horizontalScroll: true,
- columnMinWidth: "130px",
- columnColCount: 1,
- cellType: "radiogroup",
- choices: [
- {
- value: 1,
- text: "Yes"
- },
- {
- value: 0,
- text: "Sometimes"
- },
- {
- value: -1,
- text: "No"
- }
- ],
- columns: [
- {
- name: "subject",
- cellType: "dropdown",
- title: "Select a subject",
- isRequired: true,
- minWidth: "300px",
- choices: [
- "English: American Literature",
- "English: British and World Literature",
- "Math: Consumer Math",
- "Math: Practical Math",
- "Math: Developmental Algebra",
- "Math: Continuing Algebra",
- "Math: Pre-Algebra",
- "Math: Algebra",
- "Math: Geometry",
- "Math: Integrated Mathematics",
- "Science: Physical Science",
- "Science: Earth Science",
- "Science: Biology",
- "Science: Chemistry",
- "History: World History",
- "History: Modern World Studies",
- "History: U.S. History",
- "History: Modern U.S. History",
- "Social Sciences: U.S. Government and Politics",
- "Social Sciences: U.S. and Global Economics",
- "World Languages: Spanish",
- "World Languages: French",
- "World Languages: German",
- "World Languages: Latin",
- "World Languages: Chinese",
- "World Languages: Japanese"
- ]
- },
- {
- name: "explains",
- title: "Clearly explains the objectives"
- },
- {
- name: "interesting",
- title: "Makes class interesting"
- },
- {
- "name": "Column 2",
- "cellType": "boolean"
- },
- {
- name: "effective",
- title: "Uses class time effectively"
- },
- {
- name: "knowledge",
- title: "Knows the subject matter"
- },
- {
- name: "recognition",
- title: "Recognizes and acknowledges effort"
- },
- {
- name: "inform",
- title: "Keeps me informed of my progress"
- },
- {
- name: "opinion",
- title: "Encourages and accepts different opinions"
- },
- {
- name: "respect",
- title: "Has the respect of the student"
- },
- {
- name: "cooperation",
- title: "Encourages cooperation and participation"
- },
- {
- name: "parents",
- title: "Communicates with my parents"
- },
- {
- name: "selfthinking",
- title: "Encourages me to think for myself"
- },
- {
- name: "frusturation",
- cellType: "comment",
- title: "Is there anything about this class that frustrates you?",
- minWidth: "250px"
- },
- {
- name: "likeTheBest",
- cellType: "comment",
- title: "What do you like best about this class and/or teacher?",
- minWidth: "250px"
- },
- {
- name: "improvements",
- cellType: "comment",
- title:
- "What do you wish this teacher would do differently that would improve this class?",
- minWidth: "250px"
- }
- ],
- rowCount: 2
- },
- ]
-};
-
-frameworks.forEach((framework) => {
- fixture`${framework} a11y:${title}`.page`${url}${framework}`.beforeEach(
- async (t) => {
- await initSurvey(framework, json);
- }
- );
-
- test.skip("axe check", async (t) => {
- const axeContext = { include: [[".sv_p_root"]] };
- const axeOptions = {
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check matrixdropdown", async (t) => {
+ const axeOptionsIgnoreMinor = {
runOnly: {
type: "tag",
values: axeTags
@@ -275,9 +84,217 @@ frameworks.forEach((framework) => {
},
"region": {
enabled: false
- }
+ },
+ // Skip one minor case for listbox role in checkbox fieldset
+ "aria-allowed-role": {
+ enabled: false
+ },
}
};
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "matrixdropdown",
+ name: "frameworksRate",
+ title: "Matrix Dropdown",
+ choices: ["Excelent", "Good", "Average", "Fair", "Poor"],
+ columns: [
+ {
+ name: "using",
+ title: "Do you use it?",
+ choices: ["Yes", "No"],
+ cellType: "radiogroup"
+ },
+ {
+ name: "experience",
+ title: "How long do you use it?",
+ choices: [
+ {
+ value: 5,
+ text: "3-5 years"
+ },
+ {
+ value: 2,
+ text: "1-2 years"
+ },
+ {
+ value: 1,
+ text: "less than a year"
+ }
+ ]
+ },
+ {
+ name: "strength",
+ title: "What is main strength?",
+ choices: ["Easy", "Compact", "Fast", "Powerfull"],
+ cellType: "checkbox"
+ },
+ {
+ name: "knowledge",
+ title: "Please describe your experience",
+ cellType: "text"
+ },
+ {
+ name: "rate",
+ title: "Please rate the framework itself"
+ }
+ ],
+ rows: [
+ {
+ value: "angularv1",
+ text: "angularjs v1.x"
+ },
+ {
+ value: "angularv2",
+ text: "angularjs v2"
+ },
+ {
+ value: "knockoutjs"
+ },
+ {
+ value: "reactjs"
+ }
+ ]
+ },
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptionsIgnoreMinor);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check matrixdynamic", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "matrixdynamic",
+ name: "teachersRate",
+ title: "Matrix Dynamic",
+ addRowText: "Add Subject",
+ horizontalScroll: true,
+ columnMinWidth: "130px",
+ columnColCount: 1,
+ cellType: "radiogroup",
+ choices: [
+ {
+ value: 1,
+ text: "Yes"
+ },
+ {
+ value: 0,
+ text: "Sometimes"
+ },
+ {
+ value: -1,
+ text: "No"
+ }
+ ],
+ columns: [
+ {
+ name: "subject",
+ cellType: "dropdown",
+ title: "Select a subject",
+ isRequired: true,
+ minWidth: "300px",
+ choices: [
+ "English: American Literature",
+ "English: British and World Literature",
+ "Math: Consumer Math",
+ "Math: Practical Math",
+ "Math: Developmental Algebra",
+ "Math: Continuing Algebra",
+ "Math: Pre-Algebra",
+ "Math: Algebra",
+ "Math: Geometry",
+ "Math: Integrated Mathematics",
+ "Science: Physical Science",
+ "Science: Earth Science",
+ "Science: Biology",
+ "Science: Chemistry",
+ "History: World History",
+ "History: Modern World Studies",
+ "History: U.S. History",
+ "History: Modern U.S. History",
+ "Social Sciences: U.S. Government and Politics",
+ "Social Sciences: U.S. and Global Economics",
+ "World Languages: Spanish",
+ "World Languages: French",
+ "World Languages: German",
+ "World Languages: Latin",
+ "World Languages: Chinese",
+ "World Languages: Japanese"
+ ]
+ },
+ {
+ name: "explains",
+ title: "Clearly explains the objectives"
+ },
+ {
+ name: "interesting",
+ title: "Makes class interesting"
+ },
+ {
+ "name": "Column 2",
+ "cellType": "boolean"
+ },
+ {
+ name: "effective",
+ title: "Uses class time effectively"
+ },
+ {
+ name: "knowledge",
+ title: "Knows the subject matter"
+ },
+ {
+ name: "recognition",
+ title: "Recognizes and acknowledges effort"
+ },
+ {
+ name: "inform",
+ title: "Keeps me informed of my progress"
+ },
+ {
+ name: "opinion",
+ title: "Encourages and accepts different opinions"
+ },
+ {
+ name: "respect",
+ title: "Has the respect of the student"
+ },
+ {
+ name: "cooperation",
+ title: "Encourages cooperation and participation"
+ },
+ {
+ name: "parents",
+ title: "Communicates with my parents"
+ },
+ {
+ name: "selfthinking",
+ title: "Encourages me to think for myself"
+ },
+ {
+ name: "frusturation",
+ cellType: "comment",
+ title: "Is there anything about this class that frustrates you?",
+ minWidth: "250px"
+ },
+ {
+ name: "likeTheBest",
+ cellType: "comment",
+ title: "What do you like best about this class and/or teacher?",
+ minWidth: "250px"
+ },
+ {
+ name: "improvements",
+ cellType: "comment",
+ title:
+ "What do you wish this teacher would do differently that would improve this class?",
+ minWidth: "250px"
+ }
+ ],
+ rowCount: 2
+ },
+ ]
+ });
const { error, violations } = await axeCheck(t, axeContext, axeOptions);
await t.expect(violations.length === 0).ok(createReport(violations));
});
diff --git a/accessibilityTests/questions.ts b/accessibilityTests/questions.ts
index 3021114ffc..2b51ffdc68 100644
--- a/accessibilityTests/questions.ts
+++ b/accessibilityTests/questions.ts
@@ -1,69 +1,58 @@
-import { frameworks, url, initSurvey, axeTags } from "./helper";
+import { frameworks, url, initSurvey, axeTags, axeContext, axeOptions } from "./helper";
import { fixture, test } from "testcafe";
import { axeCheck, createReport } from "axe-testcafe";
const title = "others";
-const json = {
- "elements": [
- {
- type: "boolean",
- name: "bool",
- title: "Boolean",
- label: "Are you 21 or older?",
- },
- {
- type: "image",
- name: "banner",
- imageHeight: "300px",
- imageWidth: "450px",
- imageLink:
- "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
- },
- {
- type: "file",
- title: "File",
- name: "image",
- storeDataAsText: false,
- showPreview: true,
- imageWidth: 150,
- maxSize: 102400
- },
- ]
-};
-
frameworks.forEach((framework) => {
fixture`${framework} a11y:${title}`.page`${url}${framework}`.beforeEach(
async (t) => {
- await initSurvey(framework, json);
}
);
- test.skip("axe check", async (t) => {
- const axeContext = { include: [[".sv_p_root"]] };
- const axeOptions = {
- runOnly: {
- type: "tag",
- values: axeTags
- },
- rules: {
- //https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
- "color-contrast": {
- enabled: false
- },
- "document-title": {
- enabled: false
+ test("axe check boolean", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "boolean",
+ name: "bool",
+ title: "Boolean",
+ label: "Are you 21 or older?",
},
- "landmark-one-main": {
- enabled: false
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check image", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "image",
+ name: "banner",
+ imageHeight: "300px",
+ imageWidth: "450px",
+ imageLink:
+ "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
},
- "page-has-heading-one": {
- enabled: false
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check file", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "file",
+ title: "File",
+ name: "image",
+ storeDataAsText: false,
+ showPreview: true,
+ imageWidth: 150,
+ maxSize: 102400
},
- "region": {
- enabled: false
- }
- }
- };
+ ]
+ });
const { error, violations } = await axeCheck(t, axeContext, axeOptions);
await t.expect(violations.length === 0).ok(createReport(violations));
});
diff --git a/accessibilityTests/ranks.ts b/accessibilityTests/ranks.ts
index dc1edd67ae..557bb97088 100644
--- a/accessibilityTests/ranks.ts
+++ b/accessibilityTests/ranks.ts
@@ -1,67 +1,48 @@
-import { frameworks, url, initSurvey, axeTags } from "./helper";
+import { frameworks, url, initSurvey, axeTags, axeContext, axeOptions } from "./helper";
import { fixture, test } from "testcafe";
import { axeCheck, createReport } from "axe-testcafe";
const title = "ranks";
-const json = {
- "elements": [
- {
- type: "rating",
- name: "satisfaction",
- title: "Rating",
- minRateDescription: "Not Satisfied",
- maxRateDescription: "Completely satisfied"
- },
- {
- type: "ranking",
- name: "smartphone-features",
- title: "Please rank the following smartphone features in order of importance:",
- choices: [
- "Battery life",
- "Screen size",
- "Storage space",
- "Camera quality",
- "Durability",
- "Processor power",
- "Price",
- ],
- },
- ]
-};
-
frameworks.forEach((framework) => {
fixture`${framework} a11y:${title}`.page`${url}${framework}`.beforeEach(
async (t) => {
- await initSurvey(framework, json);
}
);
- test.skip("axe check", async (t) => {
- const axeContext = { include: [[".sv_p_root"]] };
- const axeOptions = {
- runOnly: {
- type: "tag",
- values: axeTags
- },
- rules: {
- //https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
- "color-contrast": {
- enabled: false
- },
- "document-title": {
- enabled: false
- },
- "landmark-one-main": {
- enabled: false
+ test("axe check rating", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "rating",
+ name: "satisfaction",
+ title: "Rating",
+ minRateDescription: "Not Satisfied",
+ maxRateDescription: "Completely satisfied"
},
- "page-has-heading-one": {
- enabled: false
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check ranking", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "ranking",
+ name: "smartphone-features",
+ title: "Please rank the following smartphone features in order of importance:",
+ choices: [
+ "Battery life",
+ "Screen size",
+ "Storage space",
+ "Camera quality",
+ "Durability",
+ "Processor power",
+ "Price",
+ ],
},
- "region": {
- enabled: false
- }
- }
- };
+ ]
+ });
const { error, violations } = await axeCheck(t, axeContext, axeOptions);
await t.expect(violations.length === 0).ok(createReport(violations));
});
diff --git a/accessibilityTests/selectbase.ts b/accessibilityTests/selectbase.ts
index 6582cdf8bc..641aa38b43 100644
--- a/accessibilityTests/selectbase.ts
+++ b/accessibilityTests/selectbase.ts
@@ -1,174 +1,208 @@
-import { frameworks, url, initSurvey, axeTags } from "./helper";
+import { frameworks, url, initSurvey, axeTags, axeContext } from "./helper";
import { fixture, test } from "testcafe";
import { axeCheck, createReport } from "axe-testcafe";
const title = "selectbase";
-const json = {
- "elements": [
- {
- type: "dropdown",
- name: "cars",
- title: "Dropdown",
- isRequired: true,
- showNoneItem: true,
- colCount: 4,
- choices: [
- "Ford",
- "Vauxhall",
- "Volkswagen",
- "Nissan",
- "Audi",
- "Mercedes-Benz",
- "BMW",
- "Peugeot",
- "Toyota",
- "Citroen"
- ]
+const axeOptions = {
+ runOnly: {
+ type: "tag",
+ values: axeTags
+ },
+ rules: {
+ //https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
+ "color-contrast": {
+ enabled: false
},
- {
- type: "tagbox",
- name: "cars2",
- title: "Tagbox",
- showNoneItem: true,
- choices: [
- "Ford",
- "Vauxhall",
- "Volkswagen",
- "Nissan",
- "Audi",
- "Mercedes-Benz",
- "BMW",
- "Peugeot",
- "Toyota",
- "Citroen"
- ]
+ "document-title": {
+ enabled: false
},
- {
- type: "checkbox",
- name: "cars3",
- title: "Checkbox",
- isRequired: true,
- showSelectAllItem: true,
- showNoneItem: true,
- colCount: 4,
- choices: [
- "Ford",
- "Vauxhall",
- "Volkswagen",
- "Nissan",
- "Audi",
- "Mercedes-Benz",
- "BMW",
- "Peugeot",
- "Toyota",
- "Citroen"
- ]
+ "landmark-one-main": {
+ enabled: false
},
- {
- type: "radiogroup",
- name: "cars4",
- title: "Radiogroup",
- isRequired: true,
- colCount: 4,
- choices: [
- "None",
- "Ford",
- "Vauxhall",
- "Volkswagen",
- "Nissan",
- "Audi",
- "Mercedes-Benz",
- "BMW",
- "Peugeot",
- "Toyota",
- "Citroen"
- ]
+ "page-has-heading-one": {
+ enabled: false
},
- {
- type: "imagepicker",
- name: "choosepicture",
- title: "Imagepicker",
- imageHeight: "150px",
- imageWidth: "225px",
- choices: [
- {
- value: "lion",
- imageLink:
- "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
- },
- {
- value: "giraffe",
- imageLink:
- "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
- },
- {
- value: "panda",
- imageLink:
- "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
- },
- {
- value: "camel",
- imageLink:
- "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
- }
- ]
+ "region": {
+ enabled: false
},
- {
- type: "imagepicker",
- name: "choosevideo",
- title: "Imagepicker",
- imageHeight: "300px",
- imageWidth: "450px",
- "contentMode": "video",
- choices: [
- {
- value: "short_but_high",
- imageLink:
- "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
- },
- {
- value: "long_but_poor",
- imageLink:
- "https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_1mb.mp4"
- }
- ]
+ // Skip one minor case for listbox role in checkbox fieldset
+ "aria-allowed-role": {
+ enabled: false
},
- ]
+ }
};
frameworks.forEach((framework) => {
fixture`${framework} a11y:${title}`.page`${url}${framework}`.beforeEach(
async (t) => {
- await initSurvey(framework, json);
}
);
- test.skip("axe check", async (t) => {
- const axeContext = { include: [[".sv_p_root"]] };
- const axeOptions = {
- runOnly: {
- type: "tag",
- values: axeTags
- },
- rules: {
- //https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
- "color-contrast": {
- enabled: false
+ test("axe check dropdown", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "dropdown",
+ name: "cars",
+ title: "Dropdown",
+ isRequired: true,
+ showNoneItem: true,
+ colCount: 4,
+ choices: [
+ "Ford",
+ "Vauxhall",
+ "Volkswagen",
+ "Nissan",
+ "Audi",
+ "Mercedes-Benz",
+ "BMW",
+ "Peugeot",
+ "Toyota",
+ "Citroen"
+ ]
},
- "document-title": {
- enabled: false
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check tagbox", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "tagbox",
+ name: "cars2",
+ title: "Tagbox",
+ showNoneItem: true,
+ choices: [
+ "Ford",
+ "Vauxhall",
+ "Volkswagen",
+ "Nissan",
+ "Audi",
+ "Mercedes-Benz",
+ "BMW",
+ "Peugeot",
+ "Toyota",
+ "Citroen"
+ ]
+ },
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check checkbox", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "checkbox",
+ name: "cars3",
+ title: "Checkbox",
+ isRequired: true,
+ showSelectAllItem: true,
+ showNoneItem: true,
+ colCount: 4,
+ choices: [
+ "Ford",
+ "Vauxhall",
+ "Volkswagen",
+ "Nissan",
+ "Audi",
+ "Mercedes-Benz",
+ "BMW",
+ "Peugeot",
+ "Toyota",
+ "Citroen"
+ ]
+ },
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check radiogroup", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "radiogroup",
+ name: "cars4",
+ title: "Radiogroup",
+ isRequired: true,
+ colCount: 4,
+ choices: [
+ "None",
+ "Ford",
+ "Vauxhall",
+ "Volkswagen",
+ "Nissan",
+ "Audi",
+ "Mercedes-Benz",
+ "BMW",
+ "Peugeot",
+ "Toyota",
+ "Citroen"
+ ]
},
- "landmark-one-main": {
- enabled: false
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+ test("axe check imagepicker", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ type: "imagepicker",
+ name: "choosepicture",
+ title: "Imagepicker",
+ imageHeight: "150px",
+ imageWidth: "225px",
+ choices: [
+ {
+ value: "lion",
+ imageLink:
+ "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
+ },
+ {
+ value: "giraffe",
+ imageLink:
+ "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
+ },
+ {
+ value: "panda",
+ imageLink:
+ "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
+ },
+ {
+ value: "camel",
+ imageLink:
+ "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
+ }
+ ]
},
- "page-has-heading-one": {
- enabled: false
+ {
+ type: "imagepicker",
+ name: "choosevideo",
+ title: "Imagepicker",
+ imageHeight: "300px",
+ imageWidth: "450px",
+ "contentMode": "video",
+ choices: [
+ {
+ value: "short_but_high",
+ imageLink:
+ "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
+ },
+ {
+ value: "long_but_poor",
+ imageLink:
+ "https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_1mb.mp4"
+ }
+ ]
},
- "region": {
- enabled: false
- }
- }
- };
+ ]
+ });
const { error, violations } = await axeCheck(t, axeContext, axeOptions);
await t.expect(violations.length === 0).ok(createReport(violations));
});
diff --git a/accessibilityTests/textbase.ts b/accessibilityTests/textbase.ts
index 47ca2ac48b..4c456ea546 100644
--- a/accessibilityTests/textbase.ts
+++ b/accessibilityTests/textbase.ts
@@ -1,87 +1,69 @@
-import { frameworks, url, initSurvey, axeTags } from "./helper";
+import { frameworks, url, initSurvey, axeTags, axeContext, axeOptions } from "./helper";
import { fixture, test } from "testcafe";
import { axeCheck, createReport } from "axe-testcafe";
-const title = "textbase";
-
-const json = {
- "elements": [
- {
- name: "name",
- type: "text",
- indent: 1
- },
- {
- "type": "text",
- "name": "question1",
- "title": "Username",
- "isRequired": true,
- "maxLength": 25
- },
- {
- name: "name",
- type: "text",
- title: "Question title",
- titleLocation: "hidden"
- },
- {
- "type": "multipletext",
- "name": "register",
- "title": "Root Title",
- "items": [
- {
- "name": "username",
- "isRequired": true,
- "title": "Title 1",
- "maxLength": 10
- },
- {
- "name": "email",
- "title": "Title 2",
- "inputType": "email"
- },
- {
- type: "comment",
- name: "suggestions",
- title: "Comment"
- },
- ]
- }
- ]
-};
+const title = "text";
frameworks.forEach((framework) => {
fixture`${framework} a11y:${title}`.page`${url}${framework}`.beforeEach(
async (t) => {
- await initSurvey(framework, json);
}
);
- test("axe check", async (t) => {
- const axeContext = { include: [[".sv_p_root"]] };
- const axeOptions = {
- runOnly: {
- type: "tag",
- values: axeTags
- },
- rules: {
- //https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
- "color-contrast": {
- enabled: false
- },
- "document-title": {
- enabled: false
- },
- "landmark-one-main": {
- enabled: false
+ test("axe check text", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ name: "name",
+ type: "text",
+ indent: 1
},
- "page-has-heading-one": {
- enabled: false
+ {
+ "type": "text",
+ "name": "question1",
+ "title": "Username",
+ "isRequired": true,
+ "maxLength": 25
},
- "region": {
- enabled: false
+ {
+ name: "name",
+ type: "text",
+ title: "Question title",
+ titleLocation: "hidden"
+ }
+ ]
+ });
+ const { error, violations } = await axeCheck(t, axeContext, axeOptions);
+ await t.expect(violations.length === 0).ok(createReport(violations));
+ });
+
+ test("axe check multipletext", async (t) => {
+ await initSurvey(framework, {
+ "elements": [
+ {
+ "type": "multipletext",
+ "name": "register",
+ "title": "Root Title",
+ "items": [
+ {
+ "name": "username",
+ "isRequired": true,
+ "title": "Title 1",
+ "maxLength": 10
+ },
+ {
+ "name": "email",
+ "title": "Title 2",
+ "inputType": "email"
+ },
+ {
+ type: "comment",
+ name: "suggestions",
+ title: "Comment"
+ },
+ ]
}
- }
- };
+ ]
+ });
const { error, violations } = await axeCheck(t, axeContext, axeOptions);
await t.expect(violations.length === 0).ok(createReport(violations));
});
diff --git a/package.json b/package.json
index 18dbd3d8a3..840393e67f 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
"@typescript-eslint/parser": "^4.29.0",
"ace-builds": "1.2.2",
"ajv": "6.12.3",
- "axe-core": "^3.5.6",
+ "axe-core": "^4.8.2",
"axe-testcafe": "^3.0.0",
"babel-loader": "8.2.5",
"colors": "1.4.0",
@@ -192,6 +192,9 @@
},
"downlevel-dts": {
"typescript": "5.1.6"
+ },
+ "axe-testcafe": {
+ "axe-core": "^4.8.2"
}
},
"husky": {
diff --git a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html
index 1b19e677eb..3b0d91ed3e 100644
--- a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html
+++ b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html
@@ -26,6 +26,8 @@
[attr.tabindex]="dropdownModel.inputReadOnly ? null : -1"
[attr.disabled]="model.isInputReadOnly ? true : null"
[attr.aria-controls]="dropdownModel.listElementId"
+ [attr.aria-label]="model.a11y_input_ariaLabel"
+ [attr.aria-labelledby]="model.a11y_input_ariaLabelledBy"
[attr.aria-expanded]="model.ariaExpanded"
[attr.aria-activedescendant]="dropdownModel.ariaActivedescendant"
[attr.placeholder]="dropdownModel.placeholderRendered" [attr.readonly]="!dropdownModel.searchEnabled ? true : null"
diff --git a/packages/survey-angular-ui/src/components/file/choose-file.component.html b/packages/survey-angular-ui/src/components/file/choose-file.component.html
index 52f5229935..2e61f68897 100644
--- a/packages/survey-angular-ui/src/components/file/choose-file.component.html
+++ b/packages/survey-angular-ui/src/components/file/choose-file.component.html
@@ -1,8 +1,8 @@
-
+
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/components/tagbox/tagbox-filter.component.html b/packages/survey-angular-ui/src/components/tagbox/tagbox-filter.component.html
index bbee07ced6..fbe294a651 100644
--- a/packages/survey-angular-ui/src/components/tagbox/tagbox-filter.component.html
+++ b/packages/survey-angular-ui/src/components/tagbox/tagbox-filter.component.html
@@ -19,6 +19,8 @@
[attr.readonly]="!model.searchEnabled ? true : null"
[attr.disabled]="question.isInputReadOnly ? true : null"
[attr.size]="!model.inputStringRendered ? 1 : null"
+ [attr.aria-label]="question.a11y_input_ariaLabel"
+ [attr.aria-labelledby]="question.a11y_input_ariaLabelledBy"
[attr.aria-controls]="model.listElementId"
[attr.aria-expanded]="question.ariaExpanded"
[attr.aria-activedescendant]="model.ariaActivedescendant"
diff --git a/packages/survey-angular-ui/src/questions/checkbox-item.component.html b/packages/survey-angular-ui/src/questions/checkbox-item.component.html
index a467c129f2..ccd4074e05 100644
--- a/packages/survey-angular-ui/src/questions/checkbox-item.component.html
+++ b/packages/survey-angular-ui/src/questions/checkbox-item.component.html
@@ -1,5 +1,5 @@
-
-
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/questions/imagepicker.component.html b/packages/survey-angular-ui/src/questions/imagepicker.component.html
index 0613f5340d..472996e47b 100644
--- a/packages/survey-angular-ui/src/questions/imagepicker.component.html
+++ b/packages/survey-angular-ui/src/questions/imagepicker.component.html
@@ -1,5 +1,5 @@