Add SEO and accessibility improvements to increase score to 100#22
Add SEO and accessibility improvements to increase score to 100#22Zahnentferner merged 7 commits intoDjedAlliance:mainfrom
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdded semantic HTML and accessibility attributes site-wide, converted navigation links to hash anchors with guarded smooth-scroll handlers, wrapped main content in a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
index.html (1)
9-10: Meta description exceeds recommended length.The meta description is approximately 200+ characters, which exceeds the recommended 150-160 character limit. Search engines typically truncate descriptions beyond this length, potentially cutting off important information.
Consider shortening the description to focus on the most critical keywords:
- <meta name="description" - content="Djed Alliance - The open union of all stablecoins based on the Djed Stablecoin Protocol. Explore SigmaUSD, Milkomeda Djed, COTI Djed, and other Djed-based stablecoins on Cardano, Ergo, and more." /> + <meta name="description" + content="Djed Alliance - The open union of stablecoins based on the Djed Protocol. Explore SigmaUSD, Milkomeda Djed, COTI Djed, and more on Cardano and Ergo." />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
index.html(1 hunks)src/App.tsx(1 hunks)src/components/elements/cards/ContributorCard.tsx(1 hunks)src/components/pages/contributors/Contributors.tsx(2 hunks)src/components/pages/dapps/Dapps.tsx(3 hunks)src/components/pages/footer/Footer.tsx(1 hunks)src/components/pages/header/Header.tsx(2 hunks)src/components/pages/home/Home.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/App.tsx (2)
src/components/pages/contributors/Contributors.tsx (1)
Contributors(23-75)src/components/pages/dapps/Dapps.tsx (1)
Contributors(17-61)
src/components/pages/dapps/Dapps.tsx (1)
src/components/pages/contributors/Contributors.tsx (1)
Contributors(23-75)
🔇 Additional comments (11)
src/components/elements/cards/ContributorCard.tsx (1)
12-12: LGTM! Alt text improves accessibility.The addition of descriptive alt text for contributor images enhances accessibility and SEO.
src/components/pages/footer/Footer.tsx (2)
12-12: LGTM! Logo alt text improves accessibility.The addition of descriptive alt text for the logo enhances accessibility.
16-18: LGTM! ARIA labels enhance link accessibility.The addition of aria-labels on social media links along with descriptive alt text on images provides excellent accessibility for screen reader users.
src/App.tsx (1)
65-69: LGTM! Semantic main element improves structure.Wrapping the main content in a
<main>element is a best practice for semantic HTML and accessibility. This provides a clear landmark for assistive technologies.src/components/pages/dapps/Dapps.tsx (1)
19-21: LGTM! Semantic HTML and ARIA improvements.The changes from
divtosection, addition ofaria-labelledby, and proper heading structure with ids significantly improve accessibility and semantic HTML.src/components/pages/contributors/Contributors.tsx (1)
25-27: LGTM! Semantic HTML and ARIA enhancements.The conversion to a
sectionelement with proper ARIA labeling and improved heading structure enhances accessibility and follows semantic HTML best practices.src/components/pages/home/Home.tsx (1)
27-30: LGTM! Hash-based navigation improves accessibility.Converting the "Get started" button to use
href="#djed_apps"with controlled scrolling improves accessibility and SEO by providing a valid link target while maintaining the smooth scroll behavior.src/components/pages/header/Header.tsx (4)
30-30: LGTM! Navigation ARIA label improves accessibility.Adding
aria-label="Main navigation"to the nav element provides context for assistive technologies.
32-33: LGTM! Logo link accessibility enhancements.The addition of
aria-labelon the logo link andalttext on the logo image significantly improves accessibility.
41-43: LGTM! Hash-based navigation improves accessibility and SEO.Converting navigation links to use proper
hrefattributes with hash anchors, combined with controlled scrolling viapreventDefault, provides better accessibility, SEO value, and keyboard navigation support while maintaining smooth scroll behavior.
47-51: LGTM! Social links accessibility enhancements.The addition of
aria-labelattributes on social media links along with descriptivealttext on images provides excellent accessibility for screen reader users.
Anushlinux
changed the title
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/pages/dapps/Dapps.tsx (2)
20-21:⚠️ Potential issue | 🟠 Major
<h4>used before<h2>skips heading levels.Using
<h4>as a decorative subtitle above an<h2>inverts the heading hierarchy. Screen readers and SEO crawlers traverse headings in document order, so this reads as "heading level 4 → heading level 2", which violates the accessibility requirement that heading levels should not increase by more than one step. TheContributors.tsxsibling component in this PR correctly uses a<p>for the subtitle rather than an out-of-order heading — the same pattern should be applied here (see the proposed fix above).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/dapps/Dapps.tsx` around lines 20 - 21, The subtitle in the Dapps component uses an out-of-order heading (<h4> with className 'dappsSubtitle') before an <h2> ('dappsTitle'), which breaks heading hierarchy; change the subtitle element in Dapps.tsx from a heading to a non-heading paragraph/span (e.g., replace the <h4 className='dappsSubtitle my-3'> node with a <p> or <span> using the same className) so the visible styling is preserved while keeping the document heading order correct.
19-59:⚠️ Potential issue | 🔴 CriticalMismatched opening/closing tags —
<div>opens but</section>closes.Line 19 opens with
<div ...>but line 59 closes with</section>. This produces invalid HTML; the browser's error-recovery will silently corrupt the DOM, likely causing the</section>to close some outer element instead. The opening tag on line 19 must be converted to<section>to match.While fixing this, align with the
aria-labelledbypattern introduced inContributors.tsxin this same PR (see context) for a fully accessible landmark:🐛 Proposed fix
- <div className="py-20 my-20 items-center" id="djed_apps"> - <h4 className='dappsSubtitle my-3'>Stablecoins based on the</h4> - <h2 className='dappsTitle mb-20'>Djed Protocol</h2> + <section className="py-20 my-20 items-center" id="djed_apps" aria-labelledby="djed-apps-heading"> + <p className='dappsSubtitle my-3'>Stablecoins based on the</p> + <h2 id="djed-apps-heading" className='dappsTitle mb-20'>Djed Protocol</h2>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/dapps/Dapps.tsx` around lines 19 - 59, Change the mismatched root element in Dapps.tsx: replace the opening <div className="py-20 my-20 items-center" id="djed_apps"> with a <section> element (so it matches the existing </section>) and add an accessible landmark by following the Contributors.tsx pattern — give the main heading an id (e.g., djed_apps_label) and add aria-labelledby="djed_apps_label" to the new <section>; ensure you keep the same className and id (or move id to the heading if you prefer) and leave the existing Swiper/ContributorCard usage (props.slidesPerView, ContributorCard, SwiperSlide) unchanged.
🧹 Nitpick comments (1)
src/components/pages/dapps/Dapps.tsx (1)
65-89: Remove commented-out dead code.The large commented block (lines 65–89) is unused and clutters the file. Git history preserves it if ever needed.
🧹 Proposed cleanup
-// import DappCard from '../../elements/cards/DappCard'; -// import ContributorCard from '../../elements/cards/ContributorCard'; -// import ErgoImage from '../../../assets/ergo.png'; - -// export default function Dapps(): JSX.Element { -// const cardTextErgo = 'Interact with SigmaUSD,\nthe first deployment of Djed,\non the Ergo Blockchain.'; -// const cardTextCOTI = 'Interact with COTI\'s Djed\nimplemented in Plutus\non the Cardano Blockchain.'; -// const cardTextMilkomeda = 'Interact with Djed on\nthe Milkomeda-C1\nEVM Sidechain of Cardano.'; -// const cardTextZephyr = 'Interact with Zephyr Protocol, \na privacy focused, native chain \nDjed Implementation'; - -// return ( -// <div className="py-20 my-20 items-center justify-center" id="djed_apps"> -// <h4 className="dappsSubtitle my-3">Deployments of</h4> -// <h2 className="dappsTitle mb-20">Djed</h2> -// <div className="sm:flex-row lg:flex align-middle justify-center md:flex"> -// <DappCard cardTitle="SigmaUSD" href="https://sigmausd.io/#/" cardText={cardTextErgo} /> -// <DappCard cardTitle="Djed powered by COTI" href="https://djed.xyz/" cardText={cardTextCOTI} /> -// <DappCard cardTitle="Milkomeda Djed Osiris" href="https://milkomeda-c1.djed.one/" cardText={cardTextMilkomeda} /> -// <DappCard cardTitle="Zephyr Protocol" href="https://zephyrprotocol.com/" cardText={cardTextZephyr} /> -// <ContributorCard contributor="Ergo" imageSrc={ErgoImage} contributorWeb="https://ergoplatform.org/en/" /> -// <ContributorCard contributor="Ergo" imageSrc={ErgoImage} contributorWeb="https://ergoplatform.org/en/" /> -// </div> -// </div> -// ); -// }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/dapps/Dapps.tsx` around lines 65 - 89, Remove the large commented-out block that includes the unused imports (DappCard, ContributorCard, ErgoImage) and the entire commented Dapps component implementation to clean up dead code; find the commented section around the Dapps component (references: Dapps, DappCard, ContributorCard, ErgoImage, cardTextErgo/cardTextCOTI/cardTextMilkomeda/cardTextZephyr) and delete those commented lines so only active code remains (rely on git history if you need the removed code later).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/components/pages/dapps/Dapps.tsx`:
- Around line 20-21: The subtitle in the Dapps component uses an out-of-order
heading (<h4> with className 'dappsSubtitle') before an <h2> ('dappsTitle'),
which breaks heading hierarchy; change the subtitle element in Dapps.tsx from a
heading to a non-heading paragraph/span (e.g., replace the <h4
className='dappsSubtitle my-3'> node with a <p> or <span> using the same
className) so the visible styling is preserved while keeping the document
heading order correct.
- Around line 19-59: Change the mismatched root element in Dapps.tsx: replace
the opening <div className="py-20 my-20 items-center" id="djed_apps"> with a
<section> element (so it matches the existing </section>) and add an accessible
landmark by following the Contributors.tsx pattern — give the main heading an id
(e.g., djed_apps_label) and add aria-labelledby="djed_apps_label" to the new
<section>; ensure you keep the same className and id (or move id to the heading
if you prefer) and leave the existing Swiper/ContributorCard usage
(props.slidesPerView, ContributorCard, SwiperSlide) unchanged.
---
Nitpick comments:
In `@src/components/pages/dapps/Dapps.tsx`:
- Around line 65-89: Remove the large commented-out block that includes the
unused imports (DappCard, ContributorCard, ErgoImage) and the entire commented
Dapps component implementation to clean up dead code; find the commented section
around the Dapps component (references: Dapps, DappCard, ContributorCard,
ErgoImage, cardTextErgo/cardTextCOTI/cardTextMilkomeda/cardTextZephyr) and
delete those commented lines so only active code remains (rely on git history if
you need the removed code later).
|
Hi @Anushlinux ! Thanks for the PR. After merging your previous PRs, this one appears not to be working. See https://github.com/DjedAlliance/DjedAlliance.github.io/actions/runs/22292310000/job/64481861709?pr=22 . Could you fix this? |
Sure on it, will fix the build error |
|
Hey @Zahnentferner , I have fixed the small build error which was earlier caused by an open section tag, but now i am running into a unzip failure in the codepreview workflow. I guess the server at djed.codepreview.io is returning a ~200 byte error page instead of the actual zip file. I've added -fL flags to curl so it fails fast on bad responses going forward. |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
.github/workflows/codepreview.yml (2)
29-34:⚠️ Potential issue | 🟠 MajorOutdated action versions and EOL Node.js — likely root cause of the reported CI failure.
The PR comments link a failing CI run that this change is supposed to fix. The curl tweak helps with one specific step, but the more probable root cause is:
actions/setup-node@v3runs on Node 16, and GitHub started enforcing Node 20 instead of Node 16 on June 3rd, 2024. This meansactions/checkout@v2andactions/setup-node@v3are now running under a forced Node 20 upgrade path with deprecation warnings that can break workflows.Node 16 has reached its end of life, prompting GitHub to initiate its deprecation process; the plan was to transition all actions to run on Node 20 by Spring 2024.node-version: 16in the build step itself will also be unavailable or flagged on current runners.🔧 Proposed fix — upgrade actions and Node.js version
- - name: checkout - uses: actions/checkout@v2 + - name: checkout + uses: actions/checkout@v4 - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: - node-version: 16 + node-version: 20 cache: 'yarn'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/workflows/codepreview.yml around lines 29 - 34, The workflow uses deprecated action versions and Node 16 causing CI failures; update the action references and Node version: replace actions/checkout@v2 with actions/checkout@v4, replace actions/setup-node@v3 with actions/setup-node@v4 (or latest), and change the setup step's node-version from 16 to 20 (and keep the yarn cache config compatible with setup-node@v4). Locate these in the codepreview.yml workflow where the steps reference actions/checkout and actions/setup-node to apply the changes.
29-34:⚠️ Potential issue | 🔴 CriticalNode.js 16 and deprecated GitHub Actions versions are causing CI failure.
node-version: 16— Node.js 16 reached EOL on September 11, 2023, and GitHub removed it from all hosted runners on November 12, 2024. This causesyarn run buildto fail immediately.actions/checkout@v2— uses the deprecated Node 12 runtime, which is no longer available on GitHub runners.actions/setup-node@v3— uses Node 16 internally, also unavailable.Update to checkout@v4 and setup-node@v4 (both use Node 20), and set
node-version: 20:Proposed fix
- - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: - node-version: 16 + node-version: 20 cache: 'yarn'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/workflows/codepreview.yml around lines 29 - 34, Update the workflow to use supported GitHub Action versions and a current Node runtime: replace actions/checkout@v2 with actions/checkout@v4, replace actions/setup-node@v3 with actions/setup-node@v4, and change node-version: 16 to node-version: 20 so the runner uses Node 20; ensure the setup-node cache setting remains compatible (e.g., 'yarn') and that any dependent steps (like yarn run build) work with Node 20 after the change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In @.github/workflows/codepreview.yml:
- Around line 29-34: The workflow uses deprecated action versions and Node 16
causing CI failures; update the action references and Node version: replace
actions/checkout@v2 with actions/checkout@v4, replace actions/setup-node@v3 with
actions/setup-node@v4 (or latest), and change the setup step's node-version from
16 to 20 (and keep the yarn cache config compatible with setup-node@v4). Locate
these in the codepreview.yml workflow where the steps reference actions/checkout
and actions/setup-node to apply the changes.
- Around line 29-34: Update the workflow to use supported GitHub Action versions
and a current Node runtime: replace actions/checkout@v2 with
actions/checkout@v4, replace actions/setup-node@v3 with actions/setup-node@v4,
and change node-version: 16 to node-version: 20 so the runner uses Node 20;
ensure the setup-node cache setting remains compatible (e.g., 'yarn') and that
any dependent steps (like yarn run build) work with Node 20 after the change.
|
@Anushlinux , could you contact me in the Discord of the Stability Nexus? I don't always get notified of comments in github. |
2 participants
Increased the seo from 73 to 100, added meta description, semantic html structure and alt tags for better visibility
fixs: #21
Video demo:
Screen.Recording.2025-12-13.at.4.05.59.PM.mov
Summary by CodeRabbit
Accessibility
Navigation
Structure & Semantics
SEO