[616] Added expandable arrow for categories - #151
Conversation
📝 Walkthrough""" WalkthroughThis change introduces an interactive expand/collapse mechanism for filter categories in the case studies page. It updates both the SCSS and HTML to implement a toggleable UI for filter categories, including new styles for transitions, accessibility improvements with ARIA attributes and keyboard controls, and support for reduced motion preferences. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HTML
participant JS
participant CSS
User->>HTML: Clicks expand/collapse button (label)
HTML->>HTML: Checkbox toggles checked state
HTML->>JS: Checkbox change event triggers ARIA attribute update
JS->>HTML: Updates aria-expanded on label
HTML->>CSS: CSS sibling selectors apply styles based on :checked
CSS->>User: Filter content expands or collapses with transitions
User->>JS: Presses Enter or Space on expand button
JS->>HTML: Simulates checkbox toggle click
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (6)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
🔍 Vulnerabilities of
|
| digest | sha256:22c2961c21fddb43aee2cb96005e43b9345dd1bf809b9f7d9c61a77039141b33 |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 289 MB |
| packages | 971 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:b9d38d589853406ff0d4364f21969840c3e0397087643aef8eede40edbb6c7cd |
| vulnerabilities |  |
Description
| ||||||||||||
Description
| ||||||||||||
Description
| ||||||||||||
Description
| ||||||||||||
Description
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
website/modules/asset/ui/src/scss/_cases.scss (1)
190-196: Avoid a fixed max-height for the collapsible panel.
Usingmax-height: 1000pxrisks clipping if the tag list grows. Consider:
- Dynamically computing height via JavaScript and animating
height.- Utilizing a CSS variable (
--collapse-max-height) set to cover expected content.- Falling back to
height: autotransitions with JS.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
website/modules/asset/ui/src/scss/_cases.scss(4 hunks)website/modules/case-studies-page/views/index.html(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: sonarqube
- GitHub Check: security-scan
- GitHub Check: e2e-tests
…ttps://github.com/speedandfunction/website into 616-add-expand-to-category-and-show-more-for-tags
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
website/modules/asset/ui/src/initCaseStudiesFilterHandler.js (1)
90-97: Consider error handling for setup function failures.The initialization function calls both setup functions but doesn't handle potential failures. While the current implementation is functional, consider adding error boundaries for production robustness.
const initCaseStudiesFilterHandler = function () { - const filterCleanup = setupFilterLinkDetection(); - const accessibilityCleanup = setupFilterAccessibility(); + let filterCleanup, accessibilityCleanup; + + try { + filterCleanup = setupFilterLinkDetection(); + accessibilityCleanup = setupFilterAccessibility(); + } catch (error) { + console.error('Error setting up filter handlers:', error); + return function () {}; // Return empty cleanup function + } // Return combined cleanup function return function () { - filterCleanup(); - accessibilityCleanup(); + filterCleanup?.(); + accessibilityCleanup?.(); }; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
website/modules/asset/ui/src/initCaseStudiesFilterHandler.js(1 hunks)website/modules/asset/ui/src/scss/_cases.scss(4 hunks)website/modules/case-studies-page/views/index.html(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- website/modules/case-studies-page/views/index.html
- website/modules/asset/ui/src/scss/_cases.scss
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (actions)
- GitHub Check: e2e-tests
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: security-scan
🔇 Additional comments (2)
website/modules/asset/ui/src/initCaseStudiesFilterHandler.js (2)
59-65: 🛠️ Refactor suggestionAdd null checks for robust ARIA attribute updates.
The function assumes the button element exists when updating
aria-expanded. Add defensive checks to prevent runtime errors.const updateAriaExpanded = function (event) { const checkbox = event.target; const button = document.querySelector(`label[for="${checkbox.id}"]`); if (button) { button.setAttribute('aria-expanded', checkbox.checked.toString()); + } else { + console.warn(`No label found for checkbox with id: ${checkbox.id}`); } };Likely an incorrect or invalid review comment.
47-57:Details
✅ Verification successful
Verify DOM structure assumptions for keyboard event handling.
The code assumes
event.targethas aforattribute (line 51), which suggests it should be a<label>element. However, the selector queries for.filter-category__expand-buttonelements. Ensure these elements are indeed labels withforattributes pointing to checkbox IDs.
🏁 Script executed:
#!/bin/bash # Verify the DOM structure for filter expand buttons ast-grep --pattern $'<label class="$_filter-category__expand-button$_" for="$_"> $$$ </label>'Length of output: 97
Here’s a deeper look across the repo to confirm what kind of elements use the
filter-category__expand-buttonclass and to examine the handler file in context:
🏁 Script executed:
#!/bin/bash # 1. Search for usages of the expand-button class rg "filter-category__expand-button" -n . # 2. Dump the first 200 lines of the handler to see how it's wired up echo "=== initCaseStudiesFilterHandler.js (lines 1–200) ===" sed -n '1,200p' website/modules/asset/ui/src/initCaseStudiesFilterHandler.jsLength of output: 3953
DOM structure assumptions are correct
- In
website/modules/case-studies-page/views/index.html(line 87), all.filter-category__expand-buttonelements are<label>tags with afor="filter-toggle-{{ filterType }}"attribute.- Corresponding
<input>checkboxes useid="filter-toggle-{{ filterType }}"and the.filter-category__toggleclass.No changes required.
Anton-88
changed the title
yuramax
left a comment
yuramax
left a comment
There was a problem hiding this comment.
The functionality looks great to me! 💪
One small issue: when clicking on a tag, the highlighted area appears to be cut off on the sides.
It might be good to either fix the styling of the selection or remove the selection highlight altogether.
…ttps://github.com/speedandfunction/website into 616-add-expand-to-category-and-show-more-for-tags
b221514
|
5 participants
Added expandable arrow for categories