(fix): define top-level ARIA landmark regions to improve accessibility (#18672)

references #18671

core/src/components/content/content.tsx

@@ -319,7 +319,7 @@ export class Content implements ComponentInterface {
           '--offset-bottom': `${this.cBottom}px`,
         }}
       >
-        <div
+        <main
           class={{
             'inner-scroll': true,
             'scroll-x': scrollX,
@@ -330,13 +330,15 @@ export class Content implements ComponentInterface {
           onScroll={ev => this.onScroll(ev)}
         >
           <slot></slot>
-        </div>
+        </main>
+
         {transitionShadow ? (
           <div class="transition-effect">
             <div class="transition-cover"></div>
             <div class="transition-shadow"></div>
           </div>
         ) : null}
+
         <slot name="fixed"></slot>
       </Host>
     );

core/src/components/footer/footer.tsx

@@ -27,6 +27,7 @@ export class Footer implements ComponentInterface {
   hostData() {
     const mode = getIonMode(this);
     return {
+      role: 'contentinfo',
       class: {
         [mode]: true,
 

core/src/components/header/header.tsx

@@ -27,6 +27,7 @@ export class Header implements ComponentInterface {
   hostData() {
     const mode = getIonMode(this);
     return {
+      role: 'banner',
       class: {
         [mode]: true,