diff --git a/src/dropdownListModel.ts b/src/dropdownListModel.ts index cda215a4d5..a09084504b 100644 --- a/src/dropdownListModel.ts +++ b/src/dropdownListModel.ts @@ -129,6 +129,7 @@ export class DropdownListModel extends Base { this.resetItemsSettings(); } } + this.question.ariaExpanded = option.isVisible ? "true" : "false"; this.question.processPopupVisiblilityChanged(this.popupModel, option.isVisible); }); } @@ -374,6 +375,7 @@ export class DropdownListModel extends Base { constructor(protected question: Question, protected onSelectionChanged?: (item: IAction, ...params: any[]) => void) { super(); this.htmlCleanerElement = DomDocumentHelper.createElement("div") as HTMLDivElement; + this.question.ariaExpanded = "false"; question.onPropertyChanged.add(this.questionPropertyChangedHandler); this.showInputFieldComponent = this.question.showInputFieldComponent; diff --git a/src/question.ts b/src/question.ts index 732e002e1e..a76f936648 100644 --- a/src/question.ts +++ b/src/question.ts @@ -125,6 +125,7 @@ export class Question extends SurveyElement public themeChanged(theme: ITheme): void { } @property({ defaultValue: false }) isMobile: boolean; @property() forceIsInputReadOnly: boolean; + @property() ariaExpanded: "true" | "false"; constructor(name: string) { super(name); @@ -2680,9 +2681,7 @@ export class Question extends SurveyElement return null; } } - public get ariaExpanded(): string { - return null; - } + public get ariaErrormessage(): string { if (this.isNewA11yStructure) return null; diff --git a/src/question_dropdown.ts b/src/question_dropdown.ts index 1698eb8f7a..4e2b212cb3 100644 --- a/src/question_dropdown.ts +++ b/src/question_dropdown.ts @@ -288,10 +288,6 @@ export class QuestionDropdownModel extends QuestionSelectBase { public get popupModel(): PopupModel { return this.dropdownListModel?.popupModel; } - public get ariaExpanded(): string { - const popupModel = this.popupModel; - return !!popupModel && popupModel.isVisible ? "true" : "false"; - } public onOpened: EventBase = this.addEvent(); public onOpenedCallBack(): void { diff --git a/src/question_rating.ts b/src/question_rating.ts index 6b04752ab5..7fb934f74b 100644 --- a/src/question_rating.ts +++ b/src/question_rating.ts @@ -867,11 +867,7 @@ export class QuestionRatingModel extends Question { protected getDesktopRenderAs(): string { return (this.displayMode == "dropdown") ? "dropdown" : "default"; } - public get ariaExpanded(): string { - const popupModel = this.dropdownListModel?.popupModel; - if (!popupModel) return null; - return popupModel.isVisible ? "true" : "false"; - } + private dropdownListModelValue: DropdownListModel; public set dropdownListModel(val: DropdownListModel) { this.dropdownListModelValue = val; diff --git a/src/question_tagbox.ts b/src/question_tagbox.ts index 300a8e5d8c..49f7a6965b 100644 --- a/src/question_tagbox.ts +++ b/src/question_tagbox.ts @@ -156,10 +156,6 @@ export class QuestionTagboxModel extends QuestionCheckboxModel { public get popupModel(): PopupModel { return this.dropdownListModel?.popupModel; } - public get ariaExpanded(): string { - const popupModel = this.popupModel; - return !!popupModel && popupModel.isVisible ? "true" : "false"; - } public getControlClass(): string { return new CssClassBuilder() diff --git a/tests/markup/etalon_dropdown.ts b/tests/markup/etalon_dropdown.ts index 10750673ef..c66f9bd7ee 100644 --- a/tests/markup/etalon_dropdown.ts +++ b/tests/markup/etalon_dropdown.ts @@ -328,8 +328,14 @@ registerMarkupTests( }, initSurvey: (survey) => { survey.focusFirstQuestionAutomatic = false; - survey.getQuestionByName("name")["popupModel"]; - survey.getQuestionByName("name")["dropdownListModel"].inputStringRendered = "o"; + survey.onAfterRenderQuestion.add((target, options) => { + options.question["popupModel"]; + options.question["dropdownListModel"].inputStringRendered = "o"; + }); + }, + event: "onAfterRenderSurvey", + getElement: el => { + return el?.querySelector(".sv_q.sv_qstn > div") as HTMLElement; }, timeout: 300, removeIds: true, @@ -355,8 +361,14 @@ registerMarkupTests( }, initSurvey: (survey) => { survey.focusFirstQuestionAutomatic = false; - survey.getQuestionByName("name")["popupModel"]; - survey.getQuestionByName("name")["dropdownListModel"].inputStringRendered = "o"; + survey.onAfterRenderQuestion.add((target, options) => { + options.question["popupModel"]; + options.question["dropdownListModel"].inputStringRendered = "o"; + }); + }, + event: "onAfterRenderSurvey", + getElement: el => { + return el?.querySelector(".sv_q.sv_qstn > div") as HTMLElement; }, timeout: 300, removeIds: true,