Task/FOUR-19875: aria-label property is the same in all options in the select list component generating unexpected behaviors for screen readers #1769
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
screen-builder
|
||||||||||||||||||||||||||||
| Project |
screen-builder
|
| Branch Review |
task/FOUR-19875
|
| Run status |
|
| Run duration | 09m 01s |
| Commit |
|
| Committer | Agustín Busso |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
19
|
Skipped
|
0
|
Passing
|
360
|
| View all changes introduced in this branch ↗︎ | |
rodriquelca
reviewed
Nov 5, 2024
|
|
||
| <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> |
There was a problem hiding this comment.
this translation label need to be registered in the core project, thanks
| <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> |
There was a problem hiding this comment.
this label need to be registered in the core project, thanks
|
Related PRs: |
rodriquelca
approved these changes
Nov 5, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue & Reproduction Steps
Steps to Reproduce:
Current Behavior:
The same aria-label is repeated for each option in the Select List. This is causing that the screen readers for disabilities reads the label question every time. This behavior is unexpected for the customer.
Expected Behavior:
ProcessMaker should allow configure the aria-label for each option in the aria-label property. One for the label and one for each option in the Select List component for the screen readers.
Solution
How to Test
Test the steps above
Related Tickets & Packages
Code Review Checklist
ci:vue-form-elements:task/FOUR-19875