V8: Make the content tree keyboard accessible (#5729)
This commit is contained in:
Mike
@@ -0,0 +1,24 @@
|
||||
|
||||
// sr-only - based on the boot strap naming conventions used to remove an element from the view, whilst retaining accessibily for screen readers. More info available at https://getbootstrap.com/docs/4.0/utilities/screenreaders/
|
||||
// --------------------------------------------------
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
|
||||
&--focusable:active,
|
||||
&--focusable:focus,
|
||||
&--hoverable:hover {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
@@ -80,8 +80,10 @@
|
||||
|
||||
@import "forms/umb-validation-label.less";
|
||||
|
||||
// Umbraco Accessibility
|
||||
@import "accessibility/sr-only.less";
|
||||
|
||||
// Umbraco Components
|
||||
@import "components/application/umb-app-a11y.less";
|
||||
@import "components/application/umb-app-header.less";
|
||||
@import "components/application/umb-app-content.less";
|
||||
@import "components/application/umb-tour.less";
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
@@ -27,6 +27,7 @@
|
||||
}
|
||||
|
||||
.umb-action-link {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
font-size: 15px;
|
||||
color: @black;
|
||||
@@ -34,6 +35,7 @@
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
body.touch & {
|
||||
|
||||
@@ -8,12 +8,28 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover ins {
|
||||
&:hover .umb-tree-item__arrow {
|
||||
visibility: visible;
|
||||
cursor: pointer
|
||||
}
|
||||
}
|
||||
|
||||
.umb-tree-item__arrow {
|
||||
position: relative;
|
||||
margin-left: -16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
visibility: hidden;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
transition: color 120ms;
|
||||
|
||||
&:hover {
|
||||
color: @ui-option-type-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-tree-item > .umb-tree-item__inner {
|
||||
|
||||
&:hover .umb-tree-item__label {
|
||||
@@ -95,7 +111,7 @@
|
||||
|
||||
a,
|
||||
.umb-tree-icon,
|
||||
ins {
|
||||
.umb-tree-item__arrow {
|
||||
color: @ui-active-type !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,20 +15,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ins {
|
||||
margin: -4px 0 0 -16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
visibility: hidden;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
transition: color 120ms;
|
||||
|
||||
&:hover {
|
||||
color: @ui-option-type-hover;
|
||||
}
|
||||
}
|
||||
|
||||
i.noSpr {
|
||||
display: inline-block;
|
||||
margin-top: 1px;
|
||||
@@ -62,7 +48,7 @@
|
||||
}
|
||||
|
||||
body.touch .umb-tree {
|
||||
ins {
|
||||
.umb-tree-item__arrow {
|
||||
font-size: 14px;
|
||||
visibility: visible;
|
||||
padding: 7px;
|
||||
@@ -104,7 +90,13 @@ body.touch .umb-tree {
|
||||
}
|
||||
|
||||
> .umb-options {
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0 10px 0 auto;
|
||||
padding: 9px 5px;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
|
||||
.umb-tree-icon {
|
||||
@@ -178,7 +170,7 @@ body.touch .umb-tree {
|
||||
}
|
||||
|
||||
.umb-options {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-end;
|
||||
@@ -192,6 +184,20 @@ body.touch .umb-tree {
|
||||
background: @btnBackgroundHighlight;
|
||||
}
|
||||
|
||||
// NOTE - We're having to repeat ourselves here due to an .sr-only class appearing in umbraco/lib/font-awesome/css/font-awesome.min.css
|
||||
&.sr-only--hoverable:hover,
|
||||
&.sr-only--focusable:focus {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-end;
|
||||
padding: 9px 5px;
|
||||
text-align: center;
|
||||
margin: 0 10px 0 auto;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
i {
|
||||
height: 5px !important;
|
||||
width: 5px !important;
|
||||
|
||||
@@ -113,6 +113,10 @@
|
||||
bottom: 0px;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
|
||||
.btn.umb-outline {
|
||||
position: relative
|
||||
}
|
||||
}
|
||||
|
||||
/*we will always make sure to wrap iframe dialogs in proper padding*/
|
||||
|
||||
@@ -6,10 +6,14 @@
|
||||
<div class='umb-modalcolumn-body'>
|
||||
<ul class="umb-actions">
|
||||
<li data-element="action-{{action.alias}}" ng-click="executeMenuItem(action)" class="umb-action" ng-class="{sep:action.separator, '-opens-dialog': action.opensDialog}" ng-repeat="action in menuActions">
|
||||
<a class="umb-action-link" prevent-default>
|
||||
<button class="umb-action-link btn-reset umb-outline" prevent-default umb-auto-focus ng-if="$index === 0">
|
||||
<i class="icon icon-{{action.cssclass}}"></i>
|
||||
<span class="menu-label">{{action.name}}</span>
|
||||
</a>
|
||||
</button>
|
||||
<button class="umb-action-link btn-reset umb-outline" prevent-default ng-if="$index !== 0">
|
||||
<i class="icon icon-{{action.cssclass}}"></i>
|
||||
<span class="menu-label">{{action.name}}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<li class="umb-tree-item" data-element="tree-item-{{::node.dataElement}}" ng-class="getNodeCssClass(node)" on-right-click="altSelect(node, $event)">
|
||||
<div class="umb-tree-item__inner" ng-swipe-right="options(node, $event)" ng-dblclick="load(node)" >
|
||||
<ins data-element="tree-item-expand"
|
||||
<button data-element="tree-item-expand"
|
||||
class="umb-tree-item__arrow umb-outline btn-reset"
|
||||
ng-class="{'icon-navigation-right': !node.expanded || node.metaData.isContainer, 'icon-navigation-down': node.expanded && !node.metaData.isContainer}"
|
||||
ng-style="{'visibility': (scope.enablelistviewexpand === 'true' || node.hasChildren && (!node.metaData.isContainer || isDialog)) ? 'visible' : 'hidden'}"
|
||||
ng-click="load(node)"> </ins>
|
||||
ng-click="load(node)">
|
||||
<!-- TODO: Use localization for this text -->
|
||||
<span class="sr-only">Expand child items for {{node.name}}</span>
|
||||
</button>
|
||||
|
||||
<i class="icon umb-tree-icon sprTree" ng-class="::node.cssClass" title="{{::node.title}}" ng-click="select(node, $event)" ng-style="::node.style"></i>
|
||||
<span class="umb-tree-item__annotation"></span>
|
||||
<a class="umb-tree-item__label umb-outline" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>
|
||||
|
||||
<!-- NOTE: These are the 'option' elipses -->
|
||||
<a data-element="tree-item-options" class="umb-options" ng-click="options(node, $event)" ng-if="::node.menuUrl"><i></i><i></i><i></i></a>
|
||||
<button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-click="options(node, $event)" ng-if="::node.menuUrl"><i></i><i></i><i></i></button>
|
||||
<div ng-show="node.loading" class="l"><div></div></div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
{{tree.name}}
|
||||
</a>
|
||||
</h5>
|
||||
<a data-element="tree-item-options" class="umb-options" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(tree.root, $event)" ng-swipe-right="options(tree.root, $event)">
|
||||
<button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(tree.root, $event)" ng-swipe-right="options(tree.root, $event)">
|
||||
<i></i><i></i><i></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<umb-tree-item class="umb-animated"
|
||||
ng-repeat="child in tree.root.children"
|
||||
@@ -34,9 +34,9 @@
|
||||
{{group.name}}
|
||||
</a>
|
||||
</h5>
|
||||
<a data-element="tree-item-options" class="umb-options umb-outline" ng-hide="group.isContainer || !group.menuUrl" ng-click="options(group, $event)" ng-swipe-right="options(group, $event)">
|
||||
<button data-element="tree-item-options" class="umb-options umb-outline btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-hide="group.isContainer || !group.menuUrl" ng-click="options(group, $event)" ng-swipe-right="options(group, $event)">
|
||||
<i></i><i></i><i></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<umb-tree-item class="umb-animated"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div ng-controller="Umbraco.Editors.Content.CreateController">
|
||||
|
||||
|
||||
<div class="umb-dialog-body with-footer" ng-cloak>
|
||||
|
||||
<div class="umb-pane">
|
||||
@@ -10,16 +10,16 @@
|
||||
<p class="abstract" ng-if="!hasSettingsAccess"><localize key="create_noDocumentTypesWithNoSettingsAccess"/></p>
|
||||
<div ng-if="hasSettingsAccess">
|
||||
<p class="abstract"><localize key="create_noDocumentTypes" /></p>
|
||||
<a class="btn" href="#settings/documentTypes/edit/{{contentTypeId}}?view=permissions" ng-click="close()">
|
||||
<button class="btn umb-outline" href="#settings/documentTypes/edit/{{contentTypeId}}?view=permissions" ng-click="close()">
|
||||
<localize key="create_noDocumentTypesEditPermissions"/>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="umb-actions umb-actions-child" ng-if="selectContentType && allowedTypes.length > 0">
|
||||
<ul class="umb-actions umb-actions-child" ng-if="selectContentType && allowedTypes.length > 0" >
|
||||
|
||||
<li class="umb-action" data-element="action-create-{{docType.alias}}" ng-repeat="docType in allowedTypes | orderBy:'name':false">
|
||||
<a class="umb-action-link" ng-click="createOrSelectBlueprintIfAny(docType)">
|
||||
<button class="umb-action-link umb-outline btn-reset" ng-click="createOrSelectBlueprintIfAny(docType)" umb-auto-focus ng-if="$index === 0">
|
||||
<i class="large icon {{docType.icon}}"></i>
|
||||
<span class="menu-label">
|
||||
{{docType.name}}
|
||||
@@ -27,28 +27,37 @@
|
||||
{{docType.description}}
|
||||
</small>
|
||||
</span>
|
||||
</a>
|
||||
</button>
|
||||
<button class="umb-action-link umb-outline btn-reset" ng-click="createOrSelectBlueprintIfAny(docType)" ng-if="$index !== 0">
|
||||
<i class="large icon {{docType.icon}}"></i>
|
||||
<span class="menu-label">
|
||||
{{docType.name}}
|
||||
<small>
|
||||
{{docType.description}}
|
||||
</small>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<ul class="umb-actions umb-actions-child" ng-if="selectBlueprint">
|
||||
|
||||
<li class="umb-action" ng-repeat="blueprint in selectableBlueprints | orderBy:'name':false">
|
||||
<a class="umb-action-link" ng-click="createFromBlueprint(blueprint.id)">
|
||||
<button class="umb-action-link umb-outline btn-reset" ng-click="createFromBlueprint(blueprint.id)">
|
||||
<i class="large icon {{docType.icon}}"></i>
|
||||
<span class="menu-label">
|
||||
{{blueprint.name}}
|
||||
</span>
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="umb-action sep" ng-show="allowBlank">
|
||||
<a class="umb-action-link" ng-click="createBlank(docType)">
|
||||
<button class="umb-action-link umb-outline btn-reset" ng-click="createBlank(docType)">
|
||||
<i class="large icon {{docType.icon}}"></i>
|
||||
<span class="menu-label">
|
||||
<localize key="blueprints_blankBlueprint">Blank</localize>
|
||||
</span>
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
@@ -57,8 +66,8 @@
|
||||
</div>
|
||||
|
||||
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
|
||||
<button class="btn btn-info" ng-click="closeDialog(true)">
|
||||
<localize key="buttons_somethingElse">Do something else</localize>
|
||||
<button class="btn btn-info umb-outline" ng-click="closeDialog(true)">
|
||||
<localize key="buttons_somethingElse">All Actions</localize>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user