Skip to content
This repository was archived by the owner on Oct 1, 2024. It is now read-only.

Commit 25ed13f

Browse files
geotrevgeotrev
authored
Merge pull request #150 from geotrev/app/page-focus-handlers
Update focus handling in website
2 parents 13c48a7 + c7bcdce commit 25ed13f

File tree

16 files changed

+449
-282
lines changed

16 files changed

+449
-282
lines changed

‎.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,10 @@ module.exports = {
205205
// react
206206
"react/display-name": ERROR,
207207

208+
// jsx-a11y
209+
"jsx-a11y/no-noninteractive-element-interactions": OFF,
210+
"jsx-a11y/no-interactive-element-to-noninteractive-role": OFF,
211+
208212
// used for undernet only
209213
"no-console": OFF,
210214
},

‎app/components/Footer/Footer.js‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,68 @@
11
import React from "react"
22
import Github from "react-feather/dist/icons/github"
33
import Twitter from "react-feather/dist/icons/twitter"
4+
import PropTypes from "prop-types"
45

56
import "./styles.scss"
67

7-
export default function Footer() {
8+
export default function Footer(props) {
89
return (
910
<div className="footer-wrapper small-section fluid grid">
1011
<div className="row">
1112
<div className="has-no-padding column">
1213
<p className="has-center-text has-gray900-text">
13-
Undernet is front-end framework created and maintained by{" "}
14+
Undernet is a front-end framework created and maintained by{" "}
1415
<a className="has-white-text" href="http://www.geotrev.com">
1516
George Treviranus
1617
</a>
1718
.
1819
</p>
1920
<p className="has-center-text has-gray900-text">
20-
<a className="has-white-text has-feather" href="https://www.twitter.com/gwtrev">
21-
<Twitter role="presentation" focusable="false" />
22-
<span className="is-visually-hidden">Open link to www.twitter.com/gwtrev</span>
23-
</a>
24-
<a
25-
className="has-white-text has-feather"
26-
href="https://www.github.com/geotrev/undernet"
27-
>
28-
<Github role="presentation" focusable="false" />
29-
<span className="is-visually-hidden">
30-
Open link to www.github.com/geotrev/undernet
31-
</span>
21+
Animations provided by{" "}
22+
<a className="has-white-text" href="https://folgert.com/">
23+
Gavin Folgert
3224
</a>
25+
. ❤️
3326
</p>
27+
<ul className="has-center-text has-gray900-text is-unstyled-list is-flex-row is-flex is-justified-center">
28+
<li role="none">
29+
<a
30+
role="listitem"
31+
className="has-white-text has-feather"
32+
href="https://www.twitter.com/gwtrev"
33+
>
34+
<Twitter role="presentation" focusable="false" />
35+
<span className="is-visually-hidden">Open link to www.twitter.com/gwtrev</span>
36+
</a>
37+
</li>
38+
<li role="none">
39+
<a
40+
role="listitem"
41+
className="has-white-text has-feather"
42+
href="https://www.github.com/geotrev/undernet"
43+
>
44+
<Github role="presentation" focusable="false" />
45+
<span className="is-visually-hidden">
46+
Open link to www.github.com/geotrev/undernet
47+
</span>
48+
</a>
49+
</li>
50+
<li role="none">
51+
<button
52+
className="is-visually-hidden-focusable"
53+
onClick={props.handleHeaderFocusClick}
54+
role="listitem"
55+
>
56+
Return to top of page
57+
</button>
58+
</li>
59+
</ul>
3460
</div>
3561
</div>
3662
</div>
3763
)
3864
}
65+
66+
Footer.propTypes = {
67+
handleHeaderFocusClick: PropTypes.func.isRequired,
68+
}

‎app/components/Footer/__tests__/Footer.spec.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import React from "react"
22
import Footer from "../Footer"
33

4+
jest.mock("react-feather/dist/icons/twitter", () => global.simpleMock("Twitter"))
5+
jest.mock("react-feather/dist/icons/github", () => global.simpleMock("Github"))
6+
47
describe("<Footer />", () => {
58
it("renders", () => {
6-
const wrapper = mount(<Footer />)
9+
const wrapper = mount(<Footer handleHeaderFocusClick={jest.fn()} />)
710
expect(wrapper).toMatchSnapshot()
811
})
912
})

‎app/components/Footer/__tests__/__snapshots__/Footer.spec.js.snap‎

Lines changed: 55 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`<Footer /> renders 1`] = `
4-
<Footer>
4+
<Footer
5+
handleHeaderFocusClick={[MockFunction]}
6+
>
57
<div
68
className="footer-wrapper small-section fluid grid"
79
>
@@ -14,7 +16,7 @@ exports[`<Footer /> renders 1`] = `
1416
<p
1517
className="has-center-text has-gray900-text"
1618
>
17-
Undernet is front-end framework created and maintained by
19+
Undernet is a front-end framework created and maintained by
1820
1921
<a
2022
className="has-white-text"
@@ -27,75 +29,69 @@ exports[`<Footer /> renders 1`] = `
2729
<p
2830
className="has-center-text has-gray900-text"
2931
>
32+
Animations provided by
33+
3034
<a
31-
className="has-white-text has-feather"
32-
href="https://www.twitter.com/gwtrev"
35+
className="has-white-text"
36+
href="https://folgert.com/"
37+
>
38+
Gavin Folgert
39+
</a>
40+
. ❤️
41+
</p>
42+
<ul
43+
className="has-center-text has-gray900-text is-unstyled-list is-flex-row is-flex is-justified-center"
44+
>
45+
<li
46+
role="none"
3347
>
34-
<Twitter
35-
color="currentColor"
36-
focusable="false"
37-
role="presentation"
38-
size="24"
48+
<a
49+
className="has-white-text has-feather"
50+
href="https://www.twitter.com/gwtrev"
51+
role="listitem"
3952
>
40-
<svg
41-
fill="none"
53+
<Twitter
4254
focusable="false"
43-
height="24"
4455
role="presentation"
45-
stroke="currentColor"
46-
strokeLinecap="round"
47-
strokeLinejoin="round"
48-
strokeWidth="2"
49-
viewBox="0 0 24 24"
50-
width="24"
51-
xmlns="http://www.w3.org/2000/svg"
56+
/>
57+
<span
58+
className="is-visually-hidden"
5259
>
53-
<path
54-
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
55-
/>
56-
</svg>
57-
</Twitter>
58-
<span
59-
className="is-visually-hidden"
60-
>
61-
Open link to www.twitter.com/gwtrev
62-
</span>
63-
</a>
64-
<a
65-
className="has-white-text has-feather"
66-
href="https://www.github.com/geotrev/undernet"
60+
Open link to www.twitter.com/gwtrev
61+
</span>
62+
</a>
63+
</li>
64+
<li
65+
role="none"
6766
>
68-
<GitHub
69-
color="currentColor"
70-
focusable="false"
71-
role="presentation"
72-
size="24"
67+
<a
68+
className="has-white-text has-feather"
69+
href="https://www.github.com/geotrev/undernet"
70+
role="listitem"
7371
>
74-
<svg
75-
fill="none"
72+
<Github
7673
focusable="false"
77-
height="24"
7874
role="presentation"
79-
stroke="currentColor"
80-
strokeLinecap="round"
81-
strokeLinejoin="round"
82-
strokeWidth="2"
83-
viewBox="0 0 24 24"
84-
width="24"
85-
xmlns="http://www.w3.org/2000/svg"
75+
/>
76+
<span
77+
className="is-visually-hidden"
8678
>
87-
<path
88-
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
89-
/>
90-
</svg>
91-
</GitHub>
92-
<span
93-
className="is-visually-hidden"
79+
Open link to www.github.com/geotrev/undernet
80+
</span>
81+
</a>
82+
</li>
83+
<li
84+
role="none"
85+
>
86+
<button
87+
className="is-visually-hidden-focusable"
88+
onClick={[MockFunction]}
89+
role="listitem"
9490
>
95-
Open link to www.github.com/geotrev/undernet
96-
</span>
97-
</a>
98-
</p>
91+
Return to top of page
92+
</button>
93+
</li>
94+
</ul>
9995
</div>
10096
</div>
10197
</div>

‎app/components/GlobalNav/GlobalNav.js‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,62 @@ import React from "react"
22
import Github from "react-feather/dist/icons/github"
33
import Twitter from "react-feather/dist/icons/twitter"
44
import { Link } from "react-router-dom"
5+
import PropTypes from "prop-types"
56

67
import { introductionPath } from "app/routes"
78
import Logo from "app/assets/images/un-logo.png"
89
import "./styles.scss"
910

10-
export default function GlobalNav() {
11+
export default function GlobalNav(props) {
1112
return (
1213
<nav id="global-nav" className="fluid grid">
1314
<ul className="nav-list row has-no-padding">
14-
<li className="small-5 xsmall-12 columns">
15+
<li className="small-5 xsmall-12 columns" role="none">
1516
<Link to="/" className="logo">
1617
<img src={Logo} alt="Undernet" />
1718
</Link>
1819
</li>
19-
<li className="small-7 xsmall-12 columns">
20+
<li className="small-7 xsmall-12 columns" role="none">
2021
<ul className="row">
21-
<li>
22-
<a className="has-feather" href="https://www.twitter.com/gwtrev">
22+
<li role="none">
23+
<button
24+
role="listitem"
25+
className="is-visually-hidden-focusable"
26+
onClick={props.handleMainFocusClick}
27+
>
28+
Skip to main content
29+
</button>
30+
</li>
31+
<li role="none">
32+
<a className="has-feather" href="https://www.twitter.com/gwtrev" role="listitem">
2333
<Twitter role="presentation" focusable="false" />
2434
<span className="is-visually-hidden">Open link to www.twitter.com/gwtrev</span>
2535
</a>
2636
</li>
27-
<li>
28-
<a className="has-feather" href="https://www.github.com/geotrev/undernet">
37+
<li role="none">
38+
<a
39+
className="has-feather"
40+
href="https://www.github.com/geotrev/undernet"
41+
role="listitem"
42+
>
2943
<Github role="presentation" focusable="false" />
3044
<span className="is-visually-hidden">
3145
Open link to www.github.com/geotrev/undernet
3246
</span>
3347
</a>
3448
</li>
35-
<li>
36-
<Link to={introductionPath}>Documentation</Link>
49+
<li role="none">
50+
<Link to={introductionPath} role="listitem">
51+
Documentation
52+
</Link>
3753
</li>
3854
</ul>
3955
</li>
4056
</ul>
4157
</nav>
4258
)
4359
}
60+
61+
GlobalNav.propTypes = {
62+
handleMainFocusClick: PropTypes.func.isRequired,
63+
}

‎app/components/GlobalNav/__tests__/GlobalNav.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from "react-router-dom"
55
function NavComponent() {
66
return mount(
77
<Router>
8-
<GlobalNav />
8+
<GlobalNav handleMainFocusClick={jest.fn()} />
99
</Router>
1010
)
1111
}

0 commit comments

Comments
 (0)