From 303abaea28b26b2b6f6e904ee2811b3d8f6b4fe8 Mon Sep 17 00:00:00 2001
From: Karl Butler <kbutler@carbonsix.digital>
Date: Mon, 28 Nov 2022 20:17:04 +0000
Subject: [PATCH] Accessibility Fixes for Users and Packages pages (#13087)

(cherry picked from commit 2d560e976600cff20e5010483b6327b229b74086)
---
 .../src/views/components/html/umb-control-group.html   |  2 +-
 .../src/views/packages/views/installed.html            |  2 +-
 .../src/views/users/views/users/users.html             | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html
index 1d635d2bc550..dff71a0c4d14 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html
@@ -1,7 +1,7 @@
 <div class="umb-property">
     <div class="control-group umb-control-group" ng-class="{ error: !formValid(), hidelabel: hideLabel == 'true' }">
         <div class="umb-el-wrap">
-            <label ng-if="hideLabel!=='true'" class="control-label" for="{{alias}}">
+            <label ng-if="hideLabel!=='true'" class="control-label" for="{{labelFor}}">
                 <span ng-bind-html="labelstring"></span>
                 <span ng-if="required">
                     <strong class="umb-control-required">*</strong>
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/installed.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/installed.html
index 13e3809b0b05..b68af6065efc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/views/installed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/views/installed.html
@@ -52,7 +52,7 @@
         <umb-empty-state
             ng-if="vm.installedPackages.length === 0"
             position="center">
-            <h4><strong><localize key="packager_noPackages">You don’t have any packages installed</localize>.</strong></h4>
+            <h2 class="h4"><strong><localize key="packager_noPackages">You don’t have any packages installed</localize>.</strong></h2>
             <p class="faded"><localize key="packager_noPackagesDescription">You don’t have any packages installed. Either install a local package by selecting it from your machine, or browse through available packages using the "Packages" icon in the top right of your screen</localize>.</p>
         </umb-empty-state>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
index 9afd0b0823ab..acf86263e342 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -309,9 +309,9 @@ <h3 class="bold" style="margin-bottom: 0;">
                                 </p>
                             </div>
                             <div ng-if="vm.usersViewState === 'createUser'">
-                                <h3 class="bold" style="margin-bottom: 0;">
+                                <h2 class="h3 bold" style="margin-bottom: 0;">
                                     <localize key="user_createUser">Create user</localize>
-                                </h3>
+                                </h2>
                                 <p style="line-height: 1.6em; margin-bottom: 15px;">
                                     <localize key="user_createUserHelp">Create new users to give them access to Umbraco. When a new user is created a password will be generated that you can share with the user.</localize>
                                 </p>
@@ -319,7 +319,7 @@ <h3 class="bold" style="margin-bottom: 0;">
                         </div>
 
                         <umb-control-group label="@general_name" label-for="name" required="true">
-                            <input type="text" name="name" localize="placeholder" placeholder="@placeholders_entername" class="input-block-level" ng-model="vm.newUser.name"
+                            <input type="text" name="name" id="name" localize="placeholder" placeholder="@placeholders_entername" class="input-block-level" ng-model="vm.newUser.name"
                                    umb-auto-focus required val-server-field="Name" />
                             <span ng-messages="addUserForm.name.$error" show-validation-on-submit>
                               <span class="help-inline" ng-message="required"><localize key="user_nameRequired">Required</localize></span>
@@ -329,7 +329,7 @@ <h3 class="bold" style="margin-bottom: 0;">
                         </umb-control-group>
 
                         <umb-control-group label="@general_username" label-for="username" required="true" ng-if="!vm.usernameIsEmail">
-                            <input type="text" name="username" localize="placeholder" placeholder="@placeholders_enterusername" class="input-block-level"
+                            <input type="text" name="username" id="username" localize="placeholder" placeholder="@placeholders_enterusername" class="input-block-level"
                                    ng-model="vm.newUser.username" val-server-field="Username" ng-required="vm.usernameIsEmail" />
                             <span ng-messages="addUserForm.username.$error" show-validation-on-submit >
                                 <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
@@ -339,7 +339,7 @@ <h3 class="bold" style="margin-bottom: 0;">
                         </umb-control-group>
 
                         <umb-control-group label="@general_email" label-for="email" required="true">
-                            <input type="email" name="email" localize="placeholder" placeholder="@placeholders_enteremail" class="input-block-level"
+                            <input type="email" name="email" id="email" localize="placeholder" placeholder="@placeholders_enteremail" class="input-block-level"
                                    ng-model="vm.newUser.email" required val-email val-server-field="Email" />
                             <span ng-messages="addUserForm.email.$error" show-validation-on-submit>
                               <span class="help-inline" ng-message="required"><localize key="user_emailRequired">Required</localize></span>