From fae34b7ed8d68b3fff895a9febd098774c50d93a Mon Sep 17 00:00:00 2001
From: Torsten Brendgen <torsten.brendgen@microsoft.com>
Date: Tue, 18 Aug 2026 16:18:14 +0200
Subject: [PATCH] feat: Update default footer elements for improved styling and
 accessibility

---
 classic/custom-branding-classic.js              | 13 +++++++++----
 deployment/add-custombranding.ps1               | 14 ++++++++++----
 src/extensions/customBranding/BrandingConfig.ts | 13 +++++++++----
 tests/BrandingConfig.test.js                    | 12 ++++++++++--
 4 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/classic/custom-branding-classic.js b/classic/custom-branding-classic.js
index 63e5b8c..fb43585 100644
--- a/classic/custom-branding-classic.js
+++ b/classic/custom-branding-classic.js
@@ -202,13 +202,18 @@
             type: 'div',
             attributes: { role: 'contentinfo', 'aria-label': 'Portalverwaltung' },
             styles: {
-                'background-color': '#323130', color: '#ffffff', padding: '12px 16px',
-                'text-align': 'center', width: '100%', 'box-sizing': 'border-box'
+                padding: '8px 16px', 'text-align': 'right', width: '100%', 'box-sizing': 'border-box'
             },
             children: [{
-                type: 'a', content: 'Portal Settings',
+                type: 'a',
                 attributes: { href: '~sitecollection/SitePages/PortalSettings.aspx' },
-                styles: { color: '#ffffff', 'text-decoration': 'underline' }
+                children: [{
+                    type: 'span',
+                    attributes: { 'class': 'ms-Icon ms-Icon--Settings', 'aria-hidden': 'true' },
+                    styles: { 'margin-right': '4px' }
+                }, {
+                    type: 'span', content: 'Portal Settings'
+                }]
             }]
         }];
     }
diff --git a/deployment/add-custombranding.ps1 b/deployment/add-custombranding.ps1
index b8a8b07..eb8faa1 100644
--- a/deployment/add-custombranding.ps1
+++ b/deployment/add-custombranding.ps1
@@ -44,13 +44,19 @@ function New-DefaultFooterElements {
         type = 'div'
         attributes = @{ role = 'contentinfo'; 'aria-label' = 'Portalverwaltung' }
         styles = @{
-            'background-color' = '#323130'; color = '#ffffff'; padding = '12px 16px'
-            'text-align' = 'center'; width = '100%'; 'box-sizing' = 'border-box'
+            padding = '8px 16px'; 'text-align' = 'right'; width = '100%'; 'box-sizing' = 'border-box'
         }
         children = @(@{
-            type = 'a'; content = 'Portal Settings'
+            type = 'a'
             attributes = @{ href = '~sitecollection/SitePages/PortalSettings.aspx' }
-            styles = @{ color = '#ffffff'; 'text-decoration' = 'underline' }
+            children = @(
+                @{
+                    type = 'span'
+                    attributes = @{ class = 'ms-Icon ms-Icon--Settings'; 'aria-hidden' = 'true' }
+                    styles = @{ 'margin-right' = '4px' }
+                },
+                @{ type = 'span'; content = 'Portal Settings' }
+            )
         })
     })
 }
diff --git a/src/extensions/customBranding/BrandingConfig.ts b/src/extensions/customBranding/BrandingConfig.ts
index e7bca10..14c0d47 100644
--- a/src/extensions/customBranding/BrandingConfig.ts
+++ b/src/extensions/customBranding/BrandingConfig.ts
@@ -149,13 +149,18 @@ function createDefaultFooterElements(): any[] {
     type: 'div',
     attributes: { role: 'contentinfo', 'aria-label': 'Portalverwaltung' },
     styles: {
-      'background-color': '#323130', color: '#ffffff', padding: '12px 16px',
-      'text-align': 'center', width: '100%', 'box-sizing': 'border-box'
+      padding: '8px 16px', 'text-align': 'right', width: '100%', 'box-sizing': 'border-box'
     },
     children: [{
-      type: 'a', content: 'Portal Settings',
+      type: 'a',
       attributes: { href: '~sitecollection/SitePages/PortalSettings.aspx' },
-      styles: { color: '#ffffff', 'text-decoration': 'underline' }
+      children: [{
+        type: 'span',
+        attributes: { class: 'ms-Icon ms-Icon--Settings', 'aria-hidden': 'true' },
+        styles: { 'margin-right': '4px' }
+      }, {
+        type: 'span', content: 'Portal Settings'
+      }]
     }]
   }];
 }
diff --git a/tests/BrandingConfig.test.js b/tests/BrandingConfig.test.js
index 2320f5a..e75b4fa 100644
--- a/tests/BrandingConfig.test.js
+++ b/tests/BrandingConfig.test.js
@@ -22,10 +22,18 @@ assert(empty.config.portalSettings.providerKey === 'custombranding', 'PortalSett
 assert(empty.config.portalSettings.contractVersion === 1, 'PortalSettings Contract-Version fehlt.');
 assert(empty.config.enabled === true, 'Branding muss standardmaessig aktiviert sein.');
 assert(empty.config.placeholderbottom.elements.length === 1, 'Der Standard-Footer fehlt.');
-assert(empty.config.placeholderbottom.elements[0].children[0].content === 'Portal Settings',
+var defaultFooterLink = empty.config.placeholderbottom.elements[0].children[0];
+assert(defaultFooterLink.children[1].content === 'Portal Settings',
   'Der Standard-Footer enthaelt nicht den Portal-Settings-Link.');
-assert(empty.config.placeholderbottom.elements[0].children[0].attributes.href ===
+assert(defaultFooterLink.attributes.href ===
   siteUrl + '/SitePages/PortalSettings.aspx', 'Der Standard-Footer verweist nicht auf PortalSettings.');
+assert(defaultFooterLink.children[0].attributes.class === 'ms-Icon ms-Icon--Settings',
+  'Das Settings-Icon fehlt im Standard-Footer.');
+assert(empty.config.placeholderbottom.elements[0].styles['text-align'] === 'right',
+  'Der Standard-Footer muss rechtsbuendig sein.');
+assert(empty.config.placeholderbottom.elements[0].styles['background-color'] === undefined &&
+  defaultFooterLink.styles === undefined,
+  'Der Standard-Footer darf Hintergrund und Standardtypografie nicht ueberschreiben.');
 
 var emptyBottom = normalize({ placeholderbottom: { elements: [] } }, siteUrl);
 assert(emptyBottom.config.placeholderbottom.elements.length === 1,