Skip to content
This repository was archived by the owner on Aug 26, 2021. It is now read-only.

Commit 8b113ba

Browse files
sukhrajghumansukhrajghuman
authored
Merge pull request #545 from govau/feature/revert-main-nav-active-item-to-link
Revert main nav active item to link
2 parents 716364a + b8395b9 commit 8b113ba

File tree

8 files changed

+53
-31
lines changed

8 files changed

+53
-31
lines changed

‎packages/main-nav/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
## Versions
1717

18+
* [v1.0.0 - Wrap active item in main-nav in an `<a>` and add `aria-current="page"`](#v100)
1819
* [v0.2.0 - Active items are no longer wrapped in `<a>` for accessibility](#v020)
1920
* [v0.1.4 - Fix passing props to main nav react component](#v014)
2021
* [v0.1.3 - Added an aria-label attribute to the nav element](#v013)
@@ -28,6 +29,11 @@
2829

2930
## Release History
3031

32+
### v1.0.0
33+
34+
- Wrap active item in main-nav in an `<a>` and add `aria-current="page"`
35+
36+
3137
### v0.2.0
3238

3339
- Active items are no longer wrapped in `<a>` for accessibility

‎packages/main-nav/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ The visual test: https://uikit.service.gov.au/packages/main-nav/tests/site/
235235

236236
## Release History
237237

238+
* v1.0.0 - Wrap active item in main-nav in an `<a>` and add `aria-current="page"`
238239
* v0.2.0 - Active items are no longer wrapped in `<a>` for accessibility
239240
* v0.1.4 - Fix passing props to main nav react component
240241
* v0.1.3 - Added an aria-label attribute to the nav element

‎packages/main-nav/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gov.au/main-nav",
3-
"version": "0.2.0",
3+
"version": "1.0.0",
44
"description": "Horizontal list of links to key areas on the website. Usually located in the header.",
55
"keywords": [
66
"uikit",

‎packages/main-nav/src/js/react.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,17 @@ const AUmainNavMenu = ({ items, linkComponent }) => {
3333
// Generate the menu
3434
const GenerateMenu = ( items ) => {
3535
const menu = items.map( item => {
36-
const link = {
37-
link: item.active ? '' : item.link,
38-
text: item.active ? <span>{ item.text }</span> : item.text,
36+
const link = item.active ? {
37+
link: item.link,
38+
text: item.text,
39+
'aria-current': 'page',
3940
li: {
40-
className: item.active ? 'active' : '',
41+
className: 'active',
4142
},
43+
} :
44+
{
45+
link: item.link,
46+
text: item.text,
4247
};
4348

4449
// return the link, maybe with children

‎packages/main-nav/src/sass/_module.scss‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,13 @@
2121
color: $AU-color-foreground-text;
2222

2323
a,
24-
.active > span,
2524
.au-main-nav__toggle {
2625
@include AU-space( padding, 1unit );
2726
@include AU-fontgrid( xs );
2827
@include AU-focus();
2928
color: $AU-color-foreground-action;
3029
text-decoration: none;
31-
}
3230

33-
a,
34-
.au-main-nav__toggle {
3531
&:hover {
3632
text-decoration: underline;
3733
text-decoration-skip: ink;
@@ -40,15 +36,18 @@
4036
}
4137
}
4238

43-
a,
44-
.active > span {
39+
a {
4540
display: block;
4641
}
4742

4843

49-
.active > span {
44+
.active a {
5045
font-weight: bold;
5146
color: $AU-color-foreground-text;
47+
48+
&:hover {
49+
border-color: $AU-color-background-shade;
50+
}
5251
}
5352

5453
// Reset menus inside main-nav
@@ -77,8 +76,12 @@
7776
}
7877
}
7978

80-
.active > span {
79+
.active a {
8180
border-color: $AU-color-background-alt;
81+
82+
&:hover {
83+
border-color: $AU-color-background-alt-shade;
84+
}
8285
}
8386
}
8487

@@ -98,9 +101,13 @@
98101
}
99102
}
100103

101-
.active > span {
104+
.active a {
102105
color: $AU-colordark-foreground-text;
103106
border-color: $AU-colordark-background;
107+
108+
&:hover {
109+
border-color: $AU-colordark-background-shade;
110+
}
104111
}
105112

106113
.au-link-list > li {
@@ -119,8 +126,12 @@
119126
}
120127
}
121128

122-
.active > span {
129+
.active a {
123130
border-color: $AU-colordark-background-alt;
131+
132+
&:hover {
133+
border-color: $AU-colordark-background-alt-shade;
134+
}
124135
}
125136
}
126137

@@ -132,13 +143,12 @@
132143
}
133144

134145
a,
135-
.active > span,
136146
.au-main-nav__toggle {
137147
@include AU-fontgrid( sm );
138148
@include AU-space( padding, 1unit );
139149
}
140150

141-
.active > span {
151+
.active a {
142152
@include AU-space( border-bottom, 0.5unit solid $AU-color-background );
143153
@include AU-space( margin-bottom, -0.5unit );
144154
font-weight: normal;

‎packages/main-nav/tests/jquery/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h2>Test: main-nav default</h2>
6767
<ul class="au-link-list">
6868
<li><a href="#">About</a></li>
6969
<li><a href="#">Get started</a></li>
70-
<li class="active"><span>Components</span></li>
70+
<li class="active"><a href="#" aria-current="page">Components</a></li>
7171
<li><a href="#">Templates</a></li>
7272
<li><a href="#">Community</a></li>
7373
<li><a href="#">Support</a></li>
@@ -107,7 +107,7 @@ <h2>Test: main-nav <code>alt</code></h2>
107107
<ul class="au-link-list">
108108
<li><a href="#">About</a></li>
109109
<li><a href="#">Get started</a></li>
110-
<li class="active"><span>Components</span></li>
110+
<li class="active"><a href="#" aria-current="page">Components</a></li>
111111
<li><a href="#">Templates</a></li>
112112
<li><a href="#">Community</a></li>
113113
<li><a href="#">Support</a></li>
@@ -147,7 +147,7 @@ <h2>Test: main-nav <code>dark</code></h2>
147147
<ul class="au-link-list">
148148
<li><a href="#">About</a></li>
149149
<li><a href="#">Get started</a></li>
150-
<li class="active"><span>Components</span></li>
150+
<li class="active"><a href="#" aria-current="page">Components</a></li>
151151
<li><a href="#">Templates</a></li>
152152
<li><a href="#">Community</a></li>
153153
<li><a href="#">Support</a></li>
@@ -187,7 +187,7 @@ <h2>Test: main-nav <code>alt</code> <code>dark</code></h2>
187187
<ul class="au-link-list">
188188
<li><a href="#">About</a></li>
189189
<li><a href="#">Get started</a></li>
190-
<li class="active"><span>Components</span></li>
190+
<li class="active"><a href="#" aria-current="page">Components</a></li>
191191
<li><a href="#">Templates</a></li>
192192
<li><a href="#">Community</a></li>
193193
<li><a href="#">Support</a></li>
@@ -227,7 +227,7 @@ <h2>Test: main-nav <code>slow</code></h2>
227227
<ul class="au-link-list">
228228
<li><a href="#">About</a></li>
229229
<li><a href="#">Get started</a></li>
230-
<li class="active"><span>Components</span></li>
230+
<li class="active"><a href="#" aria-current="page">Components</a></li>
231231
<li><a href="#">Templates</a></li>
232232
<li><a href="#">Community</a></li>
233233
<li><a href="#">Support</a></li>
@@ -267,7 +267,7 @@ <h2>Test: main-nav <code>callbacks</code></h2>
267267
<ul class="au-link-list">
268268
<li><a href="#">About</a></li>
269269
<li><a href="#">Get started</a></li>
270-
<li class="active"><span>Components</span></li>
270+
<li class="active"><a href="#" aria-current="page">Components</a></li>
271271
<li><a href="#">Templates</a></li>
272272
<li><a href="#">Community</a></li>
273273
<li><a href="#">Support</a></li>

‎packages/main-nav/tests/site/index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h2>Test: main-nav default</h2>
6969
<ul class="au-link-list">
7070
<li><a href="#">About</a></li>
7171
<li><a href="#">Get started</a></li>
72-
<li class="active"><span>Components</span></li>
72+
<li class="active"><a href="#" aria-current="page">Components</a></li>
7373
<li><a href="#">Templates</a></li>
7474
<li><a href="#">Community</a></li>
7575
<li><a href="#">Support</a></li>
@@ -115,7 +115,7 @@ <h2>Test: main-nav <code>alt</code></h2>
115115
<ul class="au-link-list">
116116
<li><a href="#">About</a></li>
117117
<li><a href="#">Get started</a></li>
118-
<li class="active"><span>Components</span></li>
118+
<li class="active"><a href="#" aria-current="page">Components</a></li>
119119
<li><a href="#">Templates</a></li>
120120
<li><a href="#">Community</a></li>
121121
<li><a href="#">Support</a></li>
@@ -157,7 +157,7 @@ <h2>Test: main-nav <code>dark</code></h2>
157157
<ul class="au-link-list">
158158
<li><a href="#">About</a></li>
159159
<li><a href="#">Get started</a></li>
160-
<li class="active"><span>Components</span></li>
160+
<li class="active"><a href="#" aria-current="page">Components</a></li>
161161
<li><a href="#">Templates</a></li>
162162
<li><a href="#">Community</a></li>
163163
<li><a href="#">Support</a></li>
@@ -199,7 +199,7 @@ <h2>Test: main-nav <code>alt</code> <code>dark</code></h2>
199199
<ul class="au-link-list">
200200
<li><a href="#">About</a></li>
201201
<li><a href="#">Get started</a></li>
202-
<li class="active"><span>Components</span></li>
202+
<li class="active"><a href="#" aria-current="page">Components</a></li>
203203
<li><a href="#">Templates</a></li>
204204
<li><a href="#">Community</a></li>
205205
<li><a href="#">Support</a></li>
@@ -241,7 +241,7 @@ <h2>Test: main-nav <code>slow</code></h2>
241241
<ul class="au-link-list">
242242
<li><a href="#">About</a></li>
243243
<li><a href="#">Get started</a></li>
244-
<li class="active"><span>Components</span></li>
244+
<li class="active"><a href="#" aria-current="page">Components</a></li>
245245
<li><a href="#">Templates</a></li>
246246
<li><a href="#">Community</a></li>
247247
<li><a href="#">Support</a></li>
@@ -283,7 +283,7 @@ <h2>Test: main-nav with callbacks</h2>
283283
<ul class="au-link-list">
284284
<li><a href="#">About</a></li>
285285
<li><a href="#">Get started</a></li>
286-
<li class="active"><span>Components</span></li>
286+
<li class="active"><a href="#" aria-current="page">Components</a></li>
287287
<li><a href="#">Templates</a></li>
288288
<li><a href="#">Community</a></li>
289289
<li><a href="#">Support</a></li>
@@ -347,7 +347,7 @@ <h1 class="au-header__heading">Site title</h1>
347347
<ul class="au-link-list">
348348
<li><a href="#">About</a></li>
349349
<li><a href="#">Get started</a></li>
350-
<li class="active"><span>Components</span></li>
350+
<li class="active"><a href="#" aria-current="page">Components</a></li>
351351
<li><a href="#">Templates</a></li>
352352
<li><a href="#">Community</a></li>
353353
<li><a href="#">Support</a></li>

‎uikit.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)