yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
V8: Login form accessibility improvements and form input tabbed focus styles
This commit is contained in:
Warren Buckley
2019-04-24 10:25:13 +01:00
committed by GitHub
parent c21b740c71 233f00e2d4
commit 9333426985
5 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umblogin.directive.js
View File

@@ -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();
}

13
src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
View File

@@ -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);
};

5
src/Umbraco.Web.UI.Client/src/less/forms.less
View File

@@ -250,7 +250,10 @@ input[type="color"],
&:focus {
border-color: @inputBorderFocus;
outline: 0;
outline: none \9; /* IE6-9 */
.tabbing-active & {
outline: 2px solid @inputBorderTabFocus;
}
}
}

1
src/Umbraco.Web.UI.Client/src/less/variables.less
View File

@@ -376,6 +376,7 @@
@inputBackground: @white;
@inputBorder: @gray-8;
@inputBorderFocus: @gray-7;
@inputBorderTabFocus: @blueExtraDark;
@inputBorderRadius: 0;
@inputDisabledBackground: @gray-10;
@formActionsBackground: @gray-9;

2
src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
View File

@@ -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;">