From 612b6039f2a45bd794411a2bfaa9afd7a43be2e9 Mon Sep 17 00:00:00 2001
From: "KNOWIT\\anndal3" <anna.dalsgaard@knowit.dk>
Date: Tue, 3 Oct 2023 18:10:58 +0200
Subject: [PATCH] Add aria label to umbraco property

---
 .../directives/components/property/umbproperty.directive.js    | 3 +++
 .../src/views/components/property/umb-property.html            | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
index 5a30f81d4b..11efb4b811 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
@@ -64,10 +64,13 @@
 
         function onInit() {
             vm.controlLabelTitle = null;
+            vm.controlAriaLabel = null;
             if (Umbraco.Sys.ServerVariables.isDebuggingEnabled) {
                 userService.getCurrentUser().then(function (u) {
                     if (u.allowedSections.indexOf("settings") !== -1 ? true : false) {
                         vm.controlLabelTitle = vm.property.alias;
+                        // capitalize first letter of the alias for screen readers
+                        vm.controlAriaLabel = vm.property.alias.charAt(0).toUpperCase() + vm.property.alias.slice(1);
                     }
                 });
             }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
index cc41896a0f..e3a65a215b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
@@ -9,7 +9,7 @@
 
                 <div class="control-header" ng-hide="(vm.hideLabel || vm.property.hideLabel) === true">
 
-                    <label data-element="property-label-{{vm.property.alias}}" class="control-label" for="{{vm.property.alias}}" ng-attr-title="{{vm.controlLabelTitle}}">{{vm.property.label}}<span ng-if="vm.property.validation.mandatory || vm.property.ncMandatory"><strong class="umb-control-required">*</strong></span></label>
+                    <label data-element="property-label-{{vm.property.alias}}" class="control-label" for="{{vm.property.alias}}" ng-attr-title="{{vm.controlLabelTitle}}" aria-label="Property alias: {{vm.controlAriaLabel}}">{{vm.property.label}}<span ng-if="vm.property.validation.mandatory || vm.property.ncMandatory"><strong class="umb-control-required">*</strong></span></label>
 
                     <umb-property-actions actions="vm.propertyActions"></umb-property-actions>