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 @@ /> +
+ + +
+
{ 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 @@
+ + + + + +
- +
@@ -203,12 +209,21 @@ {{ $t('Content to display to the user in the select list.') }} + + + + + {{ $t('Aria label for accessibility support.') }}
{{ $t('Enter the property name from the Request data variable that will be passed as the value when selected.') }} + + + + {{ $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