Skip to content

Commit

Permalink
Accessibility: Create drop down can't be accessed via keyboard (#5960)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BatJan @nul800sebastiaan
BatJan authored and nul800sebastiaan committed Sep 5, 2019
1 parent 47f365e commit 428da6c
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 32 deletions.
2 changes: 2 additions & 0 deletions src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@
// -----------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
Expand Down
4 changes: 4 additions & 0 deletions src/Umbraco.Web.UI.Client/lib/bootstrap/less/sprites.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@
.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > li > a:focus > [class*=" icon-"],
.dropdown-menu > li > button:hover > [class^="icon-"],
.dropdown-menu > li > button:focus > [class^="icon-"],
.dropdown-menu > li > button:hover > [class*=" icon-"],
.dropdown-menu > li > button:focus > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
Expand Down
10 changes: 8 additions & 2 deletions src/Umbraco.Web.UI.Client/src/less/canvas-designer.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,8 @@ a, a:hover{
background-clip: padding-box;
}

.dropdown-menu > li > a {
.dropdown-menu > li > a,
.dropdown-menu > li > button {
display: block;
padding: 3px 20px;
clear: both;
Expand All @@ -174,7 +175,12 @@ a, a:hover{
cursor:pointer;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
color: #000000;
background: #e4e0dd;
}
Expand Down
3 changes: 2 additions & 1 deletion src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
left: auto;
}

.umb-button-group__sub-buttons>li>button,
.umb-button-group__sub-buttons>li>a {
display: flex;
}
Expand All @@ -20,7 +21,7 @@
}

.umb-button-group__toggle {
border-radius: 0px @baseBorderRadius @baseBorderRadius 0;
border-radius: 0 @baseBorderRadius @baseBorderRadius 0;
border-left: 1px solid rgba(0,0,0,0.09);
margin-left: -2px;
padding-left: 10px;
Expand Down
22 changes: 21 additions & 1 deletion src/Umbraco.Web.UI.Client/src/less/navs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,27 @@
color: @ui-option-type;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
.dropdown-menu > li > button {
background: transparent;
border: 0;
padding: 8px 20px;
color: @ui-option-type;
display: block;
clear: both;
font-weight: normal;
line-height: 20px;
white-space: nowrap;
cursor:pointer;
width: 100%;
text-align: left;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
color: @ui-option-type-hover;
background: @ui-option-hover;
}
Expand Down
14 changes: 13 additions & 1 deletion src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ function listViewController($scope, $routeParams, $injector, $timeout, currentUs
$scope.actionInProgress = false;
$scope.selection = [];
$scope.folders = [];
$scope.page = {};
$scope.page = {
createDropdownOpen: false
};
$scope.listViewResultSet = {
totalPages: 0,
items: []
Expand Down Expand Up @@ -795,8 +797,18 @@ function listViewController($scope, $routeParams, $injector, $timeout, currentUs
.search("blueprintId", blueprintId);
}

function toggleDropdown () {
$scope.page.createDropdownOpen = !$scope.page.createDropdownOpen;
}

function leaveDropdown () {
$scope.page.createDropdownOpen = false;
}

$scope.createBlank = createBlank;
$scope.createFromBlueprint = createFromBlueprint;
$scope.toggleDropdown = toggleDropdown;
$scope.leaveDropdown = leaveDropdown;

//GO!
initView();
Expand Down
64 changes: 37 additions & 27 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,57 +12,68 @@

<umb-editor-sub-header-section ng-if="(listViewAllowedTypes && listViewAllowedTypes.length > 0 && (selection.length == 0)) && (currentNodePermissions == null || currentNodePermissions.canCreate)">

<!-- Renders when it's only possible to create one specific document type for, which no blueprint exists-->
<div class="btn-group" ng-show="createAllowedButtonSingle">
<a class="btn btn-white" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)">
<button type="button" class="btn btn-white" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
<localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
</a>
</button>
</div>

<div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints">
<a class="btn btn-white dropdown-toggle" data-toggle="dropdown" ng-href="">
<span ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)">
<!-- Renders when it's only possible to create one specific document type for which a blueprint exits-->
<div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints" deep-blur="leaveDropdown()">
<button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
<span>
<localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
</span>
<span class="caret" ng-click="page.createDropdownOpen = !page.createDropdownOpen"></span>
</a>
<span class="caret"></span>
</button>


<umb-dropdown ng-if="page.createDropdownOpen" on-close="page.createDropdownOpen = false">
<umb-dropdown-item ng-repeat="blueprint in listViewAllowedTypes[0].blueprints | orderBy:'name':false track by $index">
<a ng-click="createFromBlueprint(entityType, listViewAllowedTypes[0].alias, blueprint.id)">
<i class="{{::listViewAllowedTypes[0].icon}}"></i>
{{::blueprint.name}}
</a>
</umb-dropdown-item>
<umb-dropdown-item ng-repeat="contentType in listViewAllowedTypes track by contentType.key | orderBy:'name':false">
<button type="button" ng-click="createBlank(entityType,contentType.alias)" prevent-default>
<i class="{{::contentType.icon}}" aria-hidden="true"></i>
{{::contentType.name}} <span ng-show="contentType.blueprints" style="text-transform: lowercase;">(<localize key="blueprints_blankBlueprint">blank</localize>)</span>
</button>

<button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)" prevent-default>
&nbsp;&nbsp;<i class="{{::contentType.icon}}" aria-hidden="true"></i>
{{::blueprint.name}}
</button>
</umb-dropdown-item>
</umb-dropdown>
</div>

<div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints">
<a class="btn btn-white dropdown-toggle" data-toggle="dropdown" ng-href="" ng-click="page.createDropdownOpen = !page.createDropdownOpen">
<!-- Renders when it's possible to create multiple document types and blueprints for one or more of the document types-->
<div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints" deep-blur="leaveDropdown()">
<button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
<localize key="actions_create">Create</localize>
<span class="caret"></span>
</a>

<span class="caret" aria-hidden="true"></span>
</button>
<umb-dropdown ng-if="page.createDropdownOpen" on-close="page.createDropdownOpen = false">
<umb-dropdown-item ng-repeat="contentType in listViewAllowedTypes track by contentType.key | orderBy:'name':false">
<a ng-click="createBlank(entityType,contentType.alias)" prevent-default ng-href="">
<i class="{{::contentType.icon}}"></i>
<button type="button" ng-click="createBlank(entityType,contentType.alias)" prevent-default>
<i class="{{::contentType.icon}}" aria-hidden="true"></i>
{{::contentType.name}} <span ng-show="contentType.blueprints" style="text-transform: lowercase;">(<localize key="blueprints_blankBlueprint">blank</localize>)</span>
</a>
<a href="" ng-repeat="blueprint in contentType.blueprints | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)" prevent-default>
&nbsp;&nbsp;<i class="{{::contentType.icon}}"></i>
</button>


<button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)" prevent-default>
&nbsp;&nbsp;<i class="{{::contentType.icon}}" aria-hidden="true"></i>
{{::blueprint.name}}
</a>
</button>
</umb-dropdown-item>
</umb-dropdown>
</div>

<ul class="umb-actions umb-actions-child">

<li ng-repeat="blueprint in docType.blueprints | orderBy:'name':false">
<li ng-repeat="blueprint in docType.blueprints track by blueprint.id | orderBy:'name':false">
<a ng-click="createFromBlueprint(blueprint.id)">
<i class="large {{docType.icon}}"></i>
<span class="menu-label">
{{blueprint.name}}
{{blueprint.name}}&nbsp;
</span>
</a>
</li>
Expand Down Expand Up @@ -96,7 +107,6 @@
<strong ng-show="actionInProgress" ng-bind="bulkStatus"></strong>

<umb-loader position="bottom" ng-show="actionInProgress"></umb-loader>

</umb-editor-sub-header-section>

</umb-editor-sub-header-content-left>
Expand Down

0 comments on commit 428da6c

Please sign in to comment.