feat(blog): update + style blog index page#349
Open
Anca2022 wants to merge 9 commits into
Open
Conversation
✅ Deploy Preview for interledger-org-v5 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| } | ||
| <ul class={dropdownClasses} id="language-dropdown" role="list"> | ||
| <li> | ||
| <a |
Collaborator
There was a problem hiding this comment.
- , not role="menuitem"/option. Mixing a disclosure-button pattern with plain links is acceptable, but then aria-controls pointing at a list and the rotate-on-expand chevron imply a menu. Pick one model and make the ARIA consistent.
| <div class="flex flex-wrap items-center gap-md"> | ||
| <button | ||
| id="language-filter" | ||
| aria-controls="language-dropdown" |
Collaborator
There was a problem hiding this comment.
missing aria-haspopup="listbox" (or "menu"). Screen readers won't announce that activating it opens a popup.
| } | ||
| <div class="flex text-body-sm-emphasis text-primary"> | ||
| <p class="m-0 text-body-sm-emphasis"> | ||
| {t('blog.lang_filter.results', { totalEntries })} |
Collaborator
There was a problem hiding this comment.
appended after the results paragraph for spacing is a bit fragile; a flex gap would be cleaner than a hard space.
| } | ||
| }) | ||
|
|
||
| dropdown?.addEventListener('focusout', (e: FocusEvent) => { |
Collaborator
There was a problem hiding this comment.
the document click listener is never cleaned up. In Astro with view transitions / client-side nav this leaks a listener per navigation. Worth gating on astro:page-load or removing on unload.
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
2 participants
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.
Summary
This PR redesigns the Foundation Blog index page to match the Figma spec.
Pagination: replaced first/last buttons with prev/next icon arrows, removed firstUrl/lastUrl props (updated all callers), added ellipsis logic via a new
getVisiblePagesBlog index layout: updated the layout to match Figma, added Breadcrumbs, grouped filters in a semantically labelled
<section>, threaded totalEntries through all 6 blog route files so the results count can be displayed.Filter components:
ContentLangFilter: rebuilt as an accessible dropdownContentLangNotice: simplified to a results count + viewing-language inline noticeRelated Issue
Fixes INTORG-770
Manual Test
Go to the Blog Index page, switch languages, change the filters, and verify that the displayed results are updated correctly and align with the expected content.
Checks
pnpm run formatpnpm run lintPR Checklist
feat: ...,fix: ...)