From ca1f63cff327680705d0ef45803fccf04a244af2 Mon Sep 17 00:00:00 2001 From: dmitrykurmanov Date: Thu, 7 Sep 2023 15:58:47 +0400 Subject: [PATCH 1/9] work for the https://github.com/surveyjs/survey-library/issues/6859 --- src/question_checkbox.ts | 55 ++++++++++++++++++++++-- src/question_radiogroup.ts | 58 +++++++++++++++++++++++--- src/react/reactquestion_checkbox.tsx | 8 ++-- src/react/reactquestion_radiogroup.tsx | 6 ++- 4 files changed, 114 insertions(+), 13 deletions(-) diff --git a/src/question_checkbox.ts b/src/question_checkbox.ts index 7a5aabba11..e2953f60ce 100644 --- a/src/question_checkbox.ts +++ b/src/question_checkbox.ts @@ -39,9 +39,6 @@ export class QuestionCheckboxModel extends QuestionCheckboxBase { protected getDefaultItemComponent(): string { return "survey-checkbox-item"; } - public get ariaRole(): string { - return "listbox"; - } public getType(): string { return "checkbox"; } @@ -580,6 +577,58 @@ export class QuestionCheckboxModel extends QuestionCheckboxBase { public get checkBoxSvgPath(): string { return "M5,13l2-2l3,3l7-7l2,2l-9,9L5,13z"; } + + //a11y + public get titleAriaLabel(): string | null { + return null; + } + + public get ariaRole(): string { + return null; + } + public get ariaRequired():any { + return null; + } + public get ariaInvalid():any { + return null; + } + public get ariaLabel(): string { + return null; + } + public get ariaLabelledBy(): string { + return null; + } + public get ariaDescribedBy(): string { + return null; + } + + public get a11y_input_ariaRole(): string { + return "listbox"; + } + public get a11y_input_ariaRequired(): "true" | "false" { + return this.isRequired ? "true" : "false"; + } + public get a11y_input_ariaInvalid(): "true" | "false" { + return this.errors.length > 0 ? "true" : "false"; + } + public get a11y_input_ariaLabel(): string { + if (this.hasTitle) { + return null; + } else { + return this.locTitle.renderedHtml; + } + } + public get a11y_input_ariaLabelledBy(): string { + if (this.hasTitle) { + return this.ariaTitleId; + } else { + return null; + } + } + public get a11y_input_ariaDescribedBy(): string { + return this.errors.length > 0 ? this.id + "_errors" : null; + } + // EO a11y } Serializer.addClass( "checkbox", diff --git a/src/question_radiogroup.ts b/src/question_radiogroup.ts index 50d0eb72f0..a15c097c6e 100644 --- a/src/question_radiogroup.ts +++ b/src/question_radiogroup.ts @@ -22,12 +22,6 @@ export class QuestionRadiogroupModel extends QuestionCheckboxBase { return "radiogroup"; } - public get ariaRole(): string { - return "radiogroup"; - } - public get titleAriaLabel(): string | null { - return null; - } protected getFirstInputElementId(): string { return this.inputId + "_0"; } @@ -83,6 +77,58 @@ export class QuestionRadiogroupModel extends QuestionCheckboxBase { } return actions; } + + //a11y + public get titleAriaLabel(): string | null { + return null; + } + + public get ariaRole(): string { + return null; + } + public get ariaRequired():any { + return null; + } + public get ariaInvalid():any { + return null; + } + public get ariaLabel(): string { + return null; + } + public get ariaLabelledBy(): string { + return null; + } + public get ariaDescribedBy(): string { + return null; + } + + public get a11y_input_ariaRole(): string { + return "radiogroup"; + } + public get a11y_input_ariaRequired(): "true" | "false" { + return this.isRequired ? "true" : "false"; + } + public get a11y_input_ariaInvalid(): "true" | "false" { + return this.errors.length > 0 ? "true" : "false"; + } + public get a11y_input_ariaLabel(): string { + if (this.hasTitle) { + return null; + } else { + return this.locTitle.renderedHtml; + } + } + public get a11y_input_ariaLabelledBy(): string { + if (this.hasTitle) { + return this.ariaTitleId; + } else { + return null; + } + } + public get a11y_input_ariaDescribedBy(): string { + return this.errors.length > 0 ? this.id + "_errors" : null; + } + // EO a11y } Serializer.addClass( diff --git a/src/react/reactquestion_checkbox.tsx b/src/react/reactquestion_checkbox.tsx index 43be1745b8..cf11904308 100644 --- a/src/react/reactquestion_checkbox.tsx +++ b/src/react/reactquestion_checkbox.tsx @@ -20,9 +20,13 @@ export class SurveyQuestionCheckbox extends SurveyQuestionElementBase { var cssClasses = this.question.cssClasses; return (
(this.setControl(fieldset))} + aria-required={this.question.a11y_input_ariaRequired} + aria-label={this.question.a11y_input_ariaLabel} + aria-labelledby={this.question.a11y_input_ariaLabelledBy} + aria-invalid={this.question.a11y_input_ariaInvalid} + aria-describedby={this.question.a11y_input_ariaDescribedBy} > {this.getHeader()} @@ -214,7 +218,6 @@ export class SurveyQuestionCheckboxItem extends ReactSurveyElement {