fix(ui): Learn Page Landmark Accessibility issues

Author: malav2110

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

@@ -10,9 +10,13 @@ const Banner: FC<PropsWithChildren<BannerProps>> = ({
   type = 'default',
   children,
 }) => (
-  <div className={`${styles.banner} ${styles[type] || styles.default}`}>
+  <section
+    className={`${styles.banner} ${styles[type] || styles.default}`}
+    role="region"
+    aria-label="Announcement"
+  >
     {children}
-  </div>
+  </section>
 );
 
 export default Banner;

packages/ui-components/src/Containers/MetaBar/index.tsx

@@ -31,7 +31,7 @@ const MetaBar: FC<MetaBarProps> = ({
   );
 
   return (
-    <div className={styles.wrapper}>
+    <aside className={styles.wrapper} aria-label="Article metadata">
       <dl>
         {Object.entries(items)
           .filter(([, value]) => !!value)
@@ -65,7 +65,7 @@ const MetaBar: FC<MetaBarProps> = ({
           </>
         )}
       </dl>
-    </div>
+    </aside>
   );
 };