diff --git a/src/components/inspector/collection-select-list.vue b/src/components/inspector/collection-select-list.vue
index a28fec7a4..2a87487a6 100644
--- a/src/components/inspector/collection-select-list.vue
+++ b/src/components/inspector/collection-select-list.vue
@@ -31,6 +31,16 @@
/>
+
+ {{ $t("Aria Label") }}
+
+
+
{
diff --git a/src/components/inspector/options-list.vue b/src/components/inspector/options-list.vue
index bc10a60c6..9d6f6259d 100644
--- a/src/components/inspector/options-list.vue
+++ b/src/components/inspector/options-list.vue
@@ -28,6 +28,9 @@
{{ $t('Content') }}
+
+ {{ $t('Aria Label') }}
+
{{ $t('Content') }}
+
+ {{ $t('Aria Label') }}
+
-
+
@@ -203,12 +209,21 @@
{{ $t('Content to display to the user in the select list.') }}
+
+ {{ $t('Aria Label') }}
+
+
+ {{ $t('Aria label for accessibility support.') }}
{{ $t('Variable Data Property') }}
{{ $t('Enter the property name from the Request data variable that will be passed as the value when selected.') }}
+
+ {{ $t('Aria Label') }}
+
+ {{ $t('Enter the property name for the aria label from the Request data variable.') }}
@@ -287,6 +302,7 @@ export default {
removeIndex: null,
optionValue: '',
optionContent: '',
+ optionAriaLabel: '',
showRenderAs: false,
renderAs: 'dropdown',
allowMultiSelect: false,
@@ -413,6 +429,9 @@ export default {
valueField() {
return this.value || 'content';
},
+ ariaLabelField() {
+ return this.optionAriaLabel || 'ariaLabel';
+ },
currentItemToDelete() {
if (this.removeIndex !== null
&& this.optionsList.length > 0
@@ -450,6 +469,7 @@ export default {
editIndex: this.editIndex,
removeIndex: this.removeIndex,
valueTypeReturned: this.valueTypeReturned,
+ optionAriaLabel: this.optionAriaLabel,
};
},
},
@@ -467,6 +487,7 @@ export default {
this.selectedEndPoint = this.options.selectedEndPoint,
this.key = this.options.key;
this.value = this.options.value;
+ this.optionAriaLabel = this.options.optionAriaLabel;
this.pmqlQuery = this.options.pmqlQuery;
this.defaultOptionKey= this.options.defaultOptionKey;
this.selectedOptions = this.options.selectedOptions;
@@ -530,8 +551,9 @@ export default {
const that = this;
jsonList.forEach (item => {
that.optionsList.push({
- [that.keyField] : item[that.keyField],
- [that.valueField] : item[that.valueField],
+ [that.keyField]: item[that.keyField],
+ [that.valueField]: item[that.valueField],
+ [that.ariaLabelField]: item[that.ariaLabelField]
});
});
this.jsonError = '';
@@ -560,12 +582,14 @@ export default {
this.editIndex = index;
this.optionContent = this.optionsList[index][this.valueField];
this.optionValue = this.optionsList[index][this.keyField];
+ this.optionAriaLabel = this.optionsList[index][this.ariaLabelField];
this.optionError = '';
},
showAddOption() {
this.optionCardType = 'insert';
this.optionContent = '';
this.optionValue = '';
+ this.optionAriaLabel = '';
this.showOptionCard = true;
this.optionError = '';
this.editIndex = null;
@@ -582,6 +606,7 @@ export default {
{
[this.valueField]: this.optionContent,
[this.keyField]: this.optionValue,
+ [this.ariaLabelField]: this.optionAriaLabel,
}
);
}
@@ -592,6 +617,7 @@ export default {
}
this.optionsList[this.editIndex][this.keyField] = this.optionValue;
this.optionsList[this.editIndex][this.valueField] = this.optionContent;
+ this.optionsList[this.editIndex][this.ariaLabelField] = this.optionAriaLabel;
}
this.jsonData = JSON.stringify(this.optionsList);
diff --git a/tests/e2e/specs/FormSelectList.spec.js b/tests/e2e/specs/FormSelectList.spec.js
index e54e44ca2..549090dde 100644
--- a/tests/e2e/specs/FormSelectList.spec.js
+++ b/tests/e2e/specs/FormSelectList.spec.js
@@ -348,14 +348,14 @@ describe("Form Select List", () => {
cy.get("[data-cy=inspector-edit-json]").click();
cy.assertComponentValueAsJson('[data-cy="inspector-monaco-json"]', [
- { content: "one", value: "one" }
+ { content: "one", value: "one", ariaLabel: "" }
]);
cy.setVueComponentValue(
'[data-cy="inspector-monaco-json"]',
JSON.stringify([
- { content: "one", value: "one" },
- { content: "two", value: "two" }
+ { content: "one", value: "one", ariaLabel: "" },
+ { content: "two", value: "two", ariaLabel: "" }
])
);
cy.get("[data-cy=inspector-monaco-json-expand]").click();
@@ -363,8 +363,8 @@ describe("Form Select List", () => {
'[data-cy="inspector-monaco-json-expanded"]',
JSON.stringify(
[
- { content: "one", value: "one" },
- { content: "two", value: "two" }
+ { content: "one", value: "one", ariaLabel: "" },
+ { content: "two", value: "two", ariaLabel: "" }
],
null,
2