Add accessibility

Add correct focus state for buttons and links
sergey-pimenov · Jan 2, 2018 · cb1028e · cb1028e
1 parent e2153a8
commit cb1028e
Show file tree

Hide file tree

Showing 10 changed files with 235 additions and 13 deletions.
diff --git a/assets/scripts/index.js b/assets/scripts/index.js
diff --git a/assets/styles/index.css b/assets/styles/index.css
@@ -186,10 +186,23 @@ body.showDoc::after {
   .goTop.show {
     -webkit-transform: translateX(0);
     transform: translateX(0); }
+  @media (min-width: 1151px) {
+    .goTop:focus::after {
+      content: '';
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      position: absolute;
+      left: 0;
+      top: 0;
+      border: 2px black dashed; } }
 
-button {
+button,
+a,
+span {
   outline: none; }
-  button::-moz-focus-inner {
+  button::-moz-focus-inner,
+  a::-moz-focus-inner,
+  span::-moz-focus-inner {
     border: 0; }
 
 header {
@@ -300,6 +313,21 @@ header {
         left: 0;
         -webkit-transform-origin: 0 50%;
         transform-origin: 0 50%; }
+        .titleAndNav nav a.toolsNav::before {
+          content: '';
+          width: 90%;
+          height: 130%;
+          display: block;
+          position: absolute;
+          right: -3.5%;
+          top: -20%;
+          border: 2px black dashed;
+          z-index: -1;
+          opacity: 0;
+          -webkit-transition: opacity 0.5s;
+          transition: opacity 0.5s; }
+        .titleAndNav nav a.toolsNav:focus::before {
+          opacity: 1; }
         @media (max-width: 1150px) {
           .titleAndNav nav a.toolsNav {
             padding: 0; } }
@@ -308,6 +336,21 @@ header {
         right: 0;
         -webkit-transform-origin: 100% 50%;
         transform-origin: 100% 50%; }
+        .titleAndNav nav a.materialsNav::before {
+          content: '';
+          width: 85%;
+          height: 130%;
+          display: block;
+          position: absolute;
+          left: -5%;
+          top: -20%;
+          border: 2px black dashed;
+          z-index: -1;
+          -webkit-transition: opacity 0.5s;
+          transition: opacity 0.5s;
+          opacity: 0; }
+        .titleAndNav nav a.materialsNav:focus::before {
+          opacity: 1; }
         @media (max-width: 1150px) {
           .titleAndNav nav a.materialsNav {
             padding: 0; } }
@@ -540,6 +583,18 @@ footer {
   font-family: 'Roboto', sans-serif;
   font-weight: 700;
   color: black; }
+  footer a {
+    display: inline-block;
+    -webkit-transform-origin: 0 50%;
+    transform-origin: 0 50%;
+    -webkit-transition: -webkit-transform 0.2s;
+    transition: -webkit-transform 0.2s;
+    transition: transform 0.2s;
+    transition: transform 0.2s, -webkit-transform 0.2s; }
+  @media (min-width: 1151px) {
+    footer a:focus {
+      text-transform: uppercase;
+      text-decoration: underline; } }
   footer img {
     height: 1em;
     display: inline-block;
@@ -605,6 +660,11 @@ footer {
       opacity: 0;
       -webkit-transition: all 0.15s;
       transition: all 0.15s; }
+      @media (min-width: 1151px) {
+        .tools .tool a:focus {
+          opacity: 1;
+          -webkit-transform: scale(1.1);
+          transform: scale(1.1); } }
     @media (min-width: 1151px) {
       .tools .tool:hover a {
         opacity: 1; } }
@@ -796,7 +856,16 @@ footer {
     font-size: 16px;
     color: white;
     font-family: 'Roboto', sans-serif;
-    border-radius: 0; }
+    border-radius: 0;
+    -webkit-transition: -webkit-transform 0.2s;
+    transition: -webkit-transform 0.2s;
+    transition: transform 0.2s;
+    transition: transform 0.2s, -webkit-transform 0.2s; }
+    .options button:focus {
+      background-color: white;
+      color: black;
+      -webkit-transform: scale(1.1);
+      transform: scale(1.1); }
     @media (max-width: 900px) {
       .options button {
         width: 100%;
@@ -1110,10 +1179,20 @@ footer {
       align-items: center;
       position: relative;
       font-size: 16px;
-      cursor: pointer; }
+      cursor: pointer;
+      -webkit-transition: -webkit-transform 0.2s;
+      transition: -webkit-transform 0.2s;
+      transition: transform 0.2s;
+      transition: transform 0.2s, -webkit-transform 0.2s; }
       .bestMaterials .categories .category:hover {
         background-color: white;
         color: black; }
+      @media (min-width: 1151px) {
+        .bestMaterials .categories .category:focus {
+          background-color: white;
+          color: black;
+          -webkit-transform: scale(1.1);
+          transform: scale(1.1); } }
       .bestMaterials .categories .category.selected {
         background-color: white;
         color: black; }
@@ -1273,9 +1352,13 @@ footer {
     .bestMaterials article a {
       width: 100%;
       height: 100%;
+      display: block;
       position: absolute;
       left: 0;
       top: 0; }
+      @media (min-width: 1151px) {
+        .bestMaterials article a:focus {
+          background: rgba(150, 150, 150, 0.1); } }
   .bestMaterials .title {
     height: 38px;
     margin-bottom: 30px;
@@ -1397,10 +1480,15 @@ footer {
     position: absolute;
     right: 30px;
     bottom: 20px;
-    -webkit-transition: background-color 0.15s;
-    transition: background-color 0.15s; }
+    -webkit-transition: all 0.15s;
+    transition: all 0.15s; }
     .bestMaterials .books .link:hover {
       background-color: black; }
+    @media (min-width: 1151px) {
+      .bestMaterials .books .link:focus {
+        opacity: 1;
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1); } }
     @media (max-width: 900px) {
       .bestMaterials .books .link {
         width: 100%;

diff --git a/src/basic/styles/basic.sass b/src/basic/styles/basic.sass
@@ -120,7 +120,25 @@ body.showDoc::after
 	&.show
 		transform: translateX(0)
 
-button
+	+bp(xl)
+		&:focus::after
+			content: ''
+			width: calc(100% - 4px)
+			height: calc(100% - 4px)
+			position: absolute
+			left: 0
+			top: 0
+			border: 2px black dashed
+
+
+	// @keyframes blink
+	// 	100%
+	// 		background-color: rgb(235, 235, 255)
+
+button,
+a,
+span
 	outline: none
+
 	&::-moz-focus-inner
 		border: 0
diff --git a/src/basic/styles/footer.sass b/src/basic/styles/footer.sass
@@ -6,6 +6,16 @@ footer
 	font-weight: 700
 	color: black
 
+	a
+		display: inline-block
+		transform-origin: 0 50%
+		transition: transform 0.2s
+
+	+bp(xl)
+		a:focus
+			text-transform: uppercase
+			text-decoration: underline
+
 	img
 		height: 1em
 		display: inline-block

diff --git a/src/basic/styles/header.sass b/src/basic/styles/header.sass
@@ -90,6 +90,22 @@ header
 				left: 0
 				transform-origin: 0 50%
 
+				&::before
+					content: ''
+					width: 90%
+					height: 130%
+					display: block
+					position: absolute
+					right: -3.5%
+					top: -20%
+					border: 2px black dashed
+					z-index: -1
+					opacity: 0
+					transition: opacity 0.5s
+
+				&:focus::before
+					opacity: 1
+
 				+bp(lg)
 					padding: 0
 
@@ -98,6 +114,22 @@ header
 				right: 0
 				transform-origin: 100% 50%
 
+				&::before
+					content: ''
+					width: 85%
+					height: 130%
+					display: block
+					position: absolute
+					left: -5%
+					top: -20%
+					border: 2px black dashed
+					z-index: -1
+					transition: opacity 0.5s
+					opacity: 0
+
+				&:focus::before
+					opacity: 1
+
 				+bp(lg)
 					padding: 0
 

diff --git a/src/components/bestMaterials/index.js b/src/components/bestMaterials/index.js
@@ -20,8 +20,8 @@ export default function() {
 						Scroll to
 						<img width="15px" height="auto" src="assets/images/goTo.svg">
 					</h3>
-					<span class="category" id="books"> Books </span>
-					<span class="category" id="articlesAndVideos"> Articles and videos </span>
+					<span class="category" id="books" tabindex="0"> Books </span>
+					<span class="category" id="articlesAndVideos" tabindex="0"> Articles and videos </span>
 				</div>
 			</div>
 
@@ -52,6 +52,20 @@ export default function() {
 			});
 
 		})
+
+		category[i].addEventListener('keydown', function(e) {
+			if(e.keyCode != 13) return;
+
+			var scroll = new SmoothScroll();
+
+			var selectedItem = e.target.id;
+
+			var anchor = document.querySelector('#' + selectedItem + 'Title');
+			scroll.animateScroll(anchor, category[i], {
+				offset : 65
+			});
+
+		})
 	}
 
 	var showCategories = document.getElementsByClassName('showCategories')[0];

diff --git a/src/components/bestMaterials/index.sass b/src/components/bestMaterials/index.sass
@@ -108,11 +108,18 @@
 			position: relative
 			font-size: 16px
 			cursor: pointer
+			transition: transform 0.2s
 
 			&:hover
 				background-color: white
 				color: black
 
+			+bp(xl)
+				&:focus
+					background-color: white
+					color: black
+					transform: scale(1.1)
+
 			&.selected
 				background-color: white
 				color: black
@@ -263,10 +270,15 @@
 		a
 			width: 100%
 			height: 100%
+			display: block
 			position: absolute
 			left: 0
 			top: 0
 
+			+bp(xl)
+				&:focus
+					background: rgba(150, 150, 150, 0.1)
+
 	.title
 		height: 38px
 		margin-bottom: 30px
@@ -384,11 +396,16 @@
 			position: absolute
 			right: 30px
 			bottom: 20px
-			transition: background-color 0.15s
+			transition: all 0.15s
 
 			&:hover
 				background-color: black
 
+			+bp(xl)
+				&:focus
+						opacity: 1
+						transform: scale(1.1)
+
 			+bp(md)
 				width: 100%
 				padding: 10px 20px

diff --git a/src/components/tools/index.js b/src/components/tools/index.js
@@ -99,6 +99,7 @@ export default function() {
 	var toolsCount = toolsData.length;
 	function createTool(toolName, toolLogo, toolTechnologies, toolSize, toolLink) {
 		var tool = document.createElement('div');
+		tool.setAttribute('tabindex', '-1');
 		tool.classList.add('tool');
 
 		var link = document.createElement('a');

diff --git a/src/components/tools/index.sass b/src/components/tools/index.sass
@@ -40,6 +40,11 @@
 			opacity: 0
 			transition: all 0.15s
 
+			+bp(xl)
+				&:focus
+						opacity: 1
+						transform: scale(1.1)
+
 		+bp(xl)
 			&:hover a
 				opacity: 1
@@ -208,6 +213,12 @@
 		color: white
 		font-family: 'Roboto', sans-serif
 		border-radius: 0 // For mobile FF
+		transition: transform 0.2s
+
+		&:focus
+			background-color: white
+			color: black
+			transform: scale(1.1)
 
 		+bp(md)
 			width: 100%