Skip to content

Commit

Permalink
Add Localizations Props for Matrix Base getCellAriaLabel method fix #… (
Browse files Browse the repository at this point in the history 
#7364)

* Add Localizations Props for Matrix Base getCellAriaLabel method fix #7352

* FIx markup tests #7352
  • Loading branch information
@andrewtelnov
andrewtelnov authored Nov 17, 2023
1 parent 59e388c commit 609c19e
Show file tree
Hide file tree
Showing 8 changed files with 69 additions and 35 deletions.
4 changes: 3 additions & 1 deletion src/martixBase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,9 @@ export class QuestionMatrixBaseModel<TRow, TColumn> extends Question {

//a11y
public getCellAriaLabel(rowTitle:string, columnTitle:string):string {
return `row ${rowTitle}, column ${columnTitle}`;
const row = (this.getLocalizationString("matrix_row") || "row").toLocaleLowerCase();
const column = (this.getLocalizationString("matrix_column") || "column").toLocaleLowerCase();
return `${row} ${rowTitle}, ${column} ${columnTitle}`;
}

public get isNewA11yStructure(): boolean {
Expand Down
5 changes: 4 additions & 1 deletion src/question_matrixdropdownbase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export class MatrixDropdownCell {
private updateCellQuestionTitleDueToAccessebility(row: MatrixDropdownRowModelBase): void {
this.questionValue.locTitle.onGetTextCallback = (str: string): string => {
if(!row || !row.getSurvey()) return this.questionValue.title;
const rowTitle = row.locText && row.locText.renderedHtml;
const rowTitle = row.getAccessbilityText();
if(!rowTitle) return this.questionValue.title;
return this.column.colOwner.getCellAriaLabel(rowTitle, this.questionValue.title);
};
Expand Down Expand Up @@ -286,6 +286,9 @@ implements ISurveyData, ISurveyImpl, ILocalizableOwner {
public get locText(): LocalizableString {
return null;
}
public getAccessbilityText(): string {
return this.locText && this.locText.renderedHtml;
}
public get hasPanel(): boolean {
if (!this.data) return false;
return this.data.hasDetailPanel(this);
Expand Down
4 changes: 3 additions & 1 deletion src/question_matrixdynamic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ export class MatrixDynamicRowModel extends MatrixDropdownRowModelBase implements
public get rowName() {
return this.id;
}

public getAccessbilityText(): string {
return (this.index + 1).toString();
}
public get shortcutText(): string {
const matrix = <QuestionMatrixDynamicModel>this.data;
const index = matrix.visibleRows.indexOf(this) + 1;
Expand Down
24 changes: 12 additions & 12 deletions tests/markup/snapshots/matrixdynamic-default.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
<div>
<div>
<div class="sv_select_wrapper">
<div aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 1" aria-required="false" class="sv_q_dropdown_control" id="testid0row1cell0i" role="combobox">
<div aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" class="sv_q_dropdown_control" id="testid0row1cell0i" role="combobox">
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-label="row 1, column Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -61,9 +61,9 @@
<div>
<div>
<div class="sv_select_wrapper">
<div aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 2" aria-required="false" class="sv_q_dropdown_control" id="testid0row1cell1i" role="combobox">
<div aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" class="sv_q_dropdown_control" id="testid0row1cell1i" role="combobox">
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-label="Column 2" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-label="row 1, column Column 2" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -100,9 +100,9 @@
<div>
<div>
<div class="sv_select_wrapper">
<div aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 3" aria-required="false" class="sv_q_dropdown_control" id="testid0row1cell2i" role="combobox">
<div aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" class="sv_q_dropdown_control" id="testid0row1cell2i" role="combobox">
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-label="Column 3" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-label="row 1, column Column 3" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -154,9 +154,9 @@
<div>
<div>
<div class="sv_select_wrapper">
<div aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 1" aria-required="false" class="sv_q_dropdown_control" id="testid0row3cell0i" role="combobox">
<div aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" class="sv_q_dropdown_control" id="testid0row3cell0i" role="combobox">
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-label="row 2, column Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -193,9 +193,9 @@
<div>
<div>
<div class="sv_select_wrapper">
<div aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 2" aria-required="false" class="sv_q_dropdown_control" id="testid0row3cell1i" role="combobox">
<div aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" class="sv_q_dropdown_control" id="testid0row3cell1i" role="combobox">
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-label="Column 2" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-label="row 2, column Column 2" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -232,9 +232,9 @@
<div>
<div>
<div class="sv_select_wrapper">
<div aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 3" aria-required="false" class="sv_q_dropdown_control" id="testid0row3cell2i" role="combobox">
<div aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" class="sv_q_dropdown_control" id="testid0row3cell2i" role="combobox">
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-label="Column 3" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-label="row 2, column Column 3" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down
24 changes: 12 additions & 12 deletions tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
<div class="sd-table__question-wrapper">
<div class="sd-selectbase">
<div class="sv-dropdown_select-wrapper">
<div aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 1" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell0i" role="combobox">
<div aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 1" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell0i" role="combobox">
<div class="sd-dropdown__value">
<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-label="row 1, column Column 1" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -67,9 +67,9 @@
<div class="sd-table__question-wrapper">
<div class="sd-selectbase">
<div class="sv-dropdown_select-wrapper">
<div aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 2" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell1i" role="combobox">
<div aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 2" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell1i" role="combobox">
<div class="sd-dropdown__value">
<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-label="Column 2" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-label="row 1, column Column 2" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -112,9 +112,9 @@
<div class="sd-table__question-wrapper">
<div class="sd-selectbase">
<div class="sv-dropdown_select-wrapper">
<div aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 3" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell2i" role="combobox">
<div aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 1, column Column 3" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row1cell2i" role="combobox">
<div class="sd-dropdown__value">
<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-label="Column 3" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-label="row 1, column Column 3" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -174,9 +174,9 @@
<div class="sd-table__question-wrapper">
<div class="sd-selectbase">
<div class="sv-dropdown_select-wrapper">
<div aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 1" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell0i" role="combobox">
<div aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 1" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell0i" role="combobox">
<div class="sd-dropdown__value">
<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-label="row 2, column Column 1" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -219,9 +219,9 @@
<div class="sd-table__question-wrapper">
<div class="sd-selectbase">
<div class="sv-dropdown_select-wrapper">
<div aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 2" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell1i" role="combobox">
<div aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 2" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell1i" role="combobox">
<div class="sd-dropdown__value">
<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-label="Column 2" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-label="row 2, column Column 2" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down Expand Up @@ -264,9 +264,9 @@
<div class="sd-table__question-wrapper">
<div class="sd-selectbase">
<div class="sv-dropdown_select-wrapper">
<div aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="Column 3" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell2i" role="combobox">
<div aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-invalid="false" aria-label="row 2, column Column 3" aria-required="false" class="sd-dropdown sd-dropdown--empty sd-input" id="testid0row3cell2i" role="combobox">
<div class="sd-dropdown__value">
<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-label="Column 3" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-label="row 2, column Column 3" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
Expand Down
Loading

0 comments on commit 609c19e

Please sign in to comment.