V8: Make the content tree keyboard accessible (#5729)

umbraco · Jun 27, 2019 · 405e9a7 · 405e9a7
1 parent 4d90322
commit 405e9a7
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 52 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/accessibility/sr-only.less b/src/Umbraco.Web.UI.Client/src/less/accessibility/sr-only.less
@@ -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;
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -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";

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-a11y.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-a11y.less
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less
@@ -27,13 +27,15 @@
 }
 
 .umb-action-link {
+    position: relative;
     white-space: nowrap;
     font-size: 15px;
     color: @black;
     padding: 9px 25px 9px 20px;
     text-decoration: none;
     cursor: pointer;
     display: flex;
+    width: 100%;
     align-items: center;
 
     body.touch & {

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
@@ -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;
     }
 }

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -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;

diff --git a/src/Umbraco.Web.UI.Client/src/less/modals.less b/src/Umbraco.Web.UI.Client/src/less/modals.less
@@ -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*/

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html
@@ -6,10 +6,14 @@ <h1>{{menuDialogTitle}}</h1>
     <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>

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
@@ -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)">&nbsp;</ins>
+             ng-click="load(node)">&nbsp;
+             <!-- 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>
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
@@ -8,9 +8,9 @@ <h5>
                     {{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 @@ <h5>
                     {{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"

diff --git a/src/Umbraco.Web.UI.Client/src/views/content/create.html b/src/Umbraco.Web.UI.Client/src/views/content/create.html
@@ -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,45 +10,54 @@ <h5 ng-show="selectBlueprint"><localize key="blueprints_selectBlueprint">Select
                 <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}}
                             <small>
                                 {{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 @@ <h5 ng-show="selectBlueprint"><localize key="blueprints_selectBlueprint">Select
     </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>