diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js
index e3e1cb912bf..83e8a9b646b 100644
--- a/src-docs/src/components/guide_page/guide_page.js
+++ b/src-docs/src/components/guide_page/guide_page.js
@@ -92,7 +92,6 @@ const GuidePageComponent = ({
       </EuiPageHeader>
 
       <EuiPageContent
-        role="main"
         hasShadow={false}
         paddingSize="none"
         color="transparent"
diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js
index b5abf6e1bdc..8dad801f5c6 100644
--- a/src-docs/src/views/bottom_bar/bottom_bar_example.js
+++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js
@@ -73,8 +73,8 @@ export const BottomBarExample = {
       text: (
         <>
           <p>
-            Bottom bars default to a fixed position, in a portal at the
-            bottom of the browser window. Alternatively, you can change the{' '}
+            Bottom bars default to a fixed position, in a portal at the bottom
+            of the browser window. Alternatively, you can change the{' '}
             <EuiCode>position</EuiCode> to <EuiCode>sticky</EuiCode> where it
             will render in place but stick to the window only as the window edge
             nears. The <EuiCode>static</EuiCode> position reverts back to
diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js
index 2d983bfe088..d917a20adcc 100644
--- a/src-docs/src/views/home/home_view.js
+++ b/src-docs/src/views/home/home_view.js
@@ -29,7 +29,6 @@ import { Link } from 'react-router-dom';
 
 export const HomeView = () => (
   <EuiPageContent
-    role="main"
     hasShadow={false}
     hasBorder={false}
     paddingSize="none"
diff --git a/src-docs/src/views/page/page.js b/src-docs/src/views/page/page.js
index 2d675977e15..967ca093ee7 100644
--- a/src-docs/src/views/page/page.js
+++ b/src-docs/src/views/page/page.js
@@ -24,7 +24,7 @@ export default () => (
           <EuiButton>Do something</EuiButton>,
         ]}
       />
-      <EuiPageContent role="main">
+      <EuiPageContent>
         <EuiTitle>
           <h2>Content title</h2>
         </EuiTitle>
diff --git a/src-docs/src/views/page/page_bottom_bar.js b/src-docs/src/views/page/page_bottom_bar.js
index c98afaca987..fc40a28c61e 100644
--- a/src-docs/src/views/page/page_bottom_bar.js
+++ b/src-docs/src/views/page/page_bottom_bar.js
@@ -26,7 +26,6 @@ export default ({ button = <></>, content, sideNav, bottomBar }) => {
             rightSideItems={[button]}
           />
           <EuiPageContent
-            role="main"
             hasBorder={false}
             hasShadow={false}
             paddingSize="none"
diff --git a/src-docs/src/views/page/page_centered_body.js b/src-docs/src/views/page/page_centered_body.js
index 733e2a4cfd2..7505c052f3f 100644
--- a/src-docs/src/views/page/page_centered_body.js
+++ b/src-docs/src/views/page/page_centered_body.js
@@ -15,7 +15,6 @@ export default ({ button = <></>, content, sideNav }) => {
 
       <EuiPageBody paddingSize="l">
         <EuiPageContent
-          role="main"
           verticalPosition="center"
           horizontalPosition="center"
           paddingSize="none">
diff --git a/src-docs/src/views/page/page_centered_content.js b/src-docs/src/views/page/page_centered_content.js
index cbf95740847..aa4164dba0e 100644
--- a/src-docs/src/views/page/page_centered_content.js
+++ b/src-docs/src/views/page/page_centered_content.js
@@ -22,7 +22,6 @@ export default ({ button = <></>, content, sideNav }) => (
       />
 
       <EuiPageContent
-        role="main"
         verticalPosition="center"
         horizontalPosition="center"
         paddingSize="none"
diff --git a/src-docs/src/views/page/page_new.js b/src-docs/src/views/page/page_new.js
index 6d87c9cafef..aded8c5833d 100644
--- a/src-docs/src/views/page/page_new.js
+++ b/src-docs/src/views/page/page_new.js
@@ -22,7 +22,6 @@ export default ({ button = <></>, content, sideNav }) => (
         tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}
       />
       <EuiPageContent
-        role="main"
         hasBorder={false}
         hasShadow={false}
         paddingSize="none"
diff --git a/src-docs/src/views/page/page_restricting_width.js b/src-docs/src/views/page/page_restricting_width.js
index 1cc4caf2a0e..88a65719d5f 100644
--- a/src-docs/src/views/page/page_restricting_width.js
+++ b/src-docs/src/views/page/page_restricting_width.js
@@ -24,7 +24,6 @@ export default ({ button = <></>, content, sideNav }) => {
         />
 
         <EuiPageContent
-          role="main"
           hasBorder={false}
           hasShadow={false}
           paddingSize="none"
diff --git a/src-docs/src/views/page/page_simple.js b/src-docs/src/views/page/page_simple.js
index c4ba5f47b7a..547e5ca043f 100644
--- a/src-docs/src/views/page/page_simple.js
+++ b/src-docs/src/views/page/page_simple.js
@@ -17,11 +17,7 @@ export default ({ button = <></>, content }) => (
         rightSideItems={[button]}
         tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}
       />
-      <EuiPageContent
-        role="main"
-        borderRadius="none"
-        hasShadow={false}
-        paddingSize="none">
+      <EuiPageContent borderRadius="none" hasShadow={false} paddingSize="none">
         <EuiPageContentBody restrictWidth paddingSize="l">
           {content}
         </EuiPageContentBody>
diff --git a/src-docs/src/views/page/page_simple_content_body.js b/src-docs/src/views/page/page_simple_content_body.js
index 09d482f9166..9ce36859663 100644
--- a/src-docs/src/views/page/page_simple_content_body.js
+++ b/src-docs/src/views/page/page_simple_content_body.js
@@ -12,7 +12,6 @@ export default ({ button = <></>, content }) => {
     <EuiPage paddingSize="none">
       <EuiPageBody paddingSize="l">
         <EuiPageContent
-          role="main"
           verticalPosition="center"
           horizontalPosition="center"
           paddingSize="none">
diff --git a/src-docs/src/views/page/page_simple_empty_content.js b/src-docs/src/views/page/page_simple_empty_content.js
index 55c5ea6b28c..d9ef831acb9 100644
--- a/src-docs/src/views/page/page_simple_empty_content.js
+++ b/src-docs/src/views/page/page_simple_empty_content.js
@@ -23,7 +23,6 @@ export default ({ button = <></>, content }) => (
         hasShadow={false}
         style={{ display: 'flex' }}>
         <EuiPageContent
-          role="main"
           verticalPosition="center"
           horizontalPosition="center"
           paddingSize="none"
diff --git a/src/components/page/__snapshots__/page_template.test.tsx.snap b/src/components/page/__snapshots__/page_template.test.tsx.snap
index 5ce39e05b40..59eef1154c5 100644
--- a/src/components/page/__snapshots__/page_template.test.tsx.snap
+++ b/src/components/page/__snapshots__/page_template.test.tsx.snap
@@ -92,6 +92,7 @@ exports[`EuiPageTemplate template centeredContent is rendered 1`] = `
   >
     <div
       class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
       style="display:flex"
     >
       <div
@@ -202,6 +203,7 @@ exports[`EuiPageTemplate template is rendered with pageBodyProps 3`] = `
   >
     <div
       class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
       style="display:flex"
     >
       <div
@@ -293,6 +295,7 @@ exports[`EuiPageTemplate template is rendered with pageContentBodyProps 3`] = `
   >
     <div
       class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
       style="display:flex"
     >
       <div
@@ -386,6 +389,7 @@ exports[`EuiPageTemplate template is rendered with pageContentProps 3`] = `
   >
     <div
       class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
       style="display:flex"
     >
       <div
@@ -493,6 +497,7 @@ exports[`EuiPageTemplate template is rendered with pageHeader 3`] = `
     />
     <div
       class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
       style="display:flex"
     >
       <div
@@ -585,6 +590,7 @@ exports[`EuiPageTemplate template paddingSize is rendered 3`] = `
   >
     <div
       class="euiPanel euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
       style="display:flex"
     >
       <div
diff --git a/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap b/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap
index a3eb77316cd..111fc897a81 100644
--- a/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap
+++ b/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap
@@ -5,5 +5,6 @@ exports[`EuiPageContent is rendered 1`] = `
   aria-label="aria-label"
   class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent testClass1 testClass2"
   data-test-subj="test subject string"
+  role="main"
 />
 `;
diff --git a/src/components/page/page_content/page_content.tsx b/src/components/page/page_content/page_content.tsx
index 8650547b8fa..4110e2f06f4 100644
--- a/src/components/page/page_content/page_content.tsx
+++ b/src/components/page/page_content/page_content.tsx
@@ -56,8 +56,11 @@ export const EuiPageContent: FunctionComponent<EuiPageContentProps> = ({
   borderRadius,
   children,
   className,
+  role: _role,
   ...rest
 }) => {
+  // EuiPanel switches to a button element if onClick is provided
+  const role = _role ?? rest.onClick ? undefined : 'main';
   const borderRadiusClass =
     borderRadius === 'none' ? 'euiPageContent--borderRadiusNone' : '';
 
@@ -76,6 +79,7 @@ export const EuiPageContent: FunctionComponent<EuiPageContentProps> = ({
       className={classes}
       paddingSize={panelPaddingSize ?? paddingSize}
       borderRadius={borderRadius}
+      role={role}
       {...rest}>
       {children}
     </EuiPanel>
diff --git a/src/components/page/page_template.tsx b/src/components/page/page_template.tsx
index b2a52a376ca..428ae8008c8 100644
--- a/src/components/page/page_template.tsx
+++ b/src/components/page/page_template.tsx
@@ -139,7 +139,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
               <EuiPageHeader restrictWidth={restrictWidth} {...pageHeader} />
             )}
             <EuiPageContent
-              role="main"
               verticalPosition="center"
               horizontalPosition="center"
               paddingSize={paddingSize}
@@ -165,7 +164,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
             {/* Extra page body to get the correct alignment and padding of the centered EuiPageContent */}
             <EuiPageBody paddingSize={paddingSize}>
               <EuiPageContent
-                role="main"
                 verticalPosition="center"
                 horizontalPosition="center"
                 paddingSize={paddingSize}
@@ -197,7 +195,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
               <EuiPageHeader restrictWidth={restrictWidth} {...pageHeader} />
             )}
             <EuiPageContent
-              role="main"
               verticalPosition="center"
               horizontalPosition="center"
               hasShadow={false}
@@ -229,7 +226,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
               paddingSize={paddingSize}
               style={{ display: 'flex' }}>
               <EuiPageContent
-                role="main"
                 verticalPosition="center"
                 horizontalPosition="center"
                 hasShadow={false}
@@ -263,7 +259,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
               <EuiPageHeader restrictWidth={restrictWidth} {...pageHeader} />
             )}
             <EuiPageContent
-              role="main"
               hasBorder={false}
               hasShadow={false}
               paddingSize={'none'}
@@ -290,7 +285,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
               />
             )}
             <EuiPageContent
-              role="main"
               hasBorder={false}
               hasShadow={false}
               paddingSize={'none'}
@@ -346,7 +340,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
                 />
               )}
               <EuiPageContent
-                role="main"
                 hasShadow={false}
                 hasBorder={false}
                 color={'transparent'}
@@ -374,7 +367,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
               />
             )}
             <EuiPageContent
-              role="main"
               hasBorder={pageHeader === undefined ? false : undefined}
               hasShadow={false}
               paddingSize={'none'}