Merge pull request #496 from Lemoncode/fixaccessibilitybug/#487-12-main-section-HTML

#487 12 main section html

Author: brauliodiez

src/pods/canvas/canvas.pod.tsx

@@ -233,7 +233,7 @@ export const CanvasPod: React.FC = () => {
   }, [modalDialog.isOpen, canvasSchema.selectedElementId]);
 
   return (
-    <div
+    <main
       className={classes.container}
       ref={containerRef}
       onScroll={handleScroll}
@@ -282,6 +282,6 @@ export const CanvasPod: React.FC = () => {
           />
         )}
       </div>
-    </div>
+    </main>
   );
 };

src/pods/footer/footer.component.tsx

@@ -29,11 +29,11 @@ export const FooterComponent: React.FC = () => {
       ? getFileNameCanvasIsPristine(filename, NEW_DOCUMENT_NAME)
       : getFileNameCanvasDirty(filename, NEW_DOCUMENT_NAME, ASTERISK);
   return (
-    <div className={classes.footerText}>
+    <footer className={classes.footerText}>
       <span>{isDevice ? documentNameMobile() : documentName()}</span>
       <button onClick={toggleTheme} className="mobile-only">
         {theme.themeMode === 'dark' ? <LightIcon /> : <DarkIcon />}
       </button>
-    </div>
+    </footer>
   );
 };

src/pods/toolbar/toolbar.pod.tsx

@@ -20,7 +20,7 @@ import classes from './toolbar.pod.module.css';
 
 export const ToolbarPod: React.FC = () => {
   return (
-    <div className={classes.container}>
+    <header className={classes.container}>
       <NewButton />
       <OpenButton />
       <SaveButton />
@@ -35,6 +35,6 @@ export const ToolbarPod: React.FC = () => {
       <CanvasSettingButton />
       <AboutButton />
       <ThemeToggleButton darkLabel="Dark Mode" lightLabel="Light Mode" />
-    </div>
+    </header>
   );
 };