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

Author: malav2110

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>
         ) : (

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,

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...",

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": {
     "./*": [

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;

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>
   );
 };