From a45a8c5b135b9c3371ce748846f3ac7dc3ed3e81 Mon Sep 17 00:00:00 2001
From: Poornima Nayar <poornimakrishnav@gmail.com>
Date: Thu, 2 Jan 2020 18:21:06 +0000
Subject: [PATCH] Accessibility improvements and clean up of mini list view
 (#7398)

---
 .../src/less/listview.less                    | 31 ++++++++++++++++++-
 .../views/components/umb-mini-list-view.html  | 21 ++++++-------
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less
index 975dbdbd4a..80b0f21735 100644
--- a/src/Umbraco.Web.UI.Client/src/less/listview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/listview.less
@@ -136,7 +136,36 @@
 /* TEMP */
 
 .umb-minilistview {
-    .umb-table-row.not-allowed { opacity: 0.6; cursor: not-allowed; }
+    .umb-table-row.not-allowed {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    div.umb-mini-list-view__breadcrumb {
+        margin-bottom: 10px;
+    }
+
+    div.no-display {
+        display: none
+    }
+
+    div.umb-table-cell-padding {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+
+    div.umb-table-cell .form-search {
+        width: 100%;
+        margin-right: 0;
+
+        input {
+            width: 100%;
+        }
+
+        .icon-search {
+            font-size: 14px;
+        }
+    }
 }
 
 .umb-listview .table-striped tbody td {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
index e14315f9f4..5f3893e9c5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
@@ -5,14 +5,14 @@
         ng-repeat="miniListView in miniListViews">
 
         <div class="umb-mini-list-view__title">
-            <i class="umb-mini-list-view__title-icon {{ miniListView.node.icon }}"></i>
+            <i class="umb-mini-list-view__title-icon {{ miniListView.node.icon }}" aria-hidden="true"></i>
             <h4 class="umb-mini-list-view__title-text">{{ miniListView.node.name }}</h4>
         </div>
 
         <div class="umb-mini-list-view__breadcrumb">
 
             <a ng-if="showBackButton()" href="" class="umb-mini-list-view__back" ng-click="exitMiniListView()">
-                <i class="icon-arrow-left umb-mini-list-view__back-icon"></i>
+                <i class="icon-arrow-left umb-mini-list-view__back-icon" aria-hidden="true"></i>
                 <span class="umb-mini-list-view__back-text"><localize key="general_back">Back</localize></span> /
             </a>
 
@@ -30,13 +30,12 @@
             <!-- Head -->
             <div class="umb-table-head">
                 <div class="umb-table-row">
-                    <div class="umb-table-cell" style="display: none;"></div>
-                    <div class="umb-table-cell" style="padding-top: 8px; padding-bottom: 8px;">
-                        <form class="form-search -no-margin-bottom" style="width: 100%; margin-right: 0;" novalidate>
+                    <div class="umb-table-cell no-display"></div>
+                    <div class="umb-table-cell umb-table-cell-padding">
+                        <form class="form-search -no-margin-bottom" novalidate>
                             <div class="inner-addon left-addon">
-                                <i class="icon icon-search" style="font-size: 14px;"></i>
+                                <i class="icon icon-search" aria-hidden="true"></i>
                                 <input
-                                    style="width: 100%;"
                                     class="form-control search-input"
                                     type="text"
                                     localize="placeholder"
@@ -67,8 +66,8 @@
                     <div class="umb-table-cell umb-table-cell--auto-width" ng-class="{'umb-table-cell--faded':child.published === false}">
                         <div class="flex items-center">
                             <ins class="icon-navigation-right umb-table__row-expand" ng-click="openNode($event, child)" ng-class="{'umb-table__row-expand--hidden': child.metaData.hasChildren !== true}">&nbsp;</ins>
-                            <i class="umb-table-body__icon umb-table-body__fileicon {{child.icon}}"></i>
-                            <i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
+                            <i class="umb-table-body__icon umb-table-body__fileicon {{child.icon}}" aria-hidden="true"></i>
+                            <i class="umb-table-body__icon umb-table-body__checkicon icon-check" aria-hidden="true"></i>
                         </div>
                     </div>
                     <div class="umb-table-cell black" ng-class="{'umb-table-cell--faded':child.published === false}">{{ child.name }}</div>
@@ -76,8 +75,8 @@
 
                 <!-- Load indicator when the list doesn't have items -->
                 <div ng-if="!miniListView.loading && !miniListView.children" class="umb-table-row umb-table-row--empty">
-                    <span ng-if="search === ''"><localize key="general_noItemsInList"></localize></span>
-                    <span ng-if="search !== ''"><localize key="general_searchNoResult"></localize></span>
+                    <span ng-if="search === ''"><localize key="general_noItemsInList">No items have been added</localize></span>
+                    <span ng-if="search !== ''"><localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize></span>
                 </div>
 
                 <!-- Load indicator when the list doesn't have items -->