PR: A11Y: Single-Selection Matrix (#7318)

* work for the surveyjs/service#1586 * work for the surveyjs/service#1586 * work for the surveyjs/service#1586 * work for the surveyjs/service#1586 * work for the #7273 (fixed vue3)
surveyjs · Nov 10, 2023 · da6886f · da6886f
1 parent e9579cb
commit da6886f
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 21 deletions.
diff --git a/packages/survey-angular-ui/src/questions/matrix.component.html b/packages/survey-angular-ui/src/questions/matrix.component.html
@@ -43,7 +43,7 @@
                     [attr.id]="model.inputId + '_' + row.name + '_' + columnIndex"
                     (change)="onChange(row, column)"
                     [attr.aria-required]="model.ariaRequired"
-                    [attr.aria-label]="column.locText.renderedHtml"
+                    [attr.aria-label]="model.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)"
                     [attr.aria-invalid]="model.ariaInvalid"
                     [attr.aria-describedby]="model.ariaDescribedBy"
                   />

diff --git a/packages/survey-vue3-ui/src/Matrix.vue b/packages/survey-vue3-ui/src/Matrix.vue
@@ -68,7 +68,7 @@
                     :disabled="question.isInputReadOnly"
                     :id="question.inputId + '_' + row.name + '_' + columnIndex"
                     :aria-required="question.ariaRequired"
-                    :aria-label="column.locText.renderedHtml"
+                    :aria-label="question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)"
                     :aria-invalid="question.ariaInvalid"
                     :aria-describedby="question.ariaDescribedBy"
                   />

diff --git a/src/knockout/templates/question-matrix.html b/src/knockout/templates/question-matrix.html
@@ -48,7 +48,7 @@
               <label data-bind="css: question.getItemClass(row, $data), event: { mousedown: question.koMouseDown }" >
                 <input
                   type="radio"
-                  data-bind="css: question.cssClasses.itemValue, attr: { name: row.fullName, 'aria-required': question.ariaRequired, 'aria-label': $data.locText.renderedHtml, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy, id: question.inputId + '_' + row.name + '_' + $index() }, checkedValue: $data.value, checked: row.value, enable: !question.isInputReadOnly"
+                  data-bind="css: question.cssClasses.itemValue, attr: { name: row.fullName, 'aria-required': question.ariaRequired, 'aria-label': question.getCellAriaLabel($parent.locText.renderedHtml, $data.locText.renderedHtml), 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy, id: question.inputId + '_' + row.name + '_' + $index() }, checkedValue: $data.value, checked: row.value, enable: !question.isInputReadOnly"
                 />
                 <span data-bind="css: question.cssClasses.materialDecorator">
                     <!-- ko if: question.itemSvgIcon -->

diff --git a/src/martixBase.ts b/src/martixBase.ts
@@ -342,6 +342,10 @@ export class QuestionMatrixBaseModel<TRow, TColumn> extends Question {
   public set rowTitleWidth(val: string) {
     this.setPropertyValue("rowTitleWidth", val);
   }
+
+  public getCellAriaLabel(rowTitle:string, columnTitle:string):string {
+    return `row ${rowTitle}, column ${columnTitle}`;
+  }
 }
 
 Serializer.addClass(

diff --git a/src/react/reactquestion_matrix.tsx b/src/react/reactquestion_matrix.tsx
@@ -193,7 +193,7 @@ export class SurveyQuestionMatrixRow extends ReactSurveyElement {
                 checked={isChecked}
                 onChange={this.handleOnChange}
                 aria-required={this.question.ariaRequired}
-                aria-label={column.locText.renderedHtml}
+                aria-label={this.question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)}
                 aria-invalid={this.question.ariaInvalid}
                 aria-describedby={this.question.ariaDescribedBy}
               />

diff --git a/src/vue/matrix.vue b/src/vue/matrix.vue
@@ -55,7 +55,7 @@
                   :disabled="question.isInputReadOnly"
                   :id="question.inputId + '_' + row.name + '_' + columnIndex"
                   :aria-required="question.ariaRequired"
-                  :aria-label="column.locText.renderedHtml"
+                  :aria-label="question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)"
                   :aria-invalid="question.ariaInvalid"
                   :aria-describedby="question.ariaDescribedBy"
                 />

diff --git a/tests/markup/snapshots/matrix-mobile-v2.snap.html b/tests/markup/snapshots/matrix-mobile-v2.snap.html
@@ -21,7 +21,7 @@
 					</td>
 					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
 						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
 							<span class="sd-item__decorator sd-radio__decorator">
 							</span>
 							<span class="sd-matrix__responsive-title">
@@ -31,7 +31,7 @@
 					</td>
 					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
 						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
 							<span class="sd-item__decorator sd-radio__decorator">
 							</span>
 							<span class="sd-matrix__responsive-title">
@@ -46,7 +46,7 @@
 					</td>
 					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
 						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
 							<span class="sd-item__decorator sd-radio__decorator">
 							</span>
 							<span class="sd-matrix__responsive-title">
@@ -56,7 +56,7 @@
 					</td>
 					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
 						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
 							<span class="sd-item__decorator sd-radio__decorator">
 							</span>
 							<span class="sd-matrix__responsive-title">

diff --git a/tests/markup/snapshots/matrix-modern.snap.html b/tests/markup/snapshots/matrix-modern.snap.html
@@ -21,7 +21,7 @@
 					</td>
 					<td class="sv-matrix__cell sv-table__cell" data-responsive-title="col_1">
 						<label class="sv-item sv-matrix__label sv-radio sv-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_1" aria-required="false" class="sv-item__control sv-radio__control sv-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sv-item__control sv-radio__control sv-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
 							<span class="sv-item__decorator sv-radio__decorator">
 								<svg class="sv-item__svg sv-radio__svg">
 									<use xlink:href="#icon-modernradio" class="">
@@ -35,7 +35,7 @@
 					</td>
 					<td class="sv-matrix__cell sv-table__cell" data-responsive-title="col_2">
 						<label class="sv-item sv-matrix__label sv-radio sv-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_2" aria-required="false" class="sv-item__control sv-radio__control sv-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sv-item__control sv-radio__control sv-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
 							<span class="sv-item__decorator sv-radio__decorator">
 								<svg class="sv-item__svg sv-radio__svg">
 									<use xlink:href="#icon-modernradio" class="">
@@ -54,7 +54,7 @@
 					</td>
 					<td class="sv-matrix__cell sv-table__cell" data-responsive-title="col_1">
 						<label class="sv-item sv-matrix__label sv-radio sv-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_1" aria-required="false" class="sv-item__control sv-radio__control sv-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sv-item__control sv-radio__control sv-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
 							<span class="sv-item__decorator sv-radio__decorator">
 								<svg class="sv-item__svg sv-radio__svg">
 									<use xlink:href="#icon-modernradio" class="">
@@ -68,7 +68,7 @@
 					</td>
 					<td class="sv-matrix__cell sv-table__cell" data-responsive-title="col_2">
 						<label class="sv-item sv-matrix__label sv-radio sv-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_2" aria-required="false" class="sv-item__control sv-radio__control sv-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sv-item__control sv-radio__control sv-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
 							<span class="sv-item__decorator sv-radio__decorator">
 								<svg class="sv-item__svg sv-radio__svg">
 									<use xlink:href="#icon-modernradio" class="">

diff --git a/tests/markup/snapshots/matrix-v2.snap.html b/tests/markup/snapshots/matrix-v2.snap.html
@@ -21,7 +21,7 @@
 					</td>
 					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
 						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
 							<span class="sd-item__decorator sd-radio__decorator">
 							</span>
 							<span class="sd-matrix__responsive-title" style="display:none;">
@@ -31,7 +31,7 @@
 					</td>
 					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
 						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
 							<span class="sd-item__decorator sd-radio__decorator">
 							</span>
 							<span class="sd-matrix__responsive-title" style="display:none;">
@@ -46,7 +46,7 @@
 					</td>
 					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
 						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
 							<span class="sd-item__decorator sd-radio__decorator">
 							</span>
 							<span class="sd-matrix__responsive-title" style="display:none;">
@@ -56,7 +56,7 @@
 					</td>
 					<td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
 						<label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
-							<input aria-invalid="false" aria-label="col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
 							<span class="sd-item__decorator sd-radio__decorator">
 							</span>
 							<span class="sd-matrix__responsive-title" style="display:none;">

diff --git a/tests/markup/snapshots/matrix-widths.snap.html b/tests/markup/snapshots/matrix-widths.snap.html
@@ -21,7 +21,7 @@
 					</td>
 					<td class="sv_q_m_cell" data-responsive-title="col_1">
 						<label class="sv_q_m_label">
-							<input aria-invalid="false" aria-label="col_1" aria-required="false" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+							<input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
 							<span>
 							</span>
 							<span class="sv-hidden" style="display:none;">
@@ -31,7 +31,7 @@
 					</td>
 					<td class="sv_q_m_cell" data-responsive-title="col_2">
 						<label class="sv_q_m_label">
-							<input aria-invalid="false" aria-label="col_2" aria-required="false" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+							<input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
 							<span>
 							</span>
 							<span class="sv-hidden" style="display:none;">
@@ -46,7 +46,7 @@
 					</td>
 					<td class="sv_q_m_cell" data-responsive-title="col_1">
 						<label class="sv_q_m_label">
-							<input aria-invalid="false" aria-label="col_1" aria-required="false" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+							<input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
 							<span>
 							</span>
 							<span class="sv-hidden" style="display:none;">
@@ -56,7 +56,7 @@
 					</td>
 					<td class="sv_q_m_cell" data-responsive-title="col_2">
 						<label class="sv_q_m_label">
-							<input aria-invalid="false" aria-label="col_2" aria-required="false" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+							<input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
 							<span>
 							</span>
 							<span class="sv-hidden" style="display:none;">

diff --git a/tests/question_matrix_base_tests.ts b/tests/question_matrix_base_tests.ts
@@ -3,3 +3,11 @@ import { MatrixRowModel } from "../src/question_matrix";
 import { SurveyModel } from "../src/survey";
 
 export default QUnit.module("Survey_MatrixBase");
+
+QUnit.test("check getCellAriaLabel method", (assert) => {
+  const matrixBase = new QuestionMatrixBaseModel("q1");
+  const rowTitle = "RowTitle";
+  const columnTitle = "ColumnTitle";
+
+  assert.equal(matrixBase.getCellAriaLabel(rowTitle, columnTitle), "row RowTitle, column ColumnTitle");
+});