Merge pull request #5304 from MMasey/v8/feature/tab-accessibility-imp…

…rovements V8: Login form accessibility improvements and form input tabbed focus styles
umbraco · Apr 24, 2019 · 9333426 · 9333426
2 parents c21b740 + 233f00e
commit 9333426
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 2 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umblogin.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umblogin.directive.js
@@ -126,6 +126,7 @@
         function togglePassword() {
             var elem = $("form[name='vm.loginForm'] input[name='password']");
             elem.attr("type", (elem.attr("type") === "text" ? "password" : "text"));
+            elem.focus();
             $(".password-text.show, .password-text.hide").toggle();
         }
 

diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
@@ -18,7 +18,20 @@ function MainController($scope, $location, appState, treeService, notificationsS
     $scope.drawer = {};
     $scope.search = {};
     $scope.login = {};
+    $scope.tabbingActive = false;
 
+    // There are a number of ways to detect when a focus state should be shown when using the tab key and this seems to be the simplest solution. 
+    // For more information about this approach, see https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
+    function handleFirstTab(evt) {
+        if (evt.keyCode === 9) {
+            $scope.tabbingActive = true;
+            window.removeEventListener('keydown', handleFirstTab);
+        }
+    }
+
+    window.addEventListener("keydown", handleFirstTab);
+
+
     $scope.removeNotification = function (index) {
         notificationsService.remove(index);
     };

diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -250,7 +250,10 @@ input[type="color"],
   &:focus {
     border-color: @inputBorderFocus;
     outline: 0;
-    outline: none \9; /* IE6-9 */
+
+    .tabbing-active & {
+        outline: 2px solid @inputBorderTabFocus;
+    }
   }
 }
 

diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -376,6 +376,7 @@
 @inputBackground:               @white;
 @inputBorder:                   @gray-8;
 @inputBorderFocus:              @gray-7;
+@inputBorderTabFocus:           @blueExtraDark;
 @inputBorderRadius:             0;
 @inputDisabledBackground:       @gray-10;
 @formActionsBackground:         @gray-9;

diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
@@ -43,7 +43,7 @@
     @Html.RenderCssHere(
         new BasicPath("Umbraco", IOHelper.ResolveUrl(SystemDirectories.Umbraco)))
 </head>
-<body ng-class="{'touch':touchDevice, 'emptySection':emptySection, 'umb-drawer-is-visible':drawer.show, 'umb-tour-is-visible': tour.show}" ng-controller="Umbraco.MainController" id="umbracoMainPageBody">
+<body ng-class="{'touch':touchDevice, 'emptySection':emptySection, 'umb-drawer-is-visible':drawer.show, 'umb-tour-is-visible': tour.show, 'tabbing-active':tabbingActive}" ng-controller="Umbraco.MainController" id="umbracoMainPageBody">
 
     <noscript>
         <div style="margin: 10px;">