fix: SEO and accessibility improvements

Author: marcinkrasowski

.changeset/ten-students-fail.md

@@ -0,0 +1,9 @@
+---
+'@o2s/integrations.strapi-cms': patch
+'@o2s/integrations.mocked': patch
+'@o2s/framework': patch
+'@o2s/frontend': patch
+'@o2s/ui': patch
+---
+
+SEO and accessibility improvements

apps/frontend/package.json

@@ -26,7 +26,7 @@
         "formik": "^2.4.6",
         "jsonwebtoken": "^9.0.2",
         "markdown-to-jsx": "^7.7.3",
-        "next": "^15.1.3",
+        "next": "15.2.1",
         "next-auth": "^5.0.0-beta.25",
         "next-compose-plugins": "^2.2.1",
         "next-intl": "^3.26.1",
@@ -42,7 +42,7 @@
         "@o2s/eslint-config": "*",
         "@o2s/prettier-config": "*",
         "@o2s/typescript-config": "*",
-        "@next/bundle-analyzer": "^15.0.4",
+        "@next/bundle-analyzer": "15.2.1",
         "@svgr/webpack": "^8.1.0",
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/bcryptjs": "^2.4.6",
@@ -53,7 +53,7 @@
         "@types/react-dom": "19.0.0",
         "dotenv": "^16.4.7",
         "eslint": "^8",
-        "eslint-config-next": "15.0.3",
+        "eslint-config-next": "15.2.1",
         "postcss": "^8",
         "prettier": "^3.4.0",
         "prisma": "^6.3.1",

apps/frontend/src/components/Filters/Filters.tsx

@@ -53,7 +53,7 @@ export const Filters = <T, S extends FormikValues>({
                 </Button>
             </div>
             <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
-                <SheetContent>
+                <SheetContent closeLabel={filters.close}>
                     <SheetHeader>
                         <SheetTitle>{title}</SheetTitle>
                         {description && <SheetDescription>{description}</SheetDescription>}

apps/frontend/src/components/Footer/Footer.tsx

@@ -2,6 +2,7 @@
 
 import { useLocale } from 'next-intl';
 import Image from 'next/image';
+import { JSX } from 'react';
 
 import { Models } from '@o2s/framework/modules';
 
@@ -92,14 +93,18 @@ export const Footer: React.FC<FooterProps> = ({ data }) => {
 
     const AccordionItemTemplate = ({
         item,
+        tag,
         children,
     }: {
         item: Models.Navigation.NavigationGroup;
+        tag: keyof JSX.IntrinsicElements;
         children: React.ReactNode;
     }) => {
         return (
             <AccordionItem value={item.title} className="border-none">
-                <AccordionTrigger className={mobileNavigationItemClass}>{item.title}</AccordionTrigger>
+                <AccordionTrigger className={mobileNavigationItemClass} tag={tag}>
+                    {item.title}
+                </AccordionTrigger>
                 <AccordionContent className="p-0">{children}</AccordionContent>
             </AccordionItem>
         );
@@ -119,7 +124,7 @@ export const Footer: React.FC<FooterProps> = ({ data }) => {
 
     const NavigationGroup = ({ item }: { item: Models.Navigation.NavigationGroup }) => {
         return (
-            <AccordionItemTemplate item={item}>
+            <AccordionItemTemplate item={item} tag="h3">
                 <ul className="flex flex-col items-start gap-2 w-full pt-2 pl-3">
                     {item.items.map((item) => {
                         switch (item.__typename) {
@@ -129,7 +134,7 @@ export const Footer: React.FC<FooterProps> = ({ data }) => {
                                 return (
                                     <li key={item.title} className="w-full list-none">
                                         <Accordion type="multiple" className="flex flex-col gap-2">
-                                            <AccordionItemTemplate item={item}>
+                                            <AccordionItemTemplate item={item} tag="h4">
                                                 <ul className="flex flex-col items-start gap-2 w-full pt-2 pl-3">
                                                     {item.items.map((item) => {
                                                         if (item.__typename !== 'NavigationItem') {
@@ -194,7 +199,7 @@ export const Footer: React.FC<FooterProps> = ({ data }) => {
             <Separator />
             <div className="w-full m-auto max-w-7xl flex flex-col md:hidden">
                 <Accordion type="multiple" className="flex flex-col gap-2 p-2">
-                    <AccordionItemTemplate item={data as unknown as Models.Navigation.NavigationGroup}>
+                    <AccordionItemTemplate item={data as unknown as Models.Navigation.NavigationGroup} tag="h2">
                         <Accordion type="multiple" className="flex flex-col gap-2 pt-2 pl-3">
                             {data.items.map((item) => {
                                 switch (item.__typename) {

apps/frontend/src/components/Header/ContextSwitcher/ContextSwitcher.tsx

@@ -33,7 +33,7 @@ export const ContextSwitcher = ({ context }: ContextSwitcherProps) => {
                 </Button>
             </SheetTrigger>
 
-            <SheetContent>
+            <SheetContent closeLabel={context.close}>
                 <div className="flex flex-col gap-6">
                     <SheetHeader>
                         <SheetTitle asChild>

apps/frontend/src/components/Header/Header.tsx

@@ -82,6 +82,7 @@ export const Header: React.FC<HeaderProps> = ({ headerData, alternativeUrls, chi
                         userSlot={<UserSlot />}
                         items={headerData.items}
                         title={headerData.title}
+                        mobileMenuLabel={headerData.mobileMenuLabel}
                     />
                 </div>
             </>

apps/frontend/src/components/Header/MobileNavigation/MobileNavigation.tsx

@@ -27,6 +27,7 @@ export function MobileNavigation({
     userSlot,
     items,
     title,
+    mobileMenuLabel,
 }: MobileNavigationProps) {
     const locale = useLocale();
 
@@ -119,11 +120,15 @@ export function MobileNavigation({
                                 size="icon"
                                 className="h-10 w-10"
                                 onClick={() => setIsMenuOpen((prev) => !prev)}
+                                aria-label={mobileMenuLabel.open}
                             >
                                 {isMenuOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
                             </Button>
                         </SheetTrigger>
-                        <SheetContent className="max-w-full w-full md:max-w-sm sm:max-w-full">
+                        <SheetContent
+                            className="max-w-full w-full md:max-w-sm sm:max-w-full"
+                            closeLabel={mobileMenuLabel.close}
+                        >
                             <SheetHeader className="mt-2">
                                 <SheetTitle className="text-center sr-only" asChild>
                                     <Typography variant="h2" asChild>

apps/frontend/src/components/Header/MobileNavigation/MobileNavigation.types.ts

@@ -10,4 +10,5 @@ export interface MobileNavigationProps {
     userSlot?: ReactNode;
     items: CMS.Model.Header.Header['items'];
     title?: CMS.Model.Header.Header['title'];
+    mobileMenuLabel: CMS.Model.Header.Header['mobileMenuLabel'];
 }

apps/frontend/src/utils/seo.ts

@@ -36,7 +36,7 @@ export const generateSeo = ({
     alternates,
 }: SEOProps): Metadata => {
     const pageSlug = slug;
-    const url = `${SITE_URL}${locale === DEFAULT_LOCALE ? '' : `/${locale}`}${slug}`;
+    const url = `${SITE_URL}/${locale}${slug}`;
     const id = pageSlug.split('/')[2] || '';
 
     return {