feat: Update default footer elements for improved styling and accessibility

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',
+                padding: '8px 16px', 'text-align': 'right', width: '100%', 'box-sizing': 'border-box'
-                'text-align': 'center', 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'
+                }]
             }]
         }];
     }

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'
+            padding = '8px 16px'; 'text-align' = 'right'; width = '100%'; 'box-sizing' = 'border-box'
-            'text-align' = 'center'; 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' }
+            )
         })
     })
 }

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',
+      padding: '8px 16px', 'text-align': 'right', width: '100%', 'box-sizing': 'border-box'
-      'text-align': 'center', 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'
+      }]
     }]
   }];
 }

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,