work for the #6058

packages/survey-angular-ui/src/questions/comment.component.html

@@ -12,10 +12,11 @@
 (input)="model.onInput($event)"
 (keydown)="model.onKeyDown($event)"
 (change)="onChange($event)"
-[attr.aria-required]="model.ariaRequired"
-[attr.aria-label]="model.ariaLabel"
-[attr.aria-invalid]="model.ariaInvalid"
-[attr.aria-describedby]="model.ariaDescribedBy"
+[attr.aria-required]="model.a11y_input_ariaRequired"
+[attr.aria-label]="model.a11y_input_ariaLabel"
+[attr.aria-labelledby]="model.a11y_input_ariaLabelledBy"
+[attr.aria-invalid]="model.a11y_input_ariaInvalid"
+[attr.aria-describedby]="model.a11y_input_ariaDescribedBy"
 [style.resize]="model.resizeStyle"
 #contentElement></textarea>
 <sv-ng-character-counter *ngIf="!model.isReadOnlyRenderDiv() && model.getMaxLength()" 

src/knockout/templates/question-comment.html

@@ -1,6 +1,6 @@
 <script type="text/html" id="survey-question-comment">
 <!--ko if: !question.isReadOnlyRenderDiv() -->
-<textarea data-bind="attr: {'readonly': question.renderedInputReadOnly, 'disabled': question.renderedInputDisabled, maxLength: question.getMaxLength(), cols: question.cols, rows: question.rows, id: question.inputId, placeholder: question.renderedPlaceholder, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy}, 
+<textarea data-bind="attr: {'readonly': question.renderedInputReadOnly, 'disabled': question.renderedInputDisabled, maxLength: question.getMaxLength(), cols: question.cols, rows: question.rows, id: question.inputId, placeholder: question.renderedPlaceholder, 'aria-required': question.a11y_input_ariaRequired, 'aria-label': question.a11y_input_ariaLabel, 'aria-labelledby': question.a11y_input_ariaLabelledBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-describedby': question.a11y_input_ariaDescribedBy}, 
   event: { input: function(s, e) { question.onInput(e); }, keydown: function(s, e) { question.onKeyDown(e); return true; } }, 
   value: question.value, 
   style: { resize: question.resizeStyle },

src/question_multipletext.ts

@@ -31,22 +31,31 @@ export interface IMultipleTextData extends ILocalizableOwner, IPanel {
   getIsRequiredText(): string;
 }
 
+class MultipleTextEditorModel extends QuestionTextModel {
+  public get a11y_input_ariaLabel(): string {
+    return this.locTitle.renderedHtml;
+  }
+  public get a11y_input_ariaLabelledBy(): string {
+    return null;
+  }
+}
+
 /**
  * A class that describes an item in a [Multiple Text](https://surveyjs.io/form-library/documentation/api-reference/multiple-text-entry-question-model) question.
  *
  * [View Demo](/form-library/examples/multiple-text-box-question/)
  */
 export class MultipleTextItemModel extends Base
   implements IValidatorOwner, ISurveyData, ISurveyImpl {
-  private editorValue: QuestionTextModel;
+  private editorValue: MultipleTextEditorModel;
   private data: IMultipleTextData;
 
   valueChangedCallback: (newValue: any) => void;
 
   constructor(name: any = null, title: string = null) {
     super();
     this.editorValue = this.createEditor(name);
-    this.editor.questionTitleTemplateCallback = function() {
+    this.editor.questionTitleTemplateCallback = function () {
       return "";
     };
     this.editor.titleLocation = "left";
@@ -75,11 +84,11 @@ export class MultipleTextItemModel extends Base
   public get question(): Question {
     return <Question>(<any>this.data);
   }
-  public get editor(): QuestionTextModel {
+  public get editor(): MultipleTextEditorModel {
     return this.editorValue;
   }
-  protected createEditor(name: string): QuestionTextModel {
-    return new QuestionTextModel(name);
+  protected createEditor(name: string): MultipleTextEditorModel {
+    return new MultipleTextEditorModel(name);
   }
   public addUsedLocales(locales: Array<string>) {
     super.addUsedLocales(locales);
@@ -247,11 +256,11 @@ export class MultipleTextItemModel extends Base
   getVariable(name: string): any {
     return undefined;
   }
-  setVariable(name: string, newValue: any) {}
+  setVariable(name: string, newValue: any) { }
   getComment(name: string): string {
     return null;
   }
-  setComment(name: string, newValue: string) {}
+  setComment(name: string, newValue: string) { }
   getAllValues(): any {
     if (this.data) return this.data.getAllValues();
     return this.value;
@@ -264,7 +273,7 @@ export class MultipleTextItemModel extends Base
   }
   findQuestionByName(name: string): IQuestion {
     const survey = this.getSurvey();
-    return !!survey ? survey.getQuestionByName(name): null;
+    return !!survey ? survey.getQuestionByName(name) : null;
   }
   //IValidatorOwner
   getValidatorTitle(): string {
@@ -301,7 +310,7 @@ export class QuestionMultipleTextModel extends Question
     super(name);
     this.createNewArray("items", (item: any) => {
       item.setData(this);
-      if(this.survey) {
+      if (this.survey) {
         this.survey.multipleTextItemAdded(this, item);
       }
     });
@@ -612,7 +621,7 @@ export class QuestionMultipleTextModel extends Question
     return this.survey ? this.survey.requiredText : "";
   }
   //IPanel
-  addElement(element: IElement, index: number) {}
+  addElement(element: IElement, index: number) { }
   removeElement(element: IElement): boolean {
     return false;
   }
@@ -625,7 +634,7 @@ export class QuestionMultipleTextModel extends Question
   getChildrenLayoutType(): string {
     return "row";
   }
-  elementWidthChanged(el: IElement) {}
+  elementWidthChanged(el: IElement) { }
   get elements(): Array<IElement> {
     return [];
   }
@@ -673,7 +682,7 @@ Serializer.addClass(
       classNamePart: "validator",
     },
   ],
-  function() {
+  function () {
     return new MultipleTextItemModel("");
   }
 );
@@ -685,7 +694,7 @@ Serializer.addClass(
     { name: "itemSize:number", minValue: 0 },
     { name: "colCount:number", default: 1, choices: [1, 2, 3, 4, 5] },
   ],
-  function() {
+  function () {
     return new QuestionMultipleTextModel("");
   },
   "question"

src/react/reactquestion_comment.tsx

@@ -9,7 +9,7 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
     super(props);
   }
   protected renderElement(): JSX.Element {
-    var onBlur:((e: any) => void) | undefined = !this.question.isInputTextUpdate ? this.updateValueOnEvent : undefined;
+    var onBlur: ((e: any) => void) | undefined = !this.question.isInputTextUpdate ? this.updateValueOnEvent : undefined;
     var onInput = (event: any) => {
       if (this.question.isInputTextUpdate) {
         this.updateValueOnEvent(event);
@@ -30,8 +30,8 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
         <textarea
           id={this.question.inputId}
           className={this.question.className}
-          disabled={ this.question.isInputReadOnly }
-          readOnly={ this.question.isInputReadOnly }
+          disabled={this.question.isInputReadOnly}
+          readOnly={this.question.isInputReadOnly}
           ref={(textarea) => (this.setControl(textarea))}
           maxLength={this.question.getMaxLength()}
           placeholder={placeholder}
@@ -40,10 +40,11 @@ export class SurveyQuestionComment extends SurveyQuestionUncontrolledElement<Que
           onKeyDown={(event) => { this.question.onKeyDown(event); }}
           cols={this.question.cols}
           rows={this.question.rows}
-          aria-required={this.question.ariaRequired}
-          aria-label={this.question.ariaLabel}
-          aria-invalid={this.question.ariaInvalid}
-          aria-describedby={this.question.ariaDescribedBy}
+          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}
           style={{ resize: this.question.resizeStyle }}
         />
         {counter}
@@ -80,7 +81,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
     };
     const questionComment = this.getComment();
     let stateComment: string = !!this.state ? this.state.comment : undefined;
-    if(stateComment !== undefined && stateComment.trim() !== questionComment) {
+    if (stateComment !== undefined && stateComment.trim() !== questionComment) {
       stateComment = questionComment;
     }
     let comment = stateComment !== undefined ? stateComment : questionComment || "";
@@ -97,7 +98,7 @@ export class SurveyQuestionCommentItem extends ReactSurveyElement {
         maxLength={question.getOthersMaxLength()}
         placeholder={this.getPlaceholder()}
         onChange={handleOnChange}
-        onBlur={(e) => { this.onCommentChange(e); handleOnChange(e); } }
+        onBlur={(e) => { this.onCommentChange(e); handleOnChange(e); }}
         onInput={(e) => this.onCommentInput(e)}
         aria-required={question.isRequired}
         aria-label={question.locTitle.renderedHtml}

src/vue/comment.vue

@@ -13,10 +13,11 @@
       @change="change"
       @input="(e) => { question.onInput(e) }"
       @keydown="(e) => { question.onKeyDown(e) }"
-      :aria-required="question.ariaRequired"
-      :aria-label="question.ariaLabel"
-      :aria-invalid="question.ariaInvalid"
-      :aria-describedby="question.ariaDescribedBy"
+      :aria-required="question.a11y_input_ariaRequired"
+      :aria-label="question.a11y_input_ariaLabel"
+      :aria-labelledby="question.a11y_input_ariaLabelledBy"
+      :aria-invalid="question.a11y_input_ariaInvalid"
+      :aria-describedby="question.a11y_input_ariaDescribedBy"
       v-bind:style="{ resize: question.resizeStyle }"
     ></textarea>
     <div v-else-if="!question.isReadOnlyRenderDiv() && question.getMaxLength()">
@@ -33,10 +34,11 @@
         @change="change"
         @input="(e) => { question.onInput(e) }"
         @keydown="(e) => { question.onKeyDown(e) }"
-        :aria-required="question.ariaRequired"
-        :aria-label="question.ariaLabel"
-        :aria-invalid="question.ariaInvalid"
-        :aria-describedby="question.ariaDescribedBy"
+        :aria-required="question.a11y_input_ariaRequired"
+        :aria-label="question.a11y_input_ariaLabel"
+        :aria-labelledby="question.a11y_input_ariaLabelledBy"
+        :aria-invalid="question.a11y_input_ariaInvalid"
+        :aria-describedby="question.a11y_input_ariaDescribedBy"
         v-bind:style="{ resize: question.resizeStyle }"
       ></textarea>
       <sv-character-counter :counter="question.characterCounter" :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter"></sv-character-counter>