Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility: Create drop down can't be accessed via keyboard #5960

Merged
merged 13 commits into from
Sep 5, 2019
Merged

Accessibility: Create drop down can't be accessed via keyboard #5960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f71e314
Refactor <a> to <button> and add aria-hidden on the empty span holdin…
BatJan Jul 19, 2019
e5ca92d
add aria-expanded to communicate whether the button is expanded or no…
BatJan Jul 19, 2019
c9c55c4
Convert menu items from <a> to <button> and hiding the icon using ari…
BatJan Jul 19, 2019
65546c2
Cherry picking style changes from the temp-v8-5882 branch
BatJan Jul 19, 2019
f52a043
Add "text-align: left" ensuring the button left aligns properly
BatJan Jul 19, 2019
ad6ae04
Change <a> to <button> and hide the <i> for screen readers
BatJan Jul 19, 2019
356ce5b
Convert <a> to <button> and hide <i> from screen readers. Also fixing…
BatJan Jul 19, 2019
1876179
Add deep-blur directive to events file so we can detect when one tabs…
BatJan Jul 19, 2019
105ce24
Add toggleDropdown and leaveDropdown function in the controller and a…
BatJan Jul 19, 2019
c66ca3d
add the deep-blur directive and use the leaveDropdown and toggleDropd…
BatJan Jul 19, 2019
4126281
Fix bug where the whole group of buttons was added in a button too...…
BatJan Jul 19, 2019
44179e1
Merge branch 'v8/dev' into pr/5960
nul800sebastiaan Sep 5, 2019
2a7afe4
Fix up the tracking of blueprints
nul800sebastiaan Sep 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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