Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task/FOUR-19875: aria-label property is the same in all options in the select list component generating unexpected behaviors for screen readers #1769

Open
wants to merge 3 commits into
base: release-2024-fall
Choose a base branch
from
Open

Task/FOUR-19875: aria-label property is the same in all options in the select list component generating unexpected behaviors for screen readers #1769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d86d1d0
Add aria label field to select list inspector
agustinbusso Nov 5, 2024
e5978e5
Show aria label is renderAs is checkbox
agustinbusso Nov 5, 2024
3cc49e2
Add ariaLabel to test
agustinbusso Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/components/inspector/collection-select-list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,16 @@
/>
</div>

<div v-if="fields.length > 1 && renderAs === 'checkbox'" class="mt-3">
<label for="aria-label">{{ $t("Aria Label") }}</label>
<b-form-select
id="aria-label"
v-model="ariaLabelField"
:options="fields"
data-cy="inspector-collection-aria-label"
/>
</div>

<div v-if="fields.length > 1" class="mt-3">
<pmql-input
v-model="pmql"
Expand Down Expand Up @@ -72,6 +82,7 @@ const CONFIG_FIELDS = [
"collectionId",
"labelField",
"valueField",
"ariaLabelField",
"pmql",
"unique"
];
Expand All @@ -81,14 +92,15 @@ export default {
MustacheHelper,
ScreenVariableSelector
},
props: ["value"],
props: ["value", "renderAs"],
data() {
return {
collections: [],
fields: [],
collectionId: null,
labelField: null,
valueField: null,
ariaLabelField: null,
pmql: "",
unique: false
};
Expand Down Expand Up @@ -137,6 +149,7 @@ export default {
resetFields() {
this.labelField = null;
this.valueField = null;
this.ariaLabelField = null;
},
getCollections() {
this.$dataProvider.getCollections().then((response) => {
Expand Down
32 changes: 29 additions & 3 deletions src/components/inspector/options-list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@
</div>
<label class="mt-3" for="option-content">{{ $t('Content') }}</label>
<b-form-input id="option-content" v-model="optionContent" data-cy="inspector-option-content" />

<label v-if="renderAs === 'checkbox'" class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
<b-form-input v-if="renderAs === 'checkbox'" id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
</div>

<div class="card-footer text-right p-2">
Expand Down Expand Up @@ -74,6 +77,9 @@
</div>
<label class="mt-3" for="option-content">{{ $t('Content') }}</label>
<b-form-input id="option-content" v-model="optionContent" data-cy="inspector-option-content" />

<label v-if="renderAs === 'checkbox'" class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
<b-form-input v-if="renderAs === 'checkbox'" id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
</div>

<div class="card-footer text-right p-2">
Expand Down Expand Up @@ -131,7 +137,7 @@
</div>

<div v-if="dataSource === dataSourceValues.collection">
<collection-select-list v-model="collectionOptions"></collection-select-list>
<collection-select-list v-model="collectionOptions" :renderAs="renderAs"></collection-select-list>
</div>

<div v-if="showRenderAs">
Expand Down Expand Up @@ -203,12 +209,21 @@
<mustache-helper/>
<b-form-input id="value" v-model="value" @change="valueChanged" data-cy="inspector-datasource-content"/>
<small class="form-text text-muted mb-3">{{ $t('Content to display to the user in the select list.') }}</small>

<label v-if="renderAs === 'checkbox'" for="aria-label">{{ $t('Aria Label') }}</label>
<mustache-helper v-if="renderAs === 'checkbox'" />
<b-form-input v-if="renderAs === 'checkbox'" id="aria-label" v-model="optionAriaLabel" data-cy="inspector-datasource-aria-label"/>
<small v-if="renderAs === 'checkbox'" class="form-text text-muted mb-3">{{ $t('Aria label for accessibility support.') }}</small>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this label need to be registered in the core project, thanks

</div>

<div v-if="valueTypeReturned === 'single' && dataSource === dataSourceValues.dataObject">
<label for="key">{{ $t('Variable Data Property') }}</label>
<b-form-input id="key" v-model="key" @change="keyChanged" placeholder="Request Variable Property" data-cy="inspector-options-value" />
<small class="form-text text-muted mb-3">{{ $t('Enter the property name from the Request data variable that will be passed as the value when selected.') }}</small>

<label v-if="renderAs === 'checkbox'" for="aria-label">{{ $t('Aria Label') }}</label>
<b-form-input v-if="renderAs === 'checkbox'" id="aria-label" v-model="optionAriaLabel" placeholder="Aria Label Property" data-cy="inspector-options-aria-label" />
<small v-if="renderAs === 'checkbox'" class="form-text text-muted mb-3">{{ $t('Enter the property name for the aria label from the Request data variable.') }}</small>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this translation label need to be registered in the core project, thanks

</div>

<div v-if="dataSource === dataSourceValues.dataConnector">
Expand Down Expand Up @@ -287,6 +302,7 @@ export default {
removeIndex: null,
optionValue: '',
optionContent: '',
optionAriaLabel: '',
showRenderAs: false,
renderAs: 'dropdown',
allowMultiSelect: false,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -450,6 +469,7 @@ export default {
editIndex: this.editIndex,
removeIndex: this.removeIndex,
valueTypeReturned: this.valueTypeReturned,
optionAriaLabel: this.optionAriaLabel,
};
},
},
Expand All @@ -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;
Expand Down Expand Up @@ -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 = '';
Expand Down Expand Up @@ -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;
Expand All @@ -582,6 +606,7 @@ export default {
{
[this.valueField]: this.optionContent,
[this.keyField]: this.optionValue,
[this.ariaLabelField]: this.optionAriaLabel,
}
);
}
Expand All @@ -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);
Expand Down
10 changes: 5 additions & 5 deletions tests/e2e/specs/FormSelectList.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,23 +348,23 @@ 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();
cy.setVueComponentValue(
'[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
Expand Down
Loading