refactor: enhance semantic HTML by adding ARIA roles to header, footer, and main elements

Author: cedric07

footer.php

@@ -1,5 +1,5 @@
-		</main>
-		<footer id="footer" tabindex="-1" class="footer" aria-label="<?php esc_attr_e( 'Footer', 'beapi-frontend-framework' ); ?>">
+</main>
+		<footer role="contentinfo" id="footer" tabindex="-1" class="footer" aria-label="<?php esc_attr_e( 'Footer', 'beapi-frontend-framework' ); ?>">
 
 		</footer>
 		<?php wp_footer(); ?>

header.php

@@ -41,7 +41,7 @@
 			</li>
 		</ul>
 	</nav>
-	<header id="header" class="header" aria-label="<?php esc_attr_e( 'Header', 'beapi-frontend-framework' ); ?>">
+	<header role="banner" id="header" class="header" aria-label="<?php esc_attr_e( 'Header', 'beapi-frontend-framework' ); ?>">
 		<div class="header__inner">
 			<div class="container">
 				<a class="header__logo-link" href="<?php echo esc_url( home_url( '/' ) ); ?>">
@@ -55,7 +55,7 @@
 						<span class="sr-only aria-expanded-true-text"><?php esc_html_e( 'Close the menu', 'beapi-frontend-framework' ); ?></span>
 					</button>
 
-					<nav id="menu" tabindex="-1" class="header__menu" aria-label="<?php esc_attr_e( 'Main navigation', 'beapi-frontend-framework' ); ?>">
+					<nav role="navigation" id="menu" tabindex="-1" class="header__menu" aria-label="<?php esc_attr_e( 'Main navigation', 'beapi-frontend-framework' ); ?>">
 						<div>
 							<?php
 							wp_nav_menu(
@@ -74,7 +74,7 @@
 			</div>
 		</div>
 	</header>
-	<main id="content" tabindex="-1" aria-label="<?php esc_attr_e( 'Main content', 'beapi-frontend-framework' ); ?>">
+	<main role="main" id="content" tabindex="-1" aria-label="<?php esc_attr_e( 'Main content', 'beapi-frontend-framework' ); ?>">
 	<?php
 	if ( ! is_front_page() && ! is_search() && ! is_404() ) {
 		get_template_part( 'components/parts/common/breadcrumb' );