From e9b03b293c4e56837c5c1eebbaa2360865afb0fd Mon Sep 17 00:00:00 2001
From: Tamas Kovacs <tamas.kovacs@instructure.com>
Date: Wed, 20 Nov 2024 12:24:38 +0100
Subject: [PATCH] chore(ui-progress): improve accessibilty on documentation
 main page

Closes: INSTUI-4263, INSTUI-4265, INSTUI-4272
---
 packages/__docs__/src/Header/index.tsx |  9 +---
 packages/__docs__/src/Hero/index.tsx   | 71 ++++++++++++++------------
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/packages/__docs__/src/Header/index.tsx b/packages/__docs__/src/Header/index.tsx
index cfb4392992..0009d8b906 100644
--- a/packages/__docs__/src/Header/index.tsx
+++ b/packages/__docs__/src/Header/index.tsx
@@ -154,13 +154,8 @@ class Header extends Component<HeaderProps> {
     )
 
     return (
-      <View
-        role="banner"
-        as="div"
-        margin="none none medium"
-        padding="none medium"
-      >
-        <Heading level="h2" as="h1">
+      <View as="div" margin="none none medium" padding="none medium">
+        <Heading level="h2" as="div">
           <Link href="#index" isWithinText={false} display="block">
             <View display="block" textAlign="center">
               {corpLogo}
diff --git a/packages/__docs__/src/Hero/index.tsx b/packages/__docs__/src/Hero/index.tsx
index 6065a6cd0b..b929d9b655 100644
--- a/packages/__docs__/src/Hero/index.tsx
+++ b/packages/__docs__/src/Hero/index.tsx
@@ -29,7 +29,7 @@ import { Button, IconButton } from '@instructure/ui-buttons'
 import { Flex } from '@instructure/ui-flex'
 import { Img } from '@instructure/ui-img'
 import { Link } from '@instructure/ui-link'
-import { List } from '@instructure/ui-list'
+import { InlineList, List } from '@instructure/ui-list'
 import { Text } from '@instructure/ui-text'
 import { View } from '@instructure/ui-view'
 import {
@@ -290,7 +290,7 @@ class Hero extends Component<HeroProps> {
     )
 
     const sidebarContent = (
-      <View as="aside">
+      <View as="div">
         <View as="div">
           <Flex>
             <Flex.Item>
@@ -453,37 +453,42 @@ class Hero extends Component<HeroProps> {
                       LMS.
                     </Text>
                   </View>
-
-                  <View as="p" margin="0">
-                    <Button
-                      withBackground={false}
-                      color="primary-inverse"
-                      href="#usage"
-                      margin="0 x-small x-small 0"
-                      size={bigScreen ? 'large' : 'medium'}
-                    >
-                      Developer Quick Start
-                    </Button>
-                    <Button
-                      withBackground={false}
-                      color="primary-inverse"
-                      renderIcon={IconGithubSolid as any}
-                      href="https://github.com/instructure/instructure-ui"
-                      size={bigScreen ? 'large' : 'medium'}
-                      margin="0 x-small x-small 0"
-                    >
-                      Github
-                    </Button>
-                    <Button
-                      focusColor="inverse"
-                      color="success"
-                      href="#v10-upgrade-guide"
-                      size={bigScreen ? 'large' : 'medium'}
-                      margin="0 x-small x-small 0"
-                    >
-                      10.0 Upgrade Guide
-                    </Button>
-                  </View>
+                  <InlineList margin="0">
+                    <InlineList.Item>
+                      <Button
+                        withBackground={false}
+                        color="primary-inverse"
+                        href="#usage"
+                        margin="0 x-small x-small 0"
+                        size={bigScreen ? 'large' : 'medium'}
+                      >
+                        Developer Quick Start
+                      </Button>
+                    </InlineList.Item>
+                    <InlineList.Item>
+                      <Button
+                        withBackground={false}
+                        color="primary-inverse"
+                        renderIcon={IconGithubSolid as any}
+                        href="https://github.com/instructure/instructure-ui"
+                        size={bigScreen ? 'large' : 'medium'}
+                        margin="0 x-small x-small 0"
+                      >
+                        Github
+                      </Button>
+                    </InlineList.Item>
+                    <InlineList.Item>
+                      <Button
+                        focusColor="inverse"
+                        color="success"
+                        href="#v10-upgrade-guide"
+                        size={bigScreen ? 'large' : 'medium'}
+                        margin="0 x-small x-small 0"
+                      >
+                        10.0 Upgrade Guide
+                      </Button>
+                    </InlineList.Item>
+                  </InlineList>
                 </View>
               </ContentWrap>
             </View>