FOUR-6798 | Selected Filter Options and Screen Reader

[mcraeteisha]

Issue

Ticket: FOUR-6798

Filter Options and options that are already selected are not announced for screen reader user.

Solution

• Add aria-labels to options that are pre-selected when the page loads.
• Add aria-labels to selected options.

Steps to Reproduce Issue

1. Go to Requests.
2. Open inspector on one of the Advanced Search fields (Process, Status, Requester, Participants).
3. Note that there are no aria-labels for selected options.

How to Test

1. Update core branch to feature/FOUR-6798.
2. Repeat Steps to Reproduce Issue.
3. Aria-labels should appear for pre-selected options and selected options.

Code Review Checklist

• [ ] I have pulled this code locally and tested it on my instance, along with any associated packages.
• [ ] This code adheres to ProcessMaker Coding Guidelines.
• [ ] This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
• [ ] This solution fixes the bug reported in the original ticket.
• [ ] This solution does not alter the expected output of a component in a way that would break existing Processes.
• [ ] This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
• [ ] This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
• [ ] This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
• [ ] This ticket conforms to the PRD associated with this part of ProcessMaker.

[paulosakamoto]

@mcraeteisha ,

I have a few remarks about this PR.

• when the component is loaded, no aria label is defined.
• when two options are selected, only the last one is displayed.
• select completed status first, then error. Then deselect error, leaving only completed. The displayed aria-label is the error.
• would you consider creating an aria-label attribute on the vue-multiselect component? to avoid DOM manipulation in the component
• in the methods created, processSelected, statusSelected, requesterSelected, participantSelected, requestSelected, taskSelected and statusOptionsSelected there is a code repetition. Would you consider creating a generic method to reduce code repetition?
• how do we handle translations with this labels?