Skip to content

🎨 Palette: Fix heading hierarchy in nested UI cards #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NickJLange wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Fix heading hierarchy in nested UI cards #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,7 @@
## 2026-03-01 - External Links and Interactive Icons
**Learning:** Setting `aria-hidden="true"` on custom external link icons prevents screen readers from announcing that the link opens in a new tab. Additionally, using only `hover` classes on interactive icons within a link omits keyboard users from seeing the same visual interactions.
**Action:** Always assign `role="img"` and `aria-label="(opens in new tab)"` to SVG icons indicating external links. Furthermore, apply equivalent `focus-visible` classes to any hover interactions inside interactive elements to ensure visual feedback parity for keyboard users.

## 2026-03-29 - Heading Hierarchy in Nested UI Components
**Learning:** Using hardcoded `<h3>` tags for titles inside reusable cards can break semantic heading hierarchy if the card is placed within another `<h3>` section, confusing screen reader users who navigate by headings.
**Action:** Avoid hardcoding generic heading levels inside cards; ensure headings properly increment relative to their parent container, e.g., using `<h4>` when nested inside an `<h3>` section.
4 changes: 2 additions & 2 deletions src/components/HomepageContent/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,12 @@ function LatestPost() {
<h3>Latest Update</h3>
<div className="card shadow--md">
<div className="card__header">
<h3>
<h4>
<Link to={latestPost.url} className="inline-flex items-center gap-1 group">
{latestPost.title}
<ArrowIcon className="transition-transform group-hover:translate-x-1 group-focus-visible:translate-x-1" />
</Link>
</h3>
</h4>
<small>
<time dateTime={latestPost.date}>
{new Date(latestPost.date).toLocaleDateString('en-US', {
Expand Down
Loading