Clean up declaration and add doc

app/(editor)/editor/layout.tsx

@@ -1,5 +1,5 @@
 import StoryblokProvider from '@/components/StoryblokProvider';
-import { Sa11yInit } from '@/components/Sa11y/Sa11y';
+import { Sa11yInit } from '@/components/Sa11yInit';
 
 type StoryblokLayoutProps = {
   children: React.ReactNode,

components/Sa11y/Sa11y.tsx → components/Sa11yInit/Sa11yInit.tsx

@@ -7,7 +7,13 @@ export const Sa11yInit: React.FC = () => {
   useEffect(() => {
     if (typeof window !== 'undefined') {
       (async () => {
-        // Dynamically import Sa11y and related dependencies
+        /**
+         * Dynamically import the Sa11y library and dependencies to avoid "ReferenceError: HTMLElement is not defined".
+         * The error occurs because the Sa11y library or its imports rely on the HTMLElement API,
+         * which is not available in the Node.js runtime where the server-side rendering (SSR) of Next.js occurs.
+         * Simply using useEffect with the window !== 'undefined' check
+         * does not prevent the code from being imported during the SSR phase.
+         */
         const { Sa11y, Lang } = await import('sa11y/dist/js/sa11y.esm.js');
         const { default: Sa11yLangEn } = await import('sa11y/dist/js/lang/en.js');
 

components/Sa11yInit/index.ts

@@ -0,0 +1 @@
+export * from './Sa11yInit';

types/sa11y.d.ts

@@ -1,11 +1,2 @@
-import Sa11yLangEn from 'sa11y/dist/js/lang/en.js';
-
-declare module 'sa11y/dist/js/sa11y.esm.js' {
-  export const Sa11y: unknown;
-  export const Lang: unknown;
-}
-
-declare module 'sa11y/dist/js/lang/en.js' {
-  const Sa11yLangEn: unknown;
-  export default Sa11yLangEn;
-}
+declare module 'sa11y/dist/js/sa11y.esm.js';
+declare module 'sa11y/dist/js/lang/en.js';