fix(seo): improve heading hierarchy and alt text for accessibility

[PierreBrisorgueil]

Summary

• What changed: Fixed heading tag hierarchy across home module components and improved alt text on images for better SEO and accessibility.
• Why: Heading levels were skipping ranks (h2 in hero, h5 in steps) and images used generic hardcoded alt text, both of which hurt search engine indexing and screen reader usability.
• Related issues: Closes fix(seo): heading hierarchy and alt text improvements #3659

Scope

• Modules impacted: home
• Cross-module impact: none
• Risk level: low

Validation

• npm run lint
• npm run test:unit
• npm run build
• Manual checks done (if applicable)

Guardrails check

• No secrets or credentials introduced (.env*, secrets/**, keys, tokens)
• No risky rename/move of core stack paths
• Changes remain merge-friendly for downstream projects
• Tests added or updated when behavior changed

Notes for reviewers

• Security considerations: none
• Mergeability considerations: Only HTML tag changes and new optional props with defaults — fully backward compatible
• Follow-up tasks (optional): none

[coderabbitai]

Warning

Rate limit exceeded

@PierreBrisorgueil has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 24 minutes and 49 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3a814252-ebb7-4904-8c70-ca452e784b8d

📥 Commits

Reviewing files that changed from the base of the PR and between ba3da75 and 1cacbff.

📒 Files selected for processing (6)

• src/modules/home/components/home.gallery.component.vue
• src/modules/home/components/home.hero.component.vue
• src/modules/home/components/home.steps.component.vue
• src/modules/home/components/team.member.component.vue
• src/modules/home/components/utils/home.content.component.vue
• src/modules/home/components/utils/home.img.component.vue

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/seo-heading-alt

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.55%. Comparing base (2f2a8ff) to head (1cacbff).
⚠️ Report is 5 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3661   +/-   ##
=======================================
  Coverage   98.55%   98.55%           
=======================================
  Files          19       19           
  Lines         485      485           
  Branches      121      121           
=======================================
  Hits          478      478           
  Misses          7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

This PR targets SEO/accessibility in the home module by improving heading hierarchy (avoiding skipped levels) and making image alt text more descriptive.

Changes:

• Updated several headings to better follow an h1 → h2 → h3 structure (hero, steps, gallery, team member).
• Added an optional alt prop to HomeImgComponent and improved hero/banner alt text handling.
• Added a configurable headingLevel prop to HomeContentComponent for dynamic subtitle heading tags.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/modules/home/components/utils/home.img.component.vue	Adds alt prop and updates <v-img> alt fallback behavior.
src/modules/home/components/utils/home.content.component.vue	Renders subtitle as a dynamic heading tag via new headingLevel prop.
src/modules/home/components/team.member.component.vue	Adjusts member name heading level for improved hierarchy.
src/modules/home/components/home.steps.component.vue	Updates step title heading level in the timeline opposite slot.
src/modules/home/components/home.hero.component.vue	Promotes hero title to h1 and improves banner alt text binding.
src/modules/home/components/home.gallery.component.vue	Updates slide subtitle heading level and adds alt-like text to slides.

Comments suppressed due to low confidence (1)

src/modules/home/components/home.steps.component.vue:52

• With homeContentComponent now rendering its subtitle as an h2 by default, each timeline card will likely contain an h2 after this h3 step title, which is a backward jump in the heading hierarchy. Consider passing an explicit headingLevel to the nested homeContentComponent (e.g., one level below this step title) or changing the opposite slot markup to non-heading text so the document outline remains monotonic.

              <h3 class="text-headline-small text-md-headline-medium text-secondary font-weight-bold" v-text="item.title"></h3>
            </template>
            <v-card :class="`${config.vuetify.theme.rounded} my-8 pb-2`" :flat="config.vuetify.theme.flat" :style="cardStyle">
              <homeImgComponent v-if="item.img && !item.reversed" :img="item.img"></homeImgComponent>
              <homeContentComponent :setup="item" variant="card" alignment="center"></homeContentComponent>
              <homeImgComponent v-if="item.img && item.reversed" :img="item.img"></homeImgComponent>