Skip to content

Commit cb1028e

Browse files
sergey-pimenovsergey-pimenov
committed
Add accessibility
Add correct focus state for buttons and links
1 parent e2153a8 commit cb1028e

File tree

10 files changed

+235
-13
lines changed

10 files changed

+235
-13
lines changed

‎assets/scripts/index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/styles/index.css

+94-6
Original file line numberDiff line numberDiff line change
@@ -186,10 +186,23 @@ body.showDoc::after {
186186
.goTop.show {
187187
-webkit-transform: translateX(0);
188188
transform: translateX(0); }
189+
@media (min-width: 1151px) {
190+
.goTop:focus::after {
191+
content: '';
192+
width: calc(100% - 4px);
193+
height: calc(100% - 4px);
194+
position: absolute;
195+
left: 0;
196+
top: 0;
197+
border: 2px black dashed; } }
189198

190-
button {
199+
button,
200+
a,
201+
span {
191202
outline: none; }
192-
button::-moz-focus-inner {
203+
button::-moz-focus-inner,
204+
a::-moz-focus-inner,
205+
span::-moz-focus-inner {
193206
border: 0; }
194207

195208
header {
@@ -300,6 +313,21 @@ header {
300313
left: 0;
301314
-webkit-transform-origin: 0 50%;
302315
transform-origin: 0 50%; }
316+
.titleAndNav nav a.toolsNav::before {
317+
content: '';
318+
width: 90%;
319+
height: 130%;
320+
display: block;
321+
position: absolute;
322+
right: -3.5%;
323+
top: -20%;
324+
border: 2px black dashed;
325+
z-index: -1;
326+
opacity: 0;
327+
-webkit-transition: opacity 0.5s;
328+
transition: opacity 0.5s; }
329+
.titleAndNav nav a.toolsNav:focus::before {
330+
opacity: 1; }
303331
@media (max-width: 1150px) {
304332
.titleAndNav nav a.toolsNav {
305333
padding: 0; } }
@@ -308,6 +336,21 @@ header {
308336
right: 0;
309337
-webkit-transform-origin: 100% 50%;
310338
transform-origin: 100% 50%; }
339+
.titleAndNav nav a.materialsNav::before {
340+
content: '';
341+
width: 85%;
342+
height: 130%;
343+
display: block;
344+
position: absolute;
345+
left: -5%;
346+
top: -20%;
347+
border: 2px black dashed;
348+
z-index: -1;
349+
-webkit-transition: opacity 0.5s;
350+
transition: opacity 0.5s;
351+
opacity: 0; }
352+
.titleAndNav nav a.materialsNav:focus::before {
353+
opacity: 1; }
311354
@media (max-width: 1150px) {
312355
.titleAndNav nav a.materialsNav {
313356
padding: 0; } }
@@ -540,6 +583,18 @@ footer {
540583
font-family: 'Roboto', sans-serif;
541584
font-weight: 700;
542585
color: black; }
586+
footer a {
587+
display: inline-block;
588+
-webkit-transform-origin: 0 50%;
589+
transform-origin: 0 50%;
590+
-webkit-transition: -webkit-transform 0.2s;
591+
transition: -webkit-transform 0.2s;
592+
transition: transform 0.2s;
593+
transition: transform 0.2s, -webkit-transform 0.2s; }
594+
@media (min-width: 1151px) {
595+
footer a:focus {
596+
text-transform: uppercase;
597+
text-decoration: underline; } }
543598
footer img {
544599
height: 1em;
545600
display: inline-block;
@@ -605,6 +660,11 @@ footer {
605660
opacity: 0;
606661
-webkit-transition: all 0.15s;
607662
transition: all 0.15s; }
663+
@media (min-width: 1151px) {
664+
.tools .tool a:focus {
665+
opacity: 1;
666+
-webkit-transform: scale(1.1);
667+
transform: scale(1.1); } }
608668
@media (min-width: 1151px) {
609669
.tools .tool:hover a {
610670
opacity: 1; } }
@@ -796,7 +856,16 @@ footer {
796856
font-size: 16px;
797857
color: white;
798858
font-family: 'Roboto', sans-serif;
799-
border-radius: 0; }
859+
border-radius: 0;
860+
-webkit-transition: -webkit-transform 0.2s;
861+
transition: -webkit-transform 0.2s;
862+
transition: transform 0.2s;
863+
transition: transform 0.2s, -webkit-transform 0.2s; }
864+
.options button:focus {
865+
background-color: white;
866+
color: black;
867+
-webkit-transform: scale(1.1);
868+
transform: scale(1.1); }
800869
@media (max-width: 900px) {
801870
.options button {
802871
width: 100%;
@@ -1110,10 +1179,20 @@ footer {
11101179
align-items: center;
11111180
position: relative;
11121181
font-size: 16px;
1113-
cursor: pointer; }
1182+
cursor: pointer;
1183+
-webkit-transition: -webkit-transform 0.2s;
1184+
transition: -webkit-transform 0.2s;
1185+
transition: transform 0.2s;
1186+
transition: transform 0.2s, -webkit-transform 0.2s; }
11141187
.bestMaterials .categories .category:hover {
11151188
background-color: white;
11161189
color: black; }
1190+
@media (min-width: 1151px) {
1191+
.bestMaterials .categories .category:focus {
1192+
background-color: white;
1193+
color: black;
1194+
-webkit-transform: scale(1.1);
1195+
transform: scale(1.1); } }
11171196
.bestMaterials .categories .category.selected {
11181197
background-color: white;
11191198
color: black; }
@@ -1273,9 +1352,13 @@ footer {
12731352
.bestMaterials article a {
12741353
width: 100%;
12751354
height: 100%;
1355+
display: block;
12761356
position: absolute;
12771357
left: 0;
12781358
top: 0; }
1359+
@media (min-width: 1151px) {
1360+
.bestMaterials article a:focus {
1361+
background: rgba(150, 150, 150, 0.1); } }
12791362
.bestMaterials .title {
12801363
height: 38px;
12811364
margin-bottom: 30px;
@@ -1397,10 +1480,15 @@ footer {
13971480
position: absolute;
13981481
right: 30px;
13991482
bottom: 20px;
1400-
-webkit-transition: background-color 0.15s;
1401-
transition: background-color 0.15s; }
1483+
-webkit-transition: all 0.15s;
1484+
transition: all 0.15s; }
14021485
.bestMaterials .books .link:hover {
14031486
background-color: black; }
1487+
@media (min-width: 1151px) {
1488+
.bestMaterials .books .link:focus {
1489+
opacity: 1;
1490+
-webkit-transform: scale(1.1);
1491+
transform: scale(1.1); } }
14041492
@media (max-width: 900px) {
14051493
.bestMaterials .books .link {
14061494
width: 100%;

‎src/basic/styles/basic.sass

+19-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,25 @@ body.showDoc::after
120120
&.show
121121
transform: translateX(0)
122122

123-
button
123+
+bp(xl)
124+
&:focus::after
125+
content: ''
126+
width: calc(100% - 4px)
127+
height: calc(100% - 4px)
128+
position: absolute
129+
left: 0
130+
top: 0
131+
border: 2px black dashed
132+
133+
134+
// @keyframes blink
135+
// 100%
136+
// background-color: rgb(235, 235, 255)
137+
138+
button,
139+
a,
140+
span
124141
outline: none
142+
125143
&::-moz-focus-inner
126144
border: 0

‎src/basic/styles/footer.sass

+10
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ footer
66
font-weight: 700
77
color: black
88

9+
a
10+
display: inline-block
11+
transform-origin: 0 50%
12+
transition: transform 0.2s
13+
14+
+bp(xl)
15+
a:focus
16+
text-transform: uppercase
17+
text-decoration: underline
18+
919
img
1020
height: 1em
1121
display: inline-block

‎src/basic/styles/header.sass

+32
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,22 @@ header
9090
left: 0
9191
transform-origin: 0 50%
9292
93+
&::before
94+
content: ''
95+
width: 90%
96+
height: 130%
97+
display: block
98+
position: absolute
99+
right: -3.5%
100+
top: -20%
101+
border: 2px black dashed
102+
z-index: -1
103+
opacity: 0
104+
transition: opacity 0.5s
105+
106+
&:focus::before
107+
opacity: 1
108+
93109
+bp(lg)
94110
padding: 0
95111
@@ -98,6 +114,22 @@ header
98114
right: 0
99115
transform-origin: 100% 50%
100116
117+
&::before
118+
content: ''
119+
width: 85%
120+
height: 130%
121+
display: block
122+
position: absolute
123+
left: -5%
124+
top: -20%
125+
border: 2px black dashed
126+
z-index: -1
127+
transition: opacity 0.5s
128+
opacity: 0
129+
130+
&:focus::before
131+
opacity: 1
132+
101133
+bp(lg)
102134
padding: 0
103135

‎src/components/bestMaterials/index.js

+16-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export default function() {
2020
Scroll to
2121
<img width="15px" height="auto" src="assets/images/goTo.svg">
2222
</h3>
23-
<span class="category" id="books"> Books </span>
24-
<span class="category" id="articlesAndVideos"> Articles and videos </span>
23+
<span class="category" id="books" tabindex="0"> Books </span>
24+
<span class="category" id="articlesAndVideos" tabindex="0"> Articles and videos </span>
2525
</div>
2626
</div>
2727
@@ -52,6 +52,20 @@ export default function() {
5252
});
5353

5454
})
55+
56+
category[i].addEventListener('keydown', function(e) {
57+
if(e.keyCode != 13) return;
58+
59+
var scroll = new SmoothScroll();
60+
61+
var selectedItem = e.target.id;
62+
63+
var anchor = document.querySelector('#' + selectedItem + 'Title');
64+
scroll.animateScroll(anchor, category[i], {
65+
offset : 65
66+
});
67+
68+
})
5569
}
5670

5771
var showCategories = document.getElementsByClassName('showCategories')[0];

‎src/components/bestMaterials/index.sass

+18-1
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,18 @@
108108
position: relative
109109
font-size: 16px
110110
cursor: pointer
111+
transition: transform 0.2s
111112

112113
&:hover
113114
background-color: white
114115
color: black
115116

117+
+bp(xl)
118+
&:focus
119+
background-color: white
120+
color: black
121+
transform: scale(1.1)
122+
116123
&.selected
117124
background-color: white
118125
color: black
@@ -263,10 +270,15 @@
263270
a
264271
width: 100%
265272
height: 100%
273+
display: block
266274
position: absolute
267275
left: 0
268276
top: 0
269277

278+
+bp(xl)
279+
&:focus
280+
background: rgba(150, 150, 150, 0.1)
281+
270282
.title
271283
height: 38px
272284
margin-bottom: 30px
@@ -384,11 +396,16 @@
384396
position: absolute
385397
right: 30px
386398
bottom: 20px
387-
transition: background-color 0.15s
399+
transition: all 0.15s
388400

389401
&:hover
390402
background-color: black
391403

404+
+bp(xl)
405+
&:focus
406+
opacity: 1
407+
transform: scale(1.1)
408+
392409
+bp(md)
393410
width: 100%
394411
padding: 10px 20px

‎src/components/tools/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export default function() {
9999
var toolsCount = toolsData.length;
100100
function createTool(toolName, toolLogo, toolTechnologies, toolSize, toolLink) {
101101
var tool = document.createElement('div');
102+
tool.setAttribute('tabindex', '-1');
102103
tool.classList.add('tool');
103104

104105
var link = document.createElement('a');

‎src/components/tools/index.sass

+11
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@
4040
opacity: 0
4141
transition: all 0.15s
4242

43+
+bp(xl)
44+
&:focus
45+
opacity: 1
46+
transform: scale(1.1)
47+
4348
+bp(xl)
4449
&:hover a
4550
opacity: 1
@@ -208,6 +213,12 @@
208213
color: white
209214
font-family: 'Roboto', sans-serif
210215
border-radius: 0 // For mobile FF
216+
transition: transform 0.2s
217+
218+
&:focus
219+
background-color: white
220+
color: black
221+
transform: scale(1.1)
211222

212223
+bp(md)
213224
width: 100%

0 commit comments

Comments
 (0)