From f8cff2722ded634058119e2c6851e7f5807cb3d1 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Sat, 5 Dec 2020 00:12:38 +0100
Subject: [PATCH] Package section: Edit view (#9054)

* Convert div to buttons, fix styling and fix missing brackets

* removes umb-icon ng-class attrs

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
---
 .../components/html/umb-expansion-panel.less  |  5 +--
 .../src/views/packages/edit.html              | 36 +++++++++----------
 .../src/views/packages/views/created.html     |  4 +--
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/html/umb-expansion-panel.less b/src/Umbraco.Web.UI.Client/src/less/components/html/umb-expansion-panel.less
index 2a8137e5f9..ea08794c23 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/html/umb-expansion-panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/html/umb-expansion-panel.less
@@ -10,11 +10,12 @@
     font-weight: bold;
     display: flex;
     align-items: center;
-    cursor: pointer;
     justify-content: space-between;
     color: @black;
+    width: 100%;
 
-    &:hover .umb-expansion-panel__expand {
+    &:hover .umb-expansion-panel__expand,
+    &:focus .umb-expansion-panel__expand {
         color: @gray-6;
     }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/edit.html b/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
index ce65d1cff6..ca14ec928d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
@@ -19,10 +19,10 @@
 
                 <div class="umb-expansion-panel">
 
-                    <div class="umb-expansion-panel__header" ng-click="vm.propertiesOpen = !vm.propertiesOpen">
-                        <div><localize key="packager_packageProperties">Package Properties</localize></div>
-                        <umb-icon icon="{{vm.propertiesOpen ? 'icon-navigation-up' : 'icon-navigation-down'}}" class="umb-expansion-panel__expand" ng-class="{'icon-navigation-down': !vm.propertiesOpen, 'icon-navigation-up': vm.propertiesOpen}">&nbsp;</umb-icon>
-                    </div>
+                    <button type="button" aria-expanded="{{vm.propertiesOpen}}" class="btn-reset umb-expansion-panel__header" ng-click="vm.propertiesOpen = !vm.propertiesOpen">
+                        <span><localize key="packager_packageProperties">Package Properties</localize></span>
+                        <umb-icon icon="{{vm.propertiesOpen ? 'icon-navigation-up' : 'icon-navigation-down'}}" class="umb-expansion-panel__expand">&nbsp;</umb-icon>
+                    </button>
 
                     <div class="umb-expansion-panel__content" ng-show="vm.propertiesOpen">
 
@@ -103,10 +103,10 @@
 
                 <div class="umb-expansion-panel">
 
-                    <div class="umb-expansion-panel__header" ng-click="vm.contentOpen = !vm.contentOpen">
-                        <div><localize key="packager_packageContent">Package Content</localize></div>
-                        <umb-icon icon="vm.contentOpen ? 'icon-navigation-up' : 'icon-navigation-down'" class="umb-expansion-panel__expand" ng-class="{'icon-navigation-down': !vm.contentOpen, 'icon-navigation-up': vm.contentOpen}">&nbsp;</umb-icon>
-                    </div>
+                    <button type="button" aria-expanded="{{vm.contentOpen}}" class="btn-reset umb-expansion-panel__header" ng-click="vm.contentOpen = !vm.contentOpen">
+                        <span><localize key="packager_packageContent">Package Content</localize></span>
+                        <umb-icon icon="{{vm.contentOpen ? 'icon-navigation-up' : 'icon-navigation-down'}}" class="umb-expansion-panel__expand">&nbsp;</umb-icon>
+                    </button>
 
                     <div class="umb-expansion-panel__content" ng-show="vm.contentOpen">
 
@@ -206,15 +206,13 @@
 
                 <div class="umb-expansion-panel">
 
-                    <div class="umb-expansion-panel__header" ng-click="vm.filesOpen = !vm.filesOpen">
-                        <div><localize key="packager_packageFiles">Package Files</localize></div>
-                        <umb-icon icon="{{vm.filesOpen ? 'icon-navigation-up' : 'icon-navigation-down'}}" class="umb-expansion-panel__expand" ng-class="{'icon-navigation-down': !vm.filesOpen, 'icon-navigation-up': vm.filesOpen}">&nbsp;</umb-icon>
-                    </div>
+                    <button type="button" aria-expanded="{{vm.filesOpen}}" class="btn-reset umb-expansion-panel__header" ng-click="vm.filesOpen = !vm.filesOpen">
+                        <span><localize key="packager_packageFiles">Package Files</localize></span>
+                        <umb-icon icon="{{vm.filesOpen ? 'icon-navigation-up' : 'icon-navigation-down'}}" class="umb-expansion-panel__expand">&nbsp;</umb-icon>
+                    </button>
 
                     <div class="umb-expansion-panel__content" ng-show="vm.filesOpen">
-                        <!--
-                        <p>Remember: .xslt and .ascx files for your macros will be added automaticly, but you will still need to add assemblies, images and script files manually to the list below.</p>
-                        -->
+
                         <umb-control-group
                             label="@packager_pathToFile"
                             description="@packager_pathToFileDescription">
@@ -263,10 +261,10 @@
                 </div>
 
                 <div class="umb-expansion-panel">
-                    <div class="umb-expansion-panel__header" ng-click="vm.actionsOpen = !vm.actionsOpen">
-                        <div><localize key="packager_packageActions">Package Actions</localize></div>
-                        <umb-icon icon="vm.actionsOpen ? 'icon-navigation-up' : 'icon-navigation-down'" class="umb-expansion-panel__expand" ng-class="{'icon-navigation-down': !vm.actionsOpen, 'icon-navigation-up': vm.actionsOpen}">&nbsp;</umb-icon>
-                    </div>
+                    <button type="button" aria-expanded="{{vm.actionsOpen}}" class="btn-reset umb-expansion-panel__header" ng-click="vm.actionsOpen = !vm.actionsOpen">
+                        <span><localize key="packager_packageActions">Package Actions</localize></span>
+                        <umb-icon icon="{{vm.actionsOpen ? 'icon-navigation-up' : 'icon-navigation-down'}}" class="umb-expansion-panel__expand">&nbsp;</umb-icon>
+                    </button>
                     <div class="umb-expansion-panel__content" ng-show="vm.actionsOpen">
                         <umb-control-group
                             label="@packager_actions"
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/created.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/created.html
index e3743674f9..88a2b21795 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/views/created.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/views/created.html
@@ -5,7 +5,7 @@
         <umb-editor-sub-header-content-left>
             <umb-button
                 button-style="action"
-                type="button" 
+                type="button"
                 action="vm.createPackage()"
                 label="Create package"
                 label-key="packager_createPackage">
@@ -20,7 +20,7 @@
                 <td class="flex items-center">
                     <div class="umb-package-list__item-icon">
                         <i ng-if="!createdPackage.iconUrl" class="icon-box"></i>
-                        <img ng-if="createdPackage.iconUrl" ng-src="{{createdPackage.iconUrl}}" />
+                        <img ng-if="createdPackage.iconUrl" ng-src="{{createdPackage.iconUrl}}" alt="" />
                     </div>
                     <div class="umb-package-list__item-content">
                         <div class="umb-package-list__item-name">{{ createdPackage.name }}</div>