Add "Show More" and "Show Less" functionality with translations in Ge…#336
Conversation
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://agreeable-island-0c966e810-336.centralus.6.azurestaticapps.net |
…ases in _index.md
…uides/ScrumGuide-ExpansionPack into hide-low-count-categories
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://agreeable-island-0c966e810-336.centralus.6.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
This pull request adds "Show More" and "Show Less" functionality to the category filter list on the homepage. Categories with only 1 item are now hidden by default and can be revealed by clicking a toggle button. The feature includes translation support for German, English, and Polish languages, along with URL aliases for category redirects.
Changes:
- Added collapsible category filtering with client-side JavaScript toggle functionality
- Added translation strings for "show_more" and "show_less" in three languages (de, en, pl)
- Added URL aliases to redirect category paths to homepage
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| site/layouts/_partials/components/category-list.html | Implemented show/hide functionality for categories with count=1, added JavaScript toggle function with icon and text updates |
| site/i18n/en.yaml | Added "show_more" and "show_less" translation keys for English |
| site/i18n/de.yaml | Added "show_more" and "show_less" translation keys for German |
| site/i18n/pl.yaml | Added "show_more" and "show_less" translation keys for Polish |
| site/content/_index.md | Added URL aliases for category redirects (/engineering/, /teams/, /ai/, /product/, /value/) to homepage |
| .gitignore | Added /output directory to ignore list for build artifacts |
| - id: show_more | ||
| translation: "Show More" | ||
|
|
||
| - id: show_less | ||
| translation: "Show Less" |
There was a problem hiding this comment.
Translation strings "show_more" and "show_less" are added only to English, German, and Polish language files, but the site supports 11 languages total (es, fa, it, ja, nl, pt, ro, tlh are missing these translations). When the show/hide functionality is used on pages in these unsupported languages, the fallback English text will display, creating an inconsistent multilingual experience. All supported languages should receive these translations to maintain consistency across the site.
| const btn = document.getElementById('category-show-more-btn'); | ||
| const btnText = document.getElementById('show-more-text'); | ||
| const btnIcon = btn.querySelector('i'); | ||
|
|
There was a problem hiding this comment.
The JavaScript function directly accesses hiddenCategories[0] without checking if the array has any elements. If $hasHiddenCategories is somehow set to true but no elements with the 'category-hidden' class exist at runtime (edge case), this will cause a runtime error. Add a check to ensure hiddenCategories has at least one element before accessing hiddenCategories[0].classList.
| // Safeguard: if no hidden categories are present, do nothing. | |
| if (!hiddenCategories.length) { | |
| return; | |
| } | |
| <button id="category-show-more-btn" class="text-primary text-decoration-none border-0 bg-transparent cursor-pointer" onclick="toggleCategories()" style="cursor: pointer;"> | ||
| <i class="fa-solid fa-chevron-down me-2"></i> | ||
| <span id="show-more-text">{{ i18n "show_more" | default "Show More" }}</span> | ||
| </button> |
There was a problem hiding this comment.
The button element lacks proper accessibility attributes. It should include aria-expanded to indicate the expanded/collapsed state for screen readers, and aria-controls to reference the elements it controls. Additionally, keyboard users need proper focus management. Consider adding aria-expanded="false" initially and toggling it to "true" in the JavaScript function, along with aria-controls="category-list-container".
|
|
||
| {{/* Show More button - only if there are hidden categories with count of 1 */}} | ||
| {{- if $hasHiddenCategories }} | ||
| <button id="category-show-more-btn" class="text-primary text-decoration-none border-0 bg-transparent cursor-pointer" onclick="toggleCategories()" style="cursor: pointer;"> |
There was a problem hiding this comment.
The inline onclick handler and duplicate cursor styling (both in class and style attribute) are redundant. The class "cursor-pointer" already sets cursor: pointer, so the inline style="cursor: pointer;" is unnecessary. Additionally, consider using an addEventListener in the JavaScript instead of an inline onclick for better separation of concerns and Content Security Policy compatibility.
…rman, English, and Polish
This change is