[#69325] Reimplement "Check all"/"Uncheck all", fixing its use with Collapsible Sections
Ticket
https://community.openproject.org/wp/69325
What are you trying to accomplish?
Fixes an issue where clicking "Check all"/"Uncheck all" opens and closes collapsible sections.
Accomplishes this by refactoring the "check all/uncheck all" functionality in OpenProject from legacy global JavaScript helpers to a modern Stimulus-based architecture. The change affects workflows and roles administration pages where users can bulk select/deselect checkboxes within collapsible sections.
Key Changes
- Introduces two new Stimulus controllers (
CheckAllControllerandCheckableController) that work together via outlets. - Creates a new
CheckAllComponentViewComponent to encapsulate the "Check all/Uncheck all" UI - Removes deprecated global JavaScript helpers (G
lobalHelpers.checkAllandGlobalHelpers.toggleCheckboxesBySelector) - Updates multiple view templates to use the new component and Stimulus controllers
- Adds unit tests for both the component and controllers.
Other small improvements
-
Accessibility:
- better tooltip text on Permissions Report page. "Check all/Uncheck all in row", "Check all/Uncheck all in column".
-
aria-controlsis added to "Check all"/"Uncheck all" buttons when these buttons are not descendants of a fieldset/checkbox group container.
- Styling: uses a label rather than italics to indicate "built in" roles.
- Moderation: Removes a seemingly unused ERb template.
Screenshots
Permissions Report
Workflow
What approach did you choose and why?
The CheckAllController and CheckableController are designed to be robust and flexible. As such, extra care has been taken to add basic documentation and spec coverage.
What this PR doesn't do
- It doesn't Primerize the checkbox controls on any of these pages. This would be fairly trivial to accomplish however.
- It doesn't fix truncated button text on the Workflows page: OP #69565
- It doesn't fix existing accessibility violations (missing checkbox labels): ##21288 / OP #69564
Merge checklist
- [X] Added/updated tests
- [X] Added YARD documentation.
- [X] Added JSDOc documentation.
- [ ] Added/updated documentation in Lookbook (patterns, previews, etc)
- [X] Tested major browsers (Chrome, Firefox, Edge, ...)
@copilot Taking care to keep the spec suite passing and avoid eslint errors, please add a missing example for toggleSelection to the CheckableController Jasmine spec. Test both with missing and present params.
https://stimulus.hotwired.dev/reference/actions#action-parameters
Note that the built-in Stimulus typecasting is annoying for our case case. These params should only ever be Number, String or Boolean - and convertible to String.
@myabc I've opened a new pull request, #21217, to work on those changes. Once the pull request is ready, I'll request review from you.
@myabc I've opened a new pull request, #21224, to work on those changes. Once the pull request is ready, I'll request review from you.
@klaustopher thanks. I'll tackle the ARIA attributes in #21288.