feat: FacetWP collapse & expand html#56
Merged
Merged
Conversation
ictbeheer
requested review from
Rovasch,
ShunLuk,
SimonvanWijhe,
Copilot,
dtakken,
mvdhoek1 and
rivanuff
Contributor
There was a problem hiding this comment.
Pull request overview
Adds custom expand/collapse button HTML into FacetWP’s front-end JSON payload so the UI can render branded/a11y-friendly toggle controls.
Changes:
- Hook into
facetwp_scriptsto populateFWP()->display->json['expand']andFWP()->display->json['collapse']. - Provide custom button markup (icons + screen-reader text) for expand/collapse behavior.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+155
to
+156
| FWP()->display->json['expand'] = '<button class="facetwp-button-collapse-expand" aria-expanded="false"><i class="fa-regular fa-plus"></i><span class="sr-only">Klap uit</span></button>'; | ||
| FWP()->display->json['collapse'] = '<button class="facetwp-button-collapse-collapse" aria-expanded="true"><i class="fa-regular fa-minus"></i><span class="sr-only">Klap in</span></button>'; |
There was a problem hiding this comment.
The generated elements don’t specify type="button". If FacetWP renders this inside a , the default type="submit" can cause unintended form submission when toggling expand/collapse. Add an explicit type="button" to both buttons.
Suggested change
| FWP()->display->json['expand'] = '<button class="facetwp-button-collapse-expand" aria-expanded="false"><i class="fa-regular fa-plus"></i><span class="sr-only">Klap uit</span></button>'; | |
| FWP()->display->json['collapse'] = '<button class="facetwp-button-collapse-collapse" aria-expanded="true"><i class="fa-regular fa-minus"></i><span class="sr-only">Klap in</span></button>'; | |
| FWP()->display->json['expand'] = '<button type="button" class="facetwp-button-collapse-expand" aria-expanded="false"><i class="fa-regular fa-plus"></i><span class="sr-only">Klap uit</span></button>'; | |
| FWP()->display->json['collapse'] = '<button type="button" class="facetwp-button-collapse-collapse" aria-expanded="true"><i class="fa-regular fa-minus"></i><span class="sr-only">Klap in</span></button>'; |
Comment on lines
+155
to
+156
| FWP()->display->json['expand'] = '<button class="facetwp-button-collapse-expand" aria-expanded="false"><i class="fa-regular fa-plus"></i><span class="sr-only">Klap uit</span></button>'; | ||
| FWP()->display->json['collapse'] = '<button class="facetwp-button-collapse-collapse" aria-expanded="true"><i class="fa-regular fa-minus"></i><span class="sr-only">Klap in</span></button>'; |
There was a problem hiding this comment.
The decorative Font Awesome <i> icons should be hidden from assistive tech (e.g., aria-hidden="true") since the accessible label is provided via the .sr-only text. Otherwise screen readers may announce the icon element redundantly.
Suggested change
| FWP()->display->json['expand'] = '<button class="facetwp-button-collapse-expand" aria-expanded="false"><i class="fa-regular fa-plus"></i><span class="sr-only">Klap uit</span></button>'; | |
| FWP()->display->json['collapse'] = '<button class="facetwp-button-collapse-collapse" aria-expanded="true"><i class="fa-regular fa-minus"></i><span class="sr-only">Klap in</span></button>'; | |
| FWP()->display->json['expand'] = '<button class="facetwp-button-collapse-expand" aria-expanded="false"><i class="fa-regular fa-plus" aria-hidden="true"></i><span class="sr-only">Klap uit</span></button>'; | |
| FWP()->display->json['collapse'] = '<button class="facetwp-button-collapse-collapse" aria-expanded="true"><i class="fa-regular fa-minus" aria-hidden="true"></i><span class="sr-only">Klap in</span></button>'; |
mvdhoek1
approved these changes
Mar 26, 2026
mvdhoek1
left a comment
mvdhoek1
left a comment
There was a problem hiding this comment.
CoPilot heeft nog wat handige comments, ziet er nice uit verder!
YvetteNikolov
approved these changes
Mar 30, 2026
Contributor
|
type=button hoeft niet, die aria-hidden="true" is wel netjes (ook al doet FontAwesome dat voor ons) |
This file contains hidden or 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
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.
No description provided.