SAK-40743 Library: standardized the focus outlines in Sakai, includin…

…g buttons, links, and form elements (sakaiproject#6101)

library/src/morpheus-master/bootstrap-sass-3.3.7/assets/stylesheets/bootstrap/mixins/_tab-focus.scss

@@ -1,8 +1,6 @@
 // WebKit-style focus
 
 @mixin tab-focus() {
-  // SAK-32484 Bootstrap 3 default for tab-focus totally ignores Firefox
-  outline: 5px auto Highlight;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }

library/src/morpheus-master/sass/_defaults.scss

@@ -396,9 +396,9 @@ $overview-portlet-title-background-color: $tool-tab-background-color !default;
 $instruction-color: #5c5c5c !default;
 $instruction-background-color: #fff !default;
 
-// Accessibility
-// This should be visible based on your button colors and is based on webkit's default
-
+/* focus styles for all control elements (e.g. buttons, form controls, links, etc) */
 $focus-outline-width: 3px;
+$focus-outline-style: solid;
 $focus-outline-color: #5b9dd9;
+$sakai-focus-outline: $focus-outline-width $focus-outline-style $focus-outline-color;
 $focus-outline-offset: 2px;

library/src/morpheus-master/sass/base/_defaults.scss

@@ -22,8 +22,9 @@ a{
 	}
 	&[href]{  // This means a[href]
 		color: $link-color;
-		&:focus, &::-moz-focus-inner{ // This would compile to -> a[href]:focus, a[href]::moz-focus-inner
-			outline-color: invert;
+		&:focus{
+			outline: $sakai-focus-outline;
+			outline-offset: $focus-outline-offset;
 		}
 		&:hover{
 			color: $link-hover-color;
@@ -33,6 +34,7 @@ a{
 		&:active{
 			color: $link-active-color;
 			background-color: $link-active-background-color;
+			outline: 0;		// no focus outline on click
 		}
 		&.btn{
 			text-decoration: none;
@@ -117,7 +119,7 @@ input[type="checkbox"], input[type="radio"]{
 	@include appearance(none);
 	&:focus
 	{
-		box-shadow: 0px 0px 1px 4px Highlight;
+		box-shadow: 0px 0px $focus-outline-width $focus-outline-width $focus-outline-color;
 		outline: 0 none; // to override Bootstrap
 		outline-offset: 0; // to override Bootstrap
 	}

library/src/morpheus-master/sass/base/_extendables.scss

@@ -110,6 +110,10 @@
 		background-image: none;
 	}
 
+	&:focus {
+		box-shadow: 0px 0px $focus-outline-width $focus-outline-width $focus-outline-color;
+	}
+
 	&[disabled="disabled"],&[disabled],&[disabled="true"] {
 		opacity: 0.7;
 		background-color: #f3f3f3;
@@ -174,7 +178,7 @@
 	}
 
 	&:focus {
-		outline: $focus-outline-width solid $focus-outline-color;
+		outline: $sakai-focus-outline;
 		outline-offset: $focus-outline-offset;
 	}
 

library/src/morpheus-master/sass/modules/_footer.scss

@@ -33,10 +33,6 @@
 				border-right: 0 none;
 			}
 		}
-
-		a:focus {
-			outline-offset: 2px;	// allow you to read the link text without the outline obstructing
-		}
 	}
 
 	##{$namespace}footer--poweredBy {

library/src/morpheus-master/sass/modules/_toolmenu.scss

@@ -364,6 +364,11 @@ nav#subSites{
 					{
 						color: $tool-menu-collapse-icon-color;
 					}
+
+					&:focus 
+					{
+						outline-offset: -#{$focus-outline-width};	// to match the width of the default link focus to fit in the link container
+					}
 				}
 
 				span.fa-angle-double-left

library/src/morpheus-master/sass/modules/navigation/_base.scss

@@ -812,7 +812,7 @@ body.is-logged-out{
 					color: $sites-nav-menu-item-icon-color;
 				}
 
-				&:hover {
+				&:hover, &:focus {
 					border-top: $sites-nav-menu-item-hover-border-top;
 					border-right: $sites-nav-menu-item-hover-border-right;
 					border-bottom: $sites-nav-menu-item-hover-border-bottom;
@@ -824,6 +824,10 @@ body.is-logged-out{
 					}
 				}
 
+				&:focus {
+					outline-offset: -#{$focus-outline-width};	// to match the width of the default link focus to fit in the link container
+				}
+
 				&:active {
 					outline: 0 none;	// hiding on click
 				}
@@ -895,7 +899,7 @@ body.is-logged-out{
 					background: $sites-nav-menu-item-hover-background;
 				}
 
-				&:hover {
+				&:hover, &:focus {
 					border-top: $sites-nav-menu-item-hover-border-top;
 					border-right: $sites-nav-menu-item-hover-border-right;
 					border-bottom: $sites-nav-menu-item-hover-border-bottom;
@@ -904,6 +908,10 @@ body.is-logged-out{
 					color: $sites-nav-menu-item-hover-icon-color;
 				}
 
+				&:focus {
+					outline-offset: -#{$focus-outline-width};	// to match the width of the default link focus to fit in the link container
+				}
+
 				&:active {
 					outline: 0 none;	// hiding on click
 				}
@@ -1075,6 +1083,10 @@ body.is-logged-out{
 								border-left-color: $sites-nav-submenu-item-hover-left-border-color;
 							}
 						}
+
+						&:focus {
+							outline-offset: -#{$focus-outline-width};	// to match the width of the default link focus to fit in the tool's link container
+						}
 					}
 					&.#{$namespace}sitesNav__submenuitem__gotosite {
 						border-top: 1px solid $sites-nav-submenu-item-divider-color;

library/src/morpheus-master/sass/modules/tool/_menu.scss

@@ -32,7 +32,7 @@
 				text-transform: $tool-tab-text-transform;
 				letter-spacing: $tool-tab-text-letter-spacing;
 
-				&:hover{
+				&:hover, &:focus {
 					color: $tool-tab-hover-text-color;
 					background: $tool-tab-hover-background-color;
 					text-decoration: none;
@@ -47,7 +47,12 @@
 						right: -1px;
 						top: -1px;
 					}
-			  }
+				}
+
+				&:focus {
+					position: relative;		// so the outline doesn't get hidden by adjacent tabs
+					outline-offset: -#{$focus-outline-width};	// to match the width of the default link focus to fit in the tool's link container
+				}
 			}
 			&.current{
 				color: $tool-tab-active-text-color;