Fix accessibility issues on dashboard examples (#5866)

Author: jcfilben

apps/docs/src/examples/templates/dashboards/DashboardExample.js

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useState } from 'react';
-import { Box, Button, Text, Page, PageContent } from 'grommet';
+import { Box, Button, Text, Page, PageContent, Main } from 'grommet';
 import { defaultUser, GlobalHeader, UserContext } from '../global-header';
 import { DashboardGrid, DashboardFooter, Greeting } from '.';
 
@@ -17,23 +17,25 @@ export const DashboardExample = () => {
   return (
     <UserContext.Provider value={contextValue}>
       <GlobalHeader />
-      <Page background="background-back">
-        <Box overflow="auto">
-          <PageContent>
-            <Box flex={false}>
-              {user ? (
-                <Box gap="xlarge">
-                  <Greeting />
-                  <DashboardGrid />
-                </Box>
-              ) : (
-                <DemoPageContent />
-              )}
-            </Box>
-            {user && <DashboardFooter />}
-          </PageContent>
-        </Box>
-      </Page>
+      <Main>
+        <Page background="background-back">
+          <Box overflow="auto">
+            <PageContent>
+              <Box flex={false}>
+                {user ? (
+                  <Box gap="xlarge">
+                    <Greeting />
+                    <DashboardGrid />
+                  </Box>
+                ) : (
+                  <DemoPageContent />
+                )}
+              </Box>
+              {user && <DashboardFooter />}
+            </PageContent>
+          </Box>
+        </Page>
+      </Main>
     </UserContext.Provider>
   );
 };

apps/docs/src/examples/templates/dashboards/ThreeColumnDashboard.js

@@ -1,7 +1,7 @@
 import { useContext, useState } from 'react';
 import {
   Grid,
-  // Main,
+  Main,
   ResponsiveContext,
   Page,
   PageContent,
@@ -14,12 +14,14 @@ import { CostByMonth, CostByService, CostByYear, RulesAudit } from './content';
 export const ThreeColumnDashboard = () => (
   <AppContainer background="background-back">
     <ContentArea title="Global Header" />
-    <Page pad={{ bottom: '3xlarge' }}>
-      <PageContent gap="xlarge">
-        <PageHeader title="Dashboard" />
-        <Content />
-      </PageContent>
-    </Page>
+    <Main>
+      <Page pad={{ bottom: '3xlarge' }}>
+        <PageContent gap="xlarge">
+          <PageHeader title="Dashboard" />
+          <Content />
+        </PageContent>
+      </Page>
+    </Main>
     <ContentArea title="Global Footer" />
   </AppContainer>
 );

apps/docs/src/examples/templates/dashboards/TwoColumnDashboard.js

@@ -4,7 +4,7 @@ import {
   Box,
   Grid,
   Heading,
-  // Main,
+  Main,
   ResponsiveContext,
   Page,
   PageContent,
@@ -94,48 +94,49 @@ const Content = () => {
   const size = useContext(ResponsiveContext);
 
   return (
-    // Main is commented out for this example, but should be used in a
-    // real application.
-    // <Main>
-    <Grid columns={parentGrid.columns[size]} gap={parentGrid.gap[size]}>
-      {/* RecentActivity is top priority content. At narrow breakpoints, 
+    <Main>
+      <Grid columns={parentGrid.columns[size]} gap={parentGrid.gap[size]}>
+        {/* RecentActivity is top priority content. At narrow breakpoints, 
         place as first content element. Otherwise, place in second column. */}
-      {['xsmall', 'small'].includes(size) && <RecentActivity />}
-      <Box gap="xlarge">
-        <Box gap="xsmall">
-          <Heading level={2} margin="none">
-            Servers
-          </Heading>
-          <Grid columns={firstChildGrid.columns[size]} gap={firstChildGrid.gap}>
-            <ServerHealth />
-            <ServerAttention />
-          </Grid>
-        </Box>
-        <Box gap="xsmall">
-          <Heading level={2} margin="none">
-            Firmware
-          </Heading>
-          <Grid
-            columns={secondChildGrid.columns[size]}
-            rows={secondChildGrid.rows}
-            areas={secondChildGrid.areas[size]}
-            gap={secondChildGrid.gap}
-          >
-            <FirmwareStatus gridArea="firmwareStatus" />
-            <UpdatesAvaliable gridArea="firmwareUpdates" />
-            <FirmwareBaselines gridArea="firmwareBaselines" />
-          </Grid>
-        </Box>
-      </Box>
-      {!['xsmall', 'small'].includes(size) && (
+        {['xsmall', 'small'].includes(size) && <RecentActivity />}
         <Box gap="xlarge">
-          {/* fragment is used to create a gap spacing element 
-            for alignment to column 1 */}
-          <></>
-          <RecentActivity />
+          <Box gap="xsmall">
+            <Heading level={2} margin="none">
+              Servers
+            </Heading>
+            <Grid
+              columns={firstChildGrid.columns[size]}
+              gap={firstChildGrid.gap}
+            >
+              <ServerHealth />
+              <ServerAttention />
+            </Grid>
+          </Box>
+          <Box gap="xsmall">
+            <Heading level={2} margin="none">
+              Firmware
+            </Heading>
+            <Grid
+              columns={secondChildGrid.columns[size]}
+              rows={secondChildGrid.rows}
+              areas={secondChildGrid.areas[size]}
+              gap={secondChildGrid.gap}
+            >
+              <FirmwareStatus gridArea="firmwareStatus" />
+              <UpdatesAvaliable gridArea="firmwareUpdates" />
+              <FirmwareBaselines gridArea="firmwareBaselines" />
+            </Grid>
+          </Box>
         </Box>
-      )}
-    </Grid>
-    // </Main>
+        {!['xsmall', 'small'].includes(size) && (
+          <Box gap="xlarge">
+            {/* fragment is used to create a gap spacing element 
+            for alignment to column 1 */}
+            <></>
+            <RecentActivity />
+          </Box>
+        )}
+      </Grid>
+    </Main>
   );
 };