Skip to content

Commit f1c98b3

Browse files
yeion7CompuIves
yeion7
authored and
CompuIves
committed
home a11y (codesandbox#2718)
* use nav * use footer * banner a11y * templates a11y * share click a11y * there more section * who using
1 parent 910a695 commit f1c98b3

File tree

24 files changed

+334
-213
lines changed

24 files changed

+334
-213
lines changed

‎packages/common/src/components/Footer.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ export default () => (
6262
<Background id="footer">
6363
<MaxWidth width={1280}>
6464
<>
65-
<Container>
66-
<Column>
67-
<Title>CodeSandbox</Title>
65+
<Container as="footer">
66+
<Column as="nav" aria-labelledby="codesandbox-footer">
67+
<Title id="codesandbox-footer">CodeSandbox</Title>
6868
<List>
6969
<li>
7070
<a href="/s" target="_blank" rel="noopener noreferrer">
@@ -106,8 +106,8 @@ export default () => (
106106
</List>
107107
</Column>
108108

109-
<Column>
110-
<Title>About</Title>
109+
<Column as="nav" aria-labelledby="about-footer">
110+
<Title id="about-footer">About</Title>
111111
<List>
112112
<li>
113113
<a href="/blog" target="_blank" rel="noopener noreferrer">
@@ -135,8 +135,8 @@ export default () => (
135135
</List>
136136
</Column>
137137

138-
<Column>
139-
<Title>Social</Title>
138+
<Column as="nav" aria-labelledby="social-footer">
139+
<Title id="social-footer">Social</Title>
140140
<List>
141141
<li>
142142
<a

‎packages/common/src/components/Navigation/index.tsx‎

Lines changed: 70 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,18 @@ const Image = styled.img`
101101
margin-bottom: 0;
102102
`;
103103

104+
const Ul = styled.ul`
105+
list-style: none;
106+
margin: 0;
107+
display: flex;
108+
align-items: center;
109+
flex: auto;
110+
`;
111+
112+
const Li = styled.li`
113+
margin: 0;
114+
`;
115+
104116
export default class Navigation extends React.PureComponent {
105117
state = {
106118
user: null,
@@ -133,7 +145,7 @@ export default class Navigation extends React.PureComponent {
133145
const { user } = this.state;
134146
return (
135147
<MaxWidth width={1440}>
136-
<Container>
148+
<Container as="nav" aria-label="main">
137149
<Left>
138150
<a href="/">
139151
<StyledLogo
@@ -143,49 +155,66 @@ export default class Navigation extends React.PureComponent {
143155
/>
144156
</a>
145157

146-
<Item href="/explore">Explore</Item>
147-
<Item href="/search">Search</Item>
148-
<Item href="/docs">Docs</Item>
149-
150-
<Item href="/blog">Blog</Item>
151-
152-
<Item
153-
href="https://github.com/codesandbox/codesandbox-client"
154-
target="_blank"
155-
rel="noopener noreferrer"
156-
hideOn={970}
157-
>
158-
GitHub
159-
</Item>
160-
161-
<Item href="/jobs">Careers</Item>
158+
<Ul>
159+
<Li>
160+
<Item href="/explore">Explore</Item>
161+
</Li>
162+
<Li>
163+
<Item href="/search">Search</Item>
164+
</Li>
165+
<Li>
166+
<Item href="/docs">Docs</Item>
167+
</Li>
168+
<Li>
169+
<Item href="/blog">Blog</Item>
170+
</Li>
171+
<Li>
172+
<Item
173+
href="https://github.com/codesandbox/codesandbox-client"
174+
target="_blank"
175+
rel="noopener noreferrer"
176+
hideOn={970}
177+
>
178+
GitHub
179+
</Item>
180+
</Li>
181+
<Li>
182+
<Item href="/jobs">Careers</Item>
183+
</Li>
184+
</Ul>
162185
</Left>
163186

164187
<Right>
165-
{!user && (
166-
<Item hideOn={875} href="/signin">
167-
Sign In
168-
</Item>
169-
)}
170-
171-
<Item
172-
onClick={() => {
173-
track('Navigation - Create Sandbox Clicked');
174-
}}
175-
hidePhone
176-
href="/s"
177-
rel="noopener noreferrer"
178-
button={!user}
179-
>
180-
Create Sandbox
181-
</Item>
182-
183-
{user && (
184-
<Item hidePhone href="/dashboard" rel="noopener noreferrer">
185-
{user.username}
186-
<Image alt={user.username} src={user.avatar_url} />
187-
</Item>
188-
)}
188+
<Ul>
189+
{!user && (
190+
<Li>
191+
<Item hideOn={875} href="/signin">
192+
Sign In
193+
</Item>
194+
</Li>
195+
)}
196+
<Li>
197+
<Item
198+
onClick={() => {
199+
track('Navigation - Create Sandbox Clicked');
200+
}}
201+
hidePhone
202+
href="/s"
203+
rel="noopener noreferrer"
204+
button={!user}
205+
>
206+
Create Sandbox
207+
</Item>
208+
</Li>
209+
{user && (
210+
<Li>
211+
<Item hidePhone href="/dashboard" rel="noopener noreferrer">
212+
{user.username}
213+
<Image alt={user.username} src={user.avatar_url} />
214+
</Item>
215+
</Li>
216+
)}
217+
</Ul>
189218
</Right>
190219
</Container>
191220
</MaxWidth>

‎packages/homepage/src/components/Companies.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import React from 'react';
22
import styled from 'styled-components';
33
import shuffleArray from '../utils/shuffleArray';
44

5-
const Grid = styled.section`
5+
const Grid = styled.ul`
66
display: grid;
77
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
88
grid-gap: 30px;
99
align-items: center;
1010
margin-top: 60px;
11+
margin-left: 0;
12+
list-style: none;
1113
1214
img {
1315
display: block;
@@ -19,7 +21,7 @@ const Grid = styled.section`
1921
export default ({ companies }) => (
2022
<Grid>
2123
{shuffleArray(companies).map(({ node: company }) => (
22-
<div>
24+
<li>
2325
<a
2426
href={company.link}
2527
target="_blank"
@@ -33,7 +35,7 @@ export default ({ companies }) => (
3335
loading="lazy"
3436
/>
3537
</a>
36-
</div>
38+
</li>
3739
))}
3840
</Grid>
3941
);

‎packages/homepage/src/components/RollingText.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default class RollingText extends React.Component {
5252
ref={el => {
5353
this.fadeout = el;
5454
}}
55+
aria-hidden
5556
>
5657
{oldChildren}
5758
</div>

‎packages/homepage/src/components/TitleAndMetaTags.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ export default ({
55
title = 'CodeSandbox: Online Code Editor Tailored for Web Application Development',
66
description = 'CodeSandbox is an online code editor with a focus on creating and sharing web application projects',
77
image = 'https://codesandbox.io/static/img/banner.png',
8-
}: {
9-
title: string,
10-
description: string,
118
}) => (
129
<Helmet
1310
title={title}

‎packages/homepage/src/components/layout.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,27 @@ import { ThemeProvider } from 'styled-components';
44
import theme from '@codesandbox/common/lib/theme';
55
import Navigation from '@codesandbox/common/lib/components/Navigation';
66
import Footer from '@codesandbox/common/lib/components/Footer';
7-
7+
import { VisuallyHidden } from './style';
88
import '../css/typography.css';
99
import '../css/global.css';
1010

1111
const TemplateWrapper = ({ children }) => (
1212
<ThemeProvider theme={theme}>
1313
<div>
1414
<div style={{ position: 'absolute', left: 0, right: 0, zIndex: 10 }}>
15+
<VisuallyHidden as="a" href="#main">
16+
Skip to main content
17+
</VisuallyHidden>
1518
<Navigation />
1619
</div>
1720

18-
<main style={{ maxWidth: '100vw', overflowX: 'hidden' }}>{children}</main>
21+
<main
22+
style={{ maxWidth: '100vw', overflowX: 'hidden' }}
23+
id="main"
24+
aria-label="main content"
25+
>
26+
{children}
27+
</main>
1928

2029
<Footer />
2130
</div>

‎packages/homepage/src/components/style.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,15 @@ export const SubHeading = styled.p`
4040
4141
color: rgba(255, 255, 255, 0.8);
4242
`;
43+
44+
export const VisuallyHidden = styled.div`
45+
border: 0;
46+
clip: rect(0 0 0 0);
47+
height: 1px;
48+
margin: -1px;
49+
overflow: hidden;
50+
padding: 0;
51+
position: absolute;
52+
width: 1px;
53+
white-space: nowrap;
54+
`;

‎packages/homepage/src/pages/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,9 @@ export default class HomePage extends React.Component {
3636
return (
3737
<Layout>
3838
<TitleAndMetaTags />
39-
40-
<Animation />
39+
<header role="banner" aria-label="codesandbox">
40+
<Animation />
41+
</header>
4142
<NPMFeature />
4243
<CycleFeature />
4344
<ExtraFeatures />

‎packages/homepage/src/screens/home/Animation/Background.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default class Background extends React.PureComponent {
4848

4949
return (
5050
<Container
51+
aria-hidden
5152
style={{
5253
backgroundColor:
5354
this.colors[template.name] || template.color.clearer(0.97)(),

‎packages/homepage/src/screens/home/Animation/Cubes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ export default class Cubes extends React.Component {
231231
}
232232

233233
return (
234-
<Container>
234+
<Container aria-hidden>
235235
{this.state.templates.map((t, i) => {
236236
const selected = template === t.template;
237237

0 commit comments

Comments
 (0)