fix banner landmark violations

grommet · Nov 19, 2024 · 6dc3c92 · 6dc3c92
1 parent df548b1
commit 6dc3c92
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 147 deletions.
diff --git a/aries-site/src/examples/templates/dashboards/DashboardExample.js b/aries-site/src/examples/templates/dashboards/DashboardExample.js
@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useState } from 'react';
-import { Box, Button, ResponsiveContext, Text } from 'grommet';
+import { Box, Main, Button, ResponsiveContext, Text } from 'grommet';
 import { defaultUser, GlobalHeader, UserContext } from '../global-header';
 import { DashboardGrid, DashboardFooter, Greeting } from '.';
 
@@ -19,29 +19,31 @@ export const DashboardExample = () => {
     <UserContext.Provider value={contextValue}>
       <Box width={{ max: 'xxlarge' }} margin="auto" fill>
         <GlobalHeader />
-        <Box overflow="auto">
-          <Box
-            background="background"
-            justify="center"
-            pad={{
-              horizontal: !['xsmall', 'small'].includes(size)
-                ? 'xlarge'
-                : 'medium',
-              vertical: 'large',
-            }}
-            flex={false}
-          >
-            {user ? (
-              <Box gap="large">
-                <Greeting />
-                <DashboardGrid />
-              </Box>
-            ) : (
-              <DemoPageContent />
-            )}
+        <Main>
+          <Box overflow="auto">
+            <Box
+              background="background"
+              justify="center"
+              pad={{
+                horizontal: !['xsmall', 'small'].includes(size)
+                  ? 'xlarge'
+                  : 'medium',
+                vertical: 'large',
+              }}
+              flex={false}
+            >
+              {user ? (
+                <Box gap="large">
+                  <Greeting />
+                  <DashboardGrid />
+                </Box>
+              ) : (
+                <DemoPageContent />
+              )}
+            </Box>
+            {user && <DashboardFooter />}
           </Box>
-          {user && <DashboardFooter />}
-        </Box>
+        </Main>
       </Box>
     </UserContext.Provider>
   );

diff --git a/aries-site/src/examples/templates/empty-state/CardEmptyState.js b/aries-site/src/examples/templates/empty-state/CardEmptyState.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Grid, Page, PageContent, PageHeader } from 'grommet';
+import { Box, Main, Grid, Page, PageContent, PageHeader } from 'grommet';
 import { Card } from '../Card';
 import { ErrorManagementEmptyState } from './ErrorManagementEmptyState';
 import { CostByMonth, CostByYear } from '../dashboards';
@@ -8,16 +8,18 @@ export const CardEmptyState = () => {
   return (
     <Page>
       <PageContent gap="medium">
-        <PageHeader title="Dashboard" />
-        <Grid columns="medium" gap="medium" fill>
-          <CostByMonth period="Last Year" />
-          <CostByYear period="Lifetime" />
-          <Card align="center" title="Cost by service" level={2}>
-            <Box pad={{ vertical: 'medium' }}>
-              <ErrorManagementEmptyState level={3} />
-            </Box>
-          </Card>
-        </Grid>
+        <PageHeader aria-label="dashboard view" title="Dashboard" />
+        <Main>
+          <Grid columns="medium" gap="medium" fill>
+            <CostByMonth period="Last Year" />
+            <CostByYear period="Lifetime" />
+            <Card align="center" title="Cost by service" level={2}>
+              <Box pad={{ vertical: 'medium' }}>
+                <ErrorManagementEmptyState level={3} />
+              </Box>
+            </Card>
+          </Grid>
+        </Main>
       </PageContent>
     </Page>
   );

diff --git a/aries-site/src/examples/templates/empty-state/PageEmptyState.js b/aries-site/src/examples/templates/empty-state/PageEmptyState.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageHeader, Page, PageContent } from 'grommet';
+import { PageHeader, Main, Page, PageContent } from 'grommet';
 
 import { ListingEmptyState } from './ListingEmptyState';
 
@@ -8,7 +8,9 @@ export const PageEmptyState = ({ ...rest }) => {
     <Page>
       <PageContent gap="medium">
         <PageHeader title="Page title" subtitle="Description about the page." />
-        <ListingEmptyState {...rest} />
+        <Main>
+          <ListingEmptyState {...rest} />
+        </Main>
       </PageContent>
     </Page>
   );

diff --git a/aries-site/src/examples/templates/forms/managing-child-objects/CreateCluster.js b/aries-site/src/examples/templates/forms/managing-child-objects/CreateCluster.js
@@ -43,11 +43,11 @@ const INPUT_MAP = {
       name={`hosts[${index}].host`}
       label="Host address"
       required
-      aria-required="true"
     >
       <TextInput
         id={`hosts[${index}].host`}
         name={`hosts[${index}].host`}
+        aria-required="true"
         {...rest}
       />
     </FormField>
@@ -59,12 +59,12 @@ const INPUT_MAP = {
         name={`hosts[${index}].cpu`}
         label="CPU cores"
         required
-        aria-required="true"
       >
         <Select
           id={`hosts[${index}].cpu`}
           name={`hosts[${index}].cpu`}
           options={[2, 4, 6, 8]}
+          aria-required="true"
           {...rest}
         />
       </FormField>
@@ -78,12 +78,12 @@ const INPUT_MAP = {
         name={`hosts[${index}].memory`}
         label="Memory (GB)"
         required
-        aria-required="true"
       >
         <Select
           id={`hosts[${index}].memory`}
           name={`hosts[${index}].memory`}
           options={[32, 64, 128, 256, 512]}
+          aria-required="true"
           {...rest}
         />
       </FormField>
@@ -152,9 +152,12 @@ export const CreateCluster = () => {
               name="cluster-name"
               label="Cluster name"
               required
-              aria-required="true"
             >
-              <TextInput id="cluster-name" name="cluster-name" />
+              <TextInput
+                aria-required="true"
+                id="cluster-name"
+                name="cluster-name"
+              />
             </FormField>
             <FormField
               htmlFor="resource-manager"

diff --git a/aries-site/src/examples/templates/forms/managing-child-objects/EditRole.js b/aries-site/src/examples/templates/forms/managing-child-objects/EditRole.js
@@ -4,6 +4,7 @@ import {
   Button,
   Form,
   FormField,
+  Main,
   Heading,
   Select,
   TextInput,
@@ -110,54 +111,56 @@ export const EditRole = () => {
       <Heading level={2} margin="none">
         Edit role
       </Heading>
-      <Form
-        value={formValues}
-        onChange={onChange}
-        onSubmit={onSubmit}
-        validate="blur"
-        messages={{
-          required: 'This is a required field.',
-        }}
-      >
-        <Box gap="medium">
-          <FormField
-            htmlFor="role-name"
-            name="role-name"
-            label="Role name"
-            required
-          >
-            <TextInput id="role-name" name="role-name" />
-          </FormField>
-          <Box gap="small">
-            <Heading level={3} margin="none">
-              Permissions
-            </Heading>
-            <FormChildObjects
-              collection={{
-                name: 'Permissions',
-                itemName: 'permission',
-                parentName: 'role',
-              }}
-              fields={INPUT_MAP}
-              headingLevel={4}
-              onAdd={handleAdd}
-              onRemove={handleRemove}
-              onRemoveAll={handleRemoveAll}
-              primaryKey="name"
-              summarize={[{ name: 'access', showName: false }]}
-              values={formValues.permissions}
-            />
+      <Main>
+        <Form
+          value={formValues}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          validate="blur"
+          messages={{
+            required: 'This is a required field.',
+          }}
+        >
+          <Box gap="medium">
+            <FormField
+              htmlFor="role-name"
+              name="role-name"
+              label="Role name"
+              required
+            >
+              <TextInput id="role-name" name="role-name" />
+            </FormField>
+            <Box gap="small">
+              <Heading level={3} margin="none">
+                Permissions
+              </Heading>
+              <FormChildObjects
+                collection={{
+                  name: 'Permissions',
+                  itemName: 'permission',
+                  parentName: 'role',
+                }}
+                fields={INPUT_MAP}
+                headingLevel={4}
+                onAdd={handleAdd}
+                onRemove={handleRemove}
+                onRemoveAll={handleRemoveAll}
+                primaryKey="name"
+                summarize={[{ name: 'access', showName: false }]}
+                values={formValues.permissions}
+              />
+            </Box>
+            <ButtonGroup pad={{ top: 'medium' }}>
+              <Button label="Save role" primary type="submit" />
+              <Button
+                label="Cancel"
+                a11yTitle="Cancel role changes"
+                onClick={() => {}}
+              />
+            </ButtonGroup>
           </Box>
-          <ButtonGroup pad={{ top: 'medium' }}>
-            <Button label="Save role" primary type="submit" />
-            <Button
-              label="Cancel"
-              a11yTitle="Cancel role changes"
-              onClick={() => {}}
-            />
-          </ButtonGroup>
-        </Box>
-      </Form>
+        </Form>
+      </Main>
     </Box>
   );
 };