From 79d8c91fa042f1c035c7c5e44a009c24d850d32e Mon Sep 17 00:00:00 2001
From: Malav Shah <shahmalav1995@gmail.com>
Date: Mon, 19 Jan 2026 18:03:00 -0700
Subject: [PATCH] fix(ui): Learn Page Landmark Accessibility issues (#8551)

* fix(ui): Learn Page Landmark Accessibility issues

* fix(ui): remove role attribute from Banner component for accessibility compliance

* fix(ui): enhance aria label for Banner and Metabar as a prop

* fix(i18n): update banner aria labels for improved accessibility
---
 apps/site/components/withBanner.tsx                  |  9 ++++++++-
 apps/site/components/withMetaBar.tsx                 |  1 +
 packages/i18n/src/locales/en.json                    |  8 +++++++-
 packages/ui-components/package.json                  |  2 +-
 packages/ui-components/src/Common/Banner/index.tsx   | 12 ++++++++----
 .../ui-components/src/Containers/MetaBar/index.tsx   |  9 +++++----
 6 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/apps/site/components/withBanner.tsx b/apps/site/components/withBanner.tsx
index 670307e729a8e..1023051e1d0d5 100644
--- a/apps/site/components/withBanner.tsx
+++ b/apps/site/components/withBanner.tsx
@@ -1,5 +1,6 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
 import Banner from '@node-core/ui-components/Common/Banner';
+import { useTranslations } from 'next-intl';
 
 import Link from '#site/components/Link';
 import { siteConfig } from '#site/next.json.mjs';
@@ -9,10 +10,16 @@ import type { FC } from 'react';
 
 const WithBanner: FC<{ section: string }> = ({ section }) => {
   const banner = siteConfig.websiteBanners[section];
+  const t = useTranslations();
 
   if (banner && dateIsBetween(banner.startDate, banner.endDate)) {
+    const bannerType = banner.type || 'default';
+
     return (
-      <Banner type={banner.type}>
+      <Banner
+        type={banner.type}
+        aria-label={t(`components.banner.${bannerType}`)}
+      >
         {banner.link ? (
           <Link href={banner.link}>{banner.text}</Link>
         ) : (
diff --git a/apps/site/components/withMetaBar.tsx b/apps/site/components/withMetaBar.tsx
index 7467753567b8c..dea25e5900e19 100644
--- a/apps/site/components/withMetaBar.tsx
+++ b/apps/site/components/withMetaBar.tsx
@@ -44,6 +44,7 @@ const WithMetaBar: FC = () => {
     <MetaBar
       heading={t('components.metabar.tableOfContents')}
       as={Link}
+      aria-label={t('components.metabar.metadata')}
       items={{
         [t('components.metabar.lastUpdated')]: lastUpdated,
         [t('components.metabar.readingTime')]: readingTimeText,
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index ddf33a5874e37..ecf327b1018ec 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -280,7 +280,13 @@
       "contribute": "Contribute",
       "contributeText": "Edit this page",
       "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
+      "tableOfContents": "Table of Contents",
+      "metadata": "Article metadata"
+    },
+    "banner": {
+      "default": "Announcement",
+      "warning": "Warning notification",
+      "error": "Error notification"
     },
     "search": {
       "searchPlaceholder": "Start typing...",
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 6426a5130c8b9..87c217cd3fae4 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "type": "module",
   "exports": {
     "./*": [
diff --git a/packages/ui-components/src/Common/Banner/index.tsx b/packages/ui-components/src/Common/Banner/index.tsx
index 0eb3f9faf73ef..b28ceade24816 100644
--- a/packages/ui-components/src/Common/Banner/index.tsx
+++ b/packages/ui-components/src/Common/Banner/index.tsx
@@ -1,18 +1,22 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
 
 import styles from './index.module.css';
 
 export type BannerProps = {
   type?: 'default' | 'warning' | 'error';
-};
+} & HTMLAttributes<HTMLElement>;
 
 const Banner: FC<PropsWithChildren<BannerProps>> = ({
   type = 'default',
   children,
+  ...props
 }) => (
-  <div className={`${styles.banner} ${styles[type] || styles.default}`}>
+  <section
+    className={`${styles.banner} ${styles[type] || styles.default}`}
+    {...props}
+  >
     {children}
-  </div>
+  </section>
 );
 
 export default Banner;
diff --git a/packages/ui-components/src/Containers/MetaBar/index.tsx b/packages/ui-components/src/Containers/MetaBar/index.tsx
index 2c314a61414ec..c761cfe07f643 100644
--- a/packages/ui-components/src/Containers/MetaBar/index.tsx
+++ b/packages/ui-components/src/Containers/MetaBar/index.tsx
@@ -2,7 +2,7 @@ import { Fragment, useMemo } from 'react';
 
 import type { LinkLike } from '#ui/types';
 import type { Heading } from '@vcarl/remark-headings';
-import type { FC } from 'react';
+import type { FC, HTMLAttributes } from 'react';
 
 import styles from './index.module.css';
 
@@ -14,13 +14,14 @@ type MetaBarProps = {
   };
   as?: LinkLike;
   heading: string;
-};
+} & HTMLAttributes<HTMLElement>;
 
 const MetaBar: FC<MetaBarProps> = ({
   items,
   headings,
   as: Component = 'a',
   heading,
+  ...props
 }) => {
   // The default depth of headings to display in the table of contents.
   const { minDepth = 2, items: headingItems = [] } = headings || {};
@@ -31,7 +32,7 @@ const MetaBar: FC<MetaBarProps> = ({
   );
 
   return (
-    <div className={styles.wrapper}>
+    <aside className={styles.wrapper} {...props}>
       <dl>
         {Object.entries(items)
           .filter(([, value]) => !!value)
@@ -65,7 +66,7 @@ const MetaBar: FC<MetaBarProps> = ({
           </>
         )}
       </dl>
-    </div>
+    </aside>
   );
 };