diff --git a/.Jules/palette.md b/.Jules/palette.md index 0b52d47..a584447 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -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 `

` tags for titles inside reusable cards can break semantic heading hierarchy if the card is placed within another `

` 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 `

` when nested inside an `

` section. diff --git a/src/components/HomepageContent/index.js b/src/components/HomepageContent/index.js index ad4291d..338ec56 100644 --- a/src/components/HomepageContent/index.js +++ b/src/components/HomepageContent/index.js @@ -93,12 +93,12 @@ function LatestPost() {

Latest Update

-

+

{latestPost.title} -

+