Skip to content

Commit e9b03b2

Browse files
committed
chore(ui-progress): improve accessibilty on documentation main page
Closes: INSTUI-4263, INSTUI-4265, INSTUI-4272
1 parent 34fb8e0 commit e9b03b2

File tree

2 files changed

+40
-40
lines changed

2 files changed

+40
-40
lines changed

packages/__docs__/src/Header/index.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -154,13 +154,8 @@ class Header extends Component<HeaderProps> {
154154
)
155155

156156
return (
157-
<View
158-
role="banner"
159-
as="div"
160-
margin="none none medium"
161-
padding="none medium"
162-
>
163-
<Heading level="h2" as="h1">
157+
<View as="div" margin="none none medium" padding="none medium">
158+
<Heading level="h2" as="div">
164159
<Link href="#index" isWithinText={false} display="block">
165160
<View display="block" textAlign="center">
166161
{corpLogo}

packages/__docs__/src/Hero/index.tsx

Lines changed: 38 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { Button, IconButton } from '@instructure/ui-buttons'
2929
import { Flex } from '@instructure/ui-flex'
3030
import { Img } from '@instructure/ui-img'
3131
import { Link } from '@instructure/ui-link'
32-
import { List } from '@instructure/ui-list'
32+
import { InlineList, List } from '@instructure/ui-list'
3333
import { Text } from '@instructure/ui-text'
3434
import { View } from '@instructure/ui-view'
3535
import {
@@ -290,7 +290,7 @@ class Hero extends Component<HeroProps> {
290290
)
291291

292292
const sidebarContent = (
293-
<View as="aside">
293+
<View as="div">
294294
<View as="div">
295295
<Flex>
296296
<Flex.Item>
@@ -453,37 +453,42 @@ class Hero extends Component<HeroProps> {
453453
LMS.
454454
</Text>
455455
</View>
456-
457-
<View as="p" margin="0">
458-
<Button
459-
withBackground={false}
460-
color="primary-inverse"
461-
href="#usage"
462-
margin="0 x-small x-small 0"
463-
size={bigScreen ? 'large' : 'medium'}
464-
>
465-
Developer Quick Start
466-
</Button>
467-
<Button
468-
withBackground={false}
469-
color="primary-inverse"
470-
renderIcon={IconGithubSolid as any}
471-
href="https://github.com/instructure/instructure-ui"
472-
size={bigScreen ? 'large' : 'medium'}
473-
margin="0 x-small x-small 0"
474-
>
475-
Github
476-
</Button>
477-
<Button
478-
focusColor="inverse"
479-
color="success"
480-
href="#v10-upgrade-guide"
481-
size={bigScreen ? 'large' : 'medium'}
482-
margin="0 x-small x-small 0"
483-
>
484-
10.0 Upgrade Guide
485-
</Button>
486-
</View>
456+
<InlineList margin="0">
457+
<InlineList.Item>
458+
<Button
459+
withBackground={false}
460+
color="primary-inverse"
461+
href="#usage"
462+
margin="0 x-small x-small 0"
463+
size={bigScreen ? 'large' : 'medium'}
464+
>
465+
Developer Quick Start
466+
</Button>
467+
</InlineList.Item>
468+
<InlineList.Item>
469+
<Button
470+
withBackground={false}
471+
color="primary-inverse"
472+
renderIcon={IconGithubSolid as any}
473+
href="https://github.com/instructure/instructure-ui"
474+
size={bigScreen ? 'large' : 'medium'}
475+
margin="0 x-small x-small 0"
476+
>
477+
Github
478+
</Button>
479+
</InlineList.Item>
480+
<InlineList.Item>
481+
<Button
482+
focusColor="inverse"
483+
color="success"
484+
href="#v10-upgrade-guide"
485+
size={bigScreen ? 'large' : 'medium'}
486+
margin="0 x-small x-small 0"
487+
>
488+
10.0 Upgrade Guide
489+
</Button>
490+
</InlineList.Item>
491+
</InlineList>
487492
</View>
488493
</ContentWrap>
489494
</View>

0 commit comments

Comments
 (0)