Skip to content

Commit 722fea8

Browse files
nolanpronolanpro
authored
Merge pull request #449 from ProcessMaker/epic/FOUR-22582
FOUR-22582: [SUMMER 25] UI Improvements Summer 2025 - Accesibility
2 parents eaeebf0 + c162de1 commit 722fea8

4 files changed

Lines changed: 149 additions & 213 deletions

File tree

‎src/components/FormSelectList.vue‎

Lines changed: 32 additions & 71 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,8 +16,8 @@
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

@@ -51,10 +51,7 @@
5151
/>
5252
</div>
5353

54-
<div
55-
v-if="(validator && validator.errorCount) || error"
56-
class="invalid-feedback d-block"
57-
>
54+
<div v-if="(validator && validator.errorCount) || error" class="invalid-feedback d-block">
5855
<div v-for="(error, index) in validatorErrors" :key="index">
5956
{{ error }}
6057
</div>
@@ -70,9 +67,9 @@ import Mustache from "mustache";
7067
import { isEqual, cloneDeep, get, set, debounce } from "lodash";
7168
import ValidationMixin from "./mixins/validation";
7269
import MultiSelectView from "./FormSelectList/MultiSelectView";
73-
import CheckboxView from "./FormSelectList/CheckboxView";
7470
import OptionboxView from "./FormSelectList/OptionboxView";
75-
import RequiredAsterisk from './common/RequiredAsterisk';
71+
import CheckboxView from "./FormSelectList/CheckboxView";
72+
import RequiredAsterisk from "./common/RequiredAsterisk";
7673
7774
const uniqIdsMixin = createUniqIdsMixin();
7875
@@ -81,8 +78,8 @@ const MAX_COLLECTION_RECORDS = 100;
8178
export default {
8279
components: {
8380
OptionboxView,
84-
MultiSelectView,
8581
CheckboxView,
82+
MultiSelectView,
8683
RequiredAsterisk
8784
},
8885
mixins: [uniqIdsMixin, ValidationMixin],
@@ -112,24 +109,24 @@ export default {
112109
loaded: false,
113110
previousDependentValue: null,
114111
filter: "",
115-
countWithoutFilter: null,
112+
countWithoutFilter: null
116113
};
117114
},
118115
computed: {
119116
selectListOptionsWithSelected() {
120-
if (this.selectedOption && !this.selectListOptions.some(o => o.value === this.selectedOption.value)) {
117+
if (this.selectedOption && !this.selectListOptions.some((o) => o.value === this.selectedOption.value)) {
121118
return [this.selectedOption, ...this.selectListOptions];
122119
}
123120
return this.selectListOptions;
124121
},
125122
collectionOptions() {
126-
return get(this.options, 'collectionOptions');
123+
return get(this.options, "collectionOptions");
127124
},
128125
isDataConnector() {
129-
return get(this.options, 'dataSource') === "dataConnector";
126+
return get(this.options, "dataSource") === "dataConnector";
130127
},
131128
isCollection() {
132-
return get(this.options, 'dataSource') === "collection";
129+
return get(this.options, "dataSource") === "collection";
133130
},
134131
mode() {
135132
return this.$root.$children[0].mode;
@@ -186,23 +183,16 @@ export default {
186183
return this.value;
187184
},
188185
set(val) {
189-
this.selectedOption = val ? this.selectListOptions.find(o => o.value === val) : null;
186+
this.selectedOption = val ? this.selectListOptions.find((o) => o.value === val) : null;
190187
return this.$emit("input", val);
191188
}
192189
},
193190
optionsKey() {
194-
if (
195-
this.options.dataSource &&
196-
this.options.dataSource === "provideData"
197-
) {
191+
if (this.options.dataSource && this.options.dataSource === "provideData") {
198192
return "value";
199193
}
200194
201-
if (
202-
this.options.dataSource &&
203-
this.options.dataSource === "dataConnector" &&
204-
this.options.valueTypeReturned === "object"
205-
) {
195+
if (this.options.dataSource && this.options.dataSource === "dataConnector" && this.options.valueTypeReturned === "object") {
206196
return this.optionsValue;
207197
}
208198
@@ -211,29 +201,20 @@ export default {
211201
return this.stripMustache(fieldName);
212202
},
213203
optionsValue() {
214-
if (
215-
this.options.dataSource &&
216-
(this.options.dataSource === "provideData" ||
217-
this.isCollection)
218-
) {
204+
if (this.options.dataSource && (this.options.dataSource === "provideData" || this.isCollection)) {
219205
return "content";
220206
}
221207
return "__content__";
222208
},
223209
optionsAriaLabel() {
224-
if (
225-
this.options.dataSource &&
226-
(this.options.dataSource === "provideData" ||
227-
this.isCollection)
228-
) {
210+
if (this.options.dataSource && (this.options.dataSource === "provideData" || this.isCollection)) {
229211
return "ariaLabel";
230212
}
231213
return "__ariaLabel__";
232214
},
233215
classList() {
234216
return {
235-
"has-errors":
236-
(this.validator && this.validator.errorCount) || this.error,
217+
"has-errors": (this.validator && this.validator.errorCount) || this.error,
237218
[this.controlClass]: !!this.controlClass
238219
};
239220
}
@@ -242,7 +223,7 @@ export default {
242223
selectListOptions: {
243224
handler() {
244225
if (this.isCollection) {
245-
if (this.value && !this.selectListOptions.some(o => o.value === this.value)) {
226+
if (this.value && !this.selectListOptions.some((o) => o.value === this.value)) {
246227
this.loadIndividualRecord();
247228
}
248229
}
@@ -442,10 +423,7 @@ export default {
442423
}
443424
444425
this.loading = true;
445-
const [data] = await this.$dataProvider.getCollectionRecords(
446-
this.collectionOptions.collectionId,
447-
{ params: { pmql } }
448-
);
426+
const [data] = await this.$dataProvider.getCollectionRecords(this.collectionOptions.collectionId, { params: { pmql } });
449427
this.loading = false;
450428
451429
if (data.data && data.data.length > 0) {
@@ -456,18 +434,14 @@ export default {
456434
}
457435
},
458436
async getCollectionRecords(options) {
459-
let data = { data : [] };
437+
let data = { data: [] };
460438
let resolvedNonce = null;
461439
462440
// Nonce ensures we only use results from the latest request
463441
this.nonce = Math.random();
464442
465443
this.loading = true;
466-
[data, resolvedNonce] = await this.$dataProvider.getCollectionRecords(
467-
this.collectionOptions.collectionId,
468-
options,
469-
this.nonce
470-
);
444+
[data, resolvedNonce] = await this.$dataProvider.getCollectionRecords(this.collectionOptions.collectionId, options, this.nonce);
471445
this.loading = false;
472446
473447
if (resolvedNonce !== this.nonce) {
@@ -482,7 +456,7 @@ export default {
482456
483457
this.selectListOptions = data.data.map(this.formatCollectionRecordResults);
484458
},
485-
debouncedSetFilter: debounce(function(value) {
459+
debouncedSetFilter: debounce(function (value) {
486460
this.filter = value;
487461
}, 300),
488462
searchChange(value) {
@@ -502,15 +476,8 @@ export default {
502476
*/
503477
async fillSelectListOptions(resetValueIfNotInOptions) {
504478
let wasUpdated = false;
505-
if (
506-
this.options.dataSource &&
507-
this.options.dataSource === "provideData"
508-
) {
509-
if (
510-
this.options &&
511-
this.options.optionsList &&
512-
!isEqual(this.selectListOptions, this.options.optionsList)
513-
) {
479+
if (this.options.dataSource && this.options.dataSource === "provideData") {
480+
if (this.options && this.options.optionsList && !isEqual(this.selectListOptions, this.options.optionsList)) {
514481
this.selectListOptions = this.options.optionsList;
515482
}
516483
this.selectListOptions = this.selectListOptions || [];
@@ -531,10 +498,7 @@ export default {
531498
wasUpdated = true;
532499
}
533500
534-
if (
535-
this.options.dataSource &&
536-
this.options.dataSource === "dataConnector"
537-
) {
501+
if (this.options.dataSource && this.options.dataSource === "dataConnector") {
538502
wasUpdated = await this.loadOptionsFromDataConnector(this.sourceConfig);
539503
}
540504
@@ -558,7 +522,7 @@ export default {
558522
const resultList = [];
559523
560524
if (!Array.isArray(list)) {
561-
console.warn('The retrieved data is not an array. Please check the data sources options of the select list `' + this.name + '`')
525+
console.warn(`The retrieved data is not an array. Please check the data sources options of the select list \`${this.name}\``);
562526
return resultList;
563527
}
564528
@@ -583,9 +547,10 @@ export default {
583547
// Modified ariaLabel handling
584548
let itemAriaLabel = itemContent;
585549
if (this.options.optionAriaLabel) {
586-
itemAriaLabel = this.options.optionAriaLabel.indexOf("{{") >= 0
587-
? Mustache.render(this.options.optionAriaLabel, item)
588-
: Mustache.render(`{{${this.options.optionAriaLabel || "ariaLabel"}}}`, item);
550+
itemAriaLabel =
551+
this.options.optionAriaLabel.indexOf("{{") >= 0
552+
? Mustache.render(this.options.optionAriaLabel, item)
553+
: Mustache.render(`{{${this.options.optionAriaLabel || "ariaLabel"}}}`, item);
589554
}
590555
591556
Mustache.escape = escape; // Reset mustache to original escape function
@@ -662,11 +627,7 @@ export default {
662627
return parsedOption;
663628
},
664629
stripMustache(str) {
665-
const removed = str
666-
.replace(/{{/g, "")
667-
.replace(/}}/g, "")
668-
.split(".")
669-
.pop();
630+
const removed = str.replace(/{{/g, "").replace(/}}/g, "").split(".").pop();
670631
671632
return removed || str;
672633
},

0 commit comments

Comments
 (0)