fix(ui): Learn Page Landmark Accessibility issues

[malav2110]

Description

Fixes Axe accessibility violations where Learn page content was not contained within semantic HTML landmarks.

Changes Made

1. MetaBar component - Changed wrapper from <div> to <aside> element with aria-label="Article metadata".
2. Banner component - Changed from <div> to <section> element with role="region" and aria-label="Announcement".
3. As changes are in ui-packages directory, ran command: pnpm version patch

Validation (Axe Report)

Before:

After:

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
nodejs-org	Ready	Preview	Jan 20, 2026 0:37am

[github-actions]

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

[Copilot]

Pull request overview

This PR fixes accessibility violations on the Learn page by replacing non-semantic <div> elements with semantic HTML landmarks, addressing Axe accessibility issues.

Changes:

• Changed MetaBar wrapper from <div> to <aside> element with aria-label="Article metadata"
• Changed Banner wrapper from <div> to <section> element with role="region" and aria-label="Announcement"
• Bumped package version from 1.5.4 to 1.5.5 in packages/ui-components/package.json

Reviewed changes

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

File	Description
packages/ui-components/src/Containers/MetaBar/index.tsx	Changed wrapper element from <div> to <aside> with aria-label="Article metadata" to provide semantic landmark
packages/ui-components/src/Common/Banner/index.tsx	Changed wrapper from <div> to <section> with role="region" and aria-label="Announcement"
packages/ui-components/package.json	Version bump from 1.5.4 to 1.5.5

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[avivkeller]

(Blocking, as this can't land with the hardcoded values)

[malav2110]

@avivkeller When time permits, can you re-review it?

[avivkeller]

LGTM after @ovflowd's comment

[malav2110]

Thank you @avivkeller @ovflowd :)

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 96	🟢 96	🟢 100	🟢 100	🔗
/en/about	🟢 100	🟢 97	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 98	🟢 100	🟢 100	🟢 100	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 99	🟢 100	🟢 96	🟢 100	🔗
/en/blog	🟢 98	🟢 100	🟢 96	🟢 100	🔗

[codecov]

Codecov Report

❌ Patch coverage is 60.00000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 74.98%. Comparing base (7a949e8) to head (1565bc7).
⚠️ Report is 4 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ges/ui-components/src/Containers/MetaBar/index.tsx	60.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8551      +/-   ##
==========================================
+ Coverage   74.96%   74.98%   +0.01%     
==========================================
  Files         103      103              
  Lines        9036     9037       +1     
  Branches      312      312              
==========================================
+ Hits         6774     6776       +2     
+ Misses       2260     2259       -1     
  Partials        2        2              

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