Skip to content

Commit b076f57

Browse files
pmPaulispmPaulis
authored
Merge pull request #448 from ProcessMaker/feature/FOUR-23681
FOUR-23681:S2: Improve Behavior Aria Label RADIO / CHECKS
2 parents b9b5e6c + fd19736 commit b076f57

File tree

3 files changed

+101
-243
lines changed

3 files changed

+101
-243
lines changed

‎src/components/FormSelectList.vue‎

Lines changed: 36 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<required-asterisk /><label v-uni-for="name">{{ label }}</label>
44
<multi-select-view
55
v-if="options.renderAs === 'dropdown'"
6+
v-model="valueProxy"
7+
v-uni-id="name"
68
:option-value="optionsKey"
79
:option-content="optionsValue"
810
:option-aria-label="optionsAriaLabel"
9-
v-uni-id="name"
10-
v-model="valueProxy"
1111
:placeholder="placeholder ? placeholder : $t('Select...')"
1212
:show-labels="false"
1313
:options="selectListOptionsWithSelected"
@@ -16,30 +16,16 @@
1616
:emit-objects="options.valueTypeReturned === 'object'"
1717
:emit-array="options.allowMultiSelect"
1818
v-bind="$attrs"
19-
@search-change="searchChange"
2019
:loading="loading"
20+
@search-change="searchChange"
2121
>
2222
</multi-select-view>
2323

24-
<div v-if="options.renderAs === 'checkbox' && options.allowMultiSelect">
25-
<checkbox-view
26-
v-model="valueProxy"
27-
:name="name"
28-
:option-value="optionsKey"
29-
:option-content="optionsValue"
30-
:option-aria-label="optionsAriaLabel"
31-
:options="selectListOptionsWithSelected"
32-
:options-extra="options.optionsListExtra"
33-
:react-options="reactOptions"
34-
:emit-objects="options.valueTypeReturned === 'object'"
35-
v-bind="$attrs"
36-
/>
37-
</div>
38-
39-
<div v-if="options.renderAs === 'checkbox' && !options.allowMultiSelect">
24+
<div v-if="options.renderAs === 'checkbox'">
4025
<optionbox-view
4126
v-model="valueProxy"
4227
:name="name"
28+
:allow-multiselect="options.allowMultiSelect"
4329
:option-value="optionsKey"
4430
:option-content="optionsValue"
4531
:option-aria-label="optionsAriaLabel"
@@ -51,10 +37,7 @@
5137
/>
5238
</div>
5339

54-
<div
55-
v-if="(validator && validator.errorCount) || error"
56-
class="invalid-feedback d-block"
57-
>
40+
<div v-if="(validator && validator.errorCount) || error" class="invalid-feedback d-block">
5841
<div v-for="(error, index) in validatorErrors" :key="index">
5942
{{ error }}
6043
</div>
@@ -70,9 +53,8 @@ import Mustache from "mustache";
7053
import { isEqual, cloneDeep, get, set, debounce } from "lodash";
7154
import ValidationMixin from "./mixins/validation";
7255
import MultiSelectView from "./FormSelectList/MultiSelectView";
73-
import CheckboxView from "./FormSelectList/CheckboxView";
7456
import OptionboxView from "./FormSelectList/OptionboxView";
75-
import RequiredAsterisk from './common/RequiredAsterisk';
57+
import RequiredAsterisk from "./common/RequiredAsterisk";
7658
7759
const uniqIdsMixin = createUniqIdsMixin();
7860
@@ -82,7 +64,6 @@ export default {
8264
components: {
8365
OptionboxView,
8466
MultiSelectView,
85-
CheckboxView,
8667
RequiredAsterisk
8768
},
8869
mixins: [uniqIdsMixin, ValidationMixin],
@@ -112,24 +93,24 @@ export default {
11293
loaded: false,
11394
previousDependentValue: null,
11495
filter: "",
115-
countWithoutFilter: null,
96+
countWithoutFilter: null
11697
};
11798
},
11899
computed: {
119100
selectListOptionsWithSelected() {
120-
if (this.selectedOption && !this.selectListOptions.some(o => o.value === this.selectedOption.value)) {
101+
if (this.selectedOption && !this.selectListOptions.some((o) => o.value === this.selectedOption.value)) {
121102
return [this.selectedOption, ...this.selectListOptions];
122103
}
123104
return this.selectListOptions;
124105
},
125106
collectionOptions() {
126-
return get(this.options, 'collectionOptions');
107+
return get(this.options, "collectionOptions");
127108
},
128109
isDataConnector() {
129-
return get(this.options, 'dataSource') === "dataConnector";
110+
return get(this.options, "dataSource") === "dataConnector";
130111
},
131112
isCollection() {
132-
return get(this.options, 'dataSource') === "collection";
113+
return get(this.options, "dataSource") === "collection";
133114
},
134115
mode() {
135116
return this.$root.$children[0].mode;
@@ -186,23 +167,16 @@ export default {
186167
return this.value;
187168
},
188169
set(val) {
189-
this.selectedOption = val ? this.selectListOptions.find(o => o.value === val) : null;
170+
this.selectedOption = val ? this.selectListOptions.find((o) => o.value === val) : null;
190171
return this.$emit("input", val);
191172
}
192173
},
193174
optionsKey() {
194-
if (
195-
this.options.dataSource &&
196-
this.options.dataSource === "provideData"
197-
) {
175+
if (this.options.dataSource && this.options.dataSource === "provideData") {
198176
return "value";
199177
}
200178
201-
if (
202-
this.options.dataSource &&
203-
this.options.dataSource === "dataConnector" &&
204-
this.options.valueTypeReturned === "object"
205-
) {
179+
if (this.options.dataSource && this.options.dataSource === "dataConnector" && this.options.valueTypeReturned === "object") {
206180
return this.optionsValue;
207181
}
208182
@@ -211,29 +185,20 @@ export default {
211185
return this.stripMustache(fieldName);
212186
},
213187
optionsValue() {
214-
if (
215-
this.options.dataSource &&
216-
(this.options.dataSource === "provideData" ||
217-
this.isCollection)
218-
) {
188+
if (this.options.dataSource && (this.options.dataSource === "provideData" || this.isCollection)) {
219189
return "content";
220190
}
221191
return "__content__";
222192
},
223193
optionsAriaLabel() {
224-
if (
225-
this.options.dataSource &&
226-
(this.options.dataSource === "provideData" ||
227-
this.isCollection)
228-
) {
194+
if (this.options.dataSource && (this.options.dataSource === "provideData" || this.isCollection)) {
229195
return "ariaLabel";
230196
}
231197
return "__ariaLabel__";
232198
},
233199
classList() {
234200
return {
235-
"has-errors":
236-
(this.validator && this.validator.errorCount) || this.error,
201+
"has-errors": (this.validator && this.validator.errorCount) || this.error,
237202
[this.controlClass]: !!this.controlClass
238203
};
239204
}
@@ -242,7 +207,7 @@ export default {
242207
selectListOptions: {
243208
handler() {
244209
if (this.isCollection) {
245-
if (this.value && !this.selectListOptions.some(o => o.value === this.value)) {
210+
if (this.value && !this.selectListOptions.some((o) => o.value === this.value)) {
246211
this.loadIndividualRecord();
247212
}
248213
}
@@ -401,13 +366,13 @@ export default {
401366
formatCollectionRecordResults(record) {
402367
let content = get(record, this.collectionOptions.labelField);
403368
let value = get(record, this.collectionOptions.valueField);
404-
let ariaLabel = get(record, this.collectionOptions.ariaLabelField || this.collectionOptions.labelField);
369+
const ariaLabel = get(record, this.collectionOptions.ariaLabelField || this.collectionOptions.labelField);
405370
406371
// Special handler for file uploads
407-
if (typeof content === 'object' && ('name' in content)) {
372+
if (typeof content === "object" && "name" in content) {
408373
content = content.name;
409374
}
410-
if (typeof value === 'object' && ('id' in value)) {
375+
if (typeof value === "object" && "id" in value) {
411376
value = value.id;
412377
}
413378
@@ -438,10 +403,7 @@ export default {
438403
}
439404
440405
this.loading = true;
441-
const [data] = await this.$dataProvider.getCollectionRecords(
442-
this.collectionOptions.collectionId,
443-
{ params: { pmql } }
444-
);
406+
const [data] = await this.$dataProvider.getCollectionRecords(this.collectionOptions.collectionId, { params: { pmql } });
445407
this.loading = false;
446408
447409
if (data.data && data.data.length > 0) {
@@ -452,18 +414,14 @@ export default {
452414
}
453415
},
454416
async getCollectionRecords(options) {
455-
let data = { data : [] };
417+
let data = { data: [] };
456418
let resolvedNonce = null;
457419
458420
// Nonce ensures we only use results from the latest request
459421
this.nonce = Math.random();
460422
461423
this.loading = true;
462-
[data, resolvedNonce] = await this.$dataProvider.getCollectionRecords(
463-
this.collectionOptions.collectionId,
464-
options,
465-
this.nonce
466-
);
424+
[data, resolvedNonce] = await this.$dataProvider.getCollectionRecords(this.collectionOptions.collectionId, options, this.nonce);
467425
this.loading = false;
468426
469427
if (resolvedNonce !== this.nonce) {
@@ -478,7 +436,7 @@ export default {
478436
479437
this.selectListOptions = data.data.map(this.formatCollectionRecordResults);
480438
},
481-
debouncedSetFilter: debounce(function(value) {
439+
debouncedSetFilter: debounce(function (value) {
482440
this.filter = value;
483441
}, 300),
484442
searchChange(value) {
@@ -498,15 +456,8 @@ export default {
498456
*/
499457
async fillSelectListOptions(resetValueIfNotInOptions) {
500458
let wasUpdated = false;
501-
if (
502-
this.options.dataSource &&
503-
this.options.dataSource === "provideData"
504-
) {
505-
if (
506-
this.options &&
507-
this.options.optionsList &&
508-
!isEqual(this.selectListOptions, this.options.optionsList)
509-
) {
459+
if (this.options.dataSource && this.options.dataSource === "provideData") {
460+
if (this.options && this.options.optionsList && !isEqual(this.selectListOptions, this.options.optionsList)) {
510461
this.selectListOptions = this.options.optionsList;
511462
}
512463
this.selectListOptions = this.selectListOptions || [];
@@ -527,10 +478,7 @@ export default {
527478
wasUpdated = true;
528479
}
529480
530-
if (
531-
this.options.dataSource &&
532-
this.options.dataSource === "dataConnector"
533-
) {
481+
if (this.options.dataSource && this.options.dataSource === "dataConnector") {
534482
wasUpdated = await this.loadOptionsFromDataConnector(this.sourceConfig);
535483
}
536484
@@ -554,7 +502,7 @@ export default {
554502
const resultList = [];
555503
556504
if (!Array.isArray(list)) {
557-
console.warn('The retrieved data is not an array. Please check the data sources options of the select list `' + this.name + '`')
505+
console.warn(`The retrieved data is not an array. Please check the data sources options of the select list \`${this.name}\``);
558506
return resultList;
559507
}
560508
@@ -576,12 +524,13 @@ export default {
576524
? Mustache.render(this.options.value, item)
577525
: Mustache.render(`{{${this.options.value || "content"}}}`, item);
578526
579-
// Modified ariaLabel handling
527+
// Modified ariaLabel handling
580528
let itemAriaLabel = itemContent;
581529
if (this.options.optionAriaLabel) {
582-
itemAriaLabel = this.options.optionAriaLabel.indexOf("{{") >= 0
583-
? Mustache.render(this.options.optionAriaLabel, item)
584-
: Mustache.render(`{{${this.options.optionAriaLabel || "ariaLabel"}}}`, item);
530+
itemAriaLabel =
531+
this.options.optionAriaLabel.indexOf("{{") >= 0
532+
? Mustache.render(this.options.optionAriaLabel, item)
533+
: Mustache.render(`{{${this.options.optionAriaLabel || "ariaLabel"}}}`, item);
585534
}
586535
587536
Mustache.escape = escape; // Reset mustache to original escape function
@@ -658,11 +607,7 @@ export default {
658607
return parsedOption;
659608
},
660609
stripMustache(str) {
661-
const removed = str
662-
.replace(/{{/g, "")
663-
.replace(/}}/g, "")
664-
.split(".")
665-
.pop();
610+
const removed = str.replace(/{{/g, "").replace(/}}/g, "").split(".").pop();
666611
667612
return removed || str;
668613
},

0 commit comments

Comments
 (0)