XWIKI-22602: Provide a UI to easily customize the logo alternative text from the colorTheme

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/companylogo.vm

@@ -30,7 +30,9 @@
 #set($themeObj = $themeDoc.getObject('FlamingoThemesCode.ThemeClass'))
 #if($themeObj)
   #set($logoname = $themeObj.getValue('logo'))
+  #set($logoalt = $themeObj.getValue('logo-description'))
 #else
+  ## Retrieve the value from the old color theme used.
   #set($themeObj = $themeDoc.getObject('ColorThemes.ColorThemeClass'))
   #set($logoname = $themeObj.getValue('logoImage'))
 #end
@@ -45,12 +47,15 @@
     #set($logourl = $prefdoc.getAttachmentURL($logo.filename))
   #end
 #end
+#if("$!{logoalt}" == '')
+  #set($logoalt = $services.localization.render('core.document.header.logo.image.text'))
+#end
 <div id="companylogo">
   <a href="$!xwiki.getURL($services.wiki.currentWikiDescriptor.mainPageReference)" rel="home" ##
     title="$escapetool.xml($services.localization.render('core.document.header.logo.anchor.text'))" ##
     #if(!$displayPageHeader)class="navbar-brand"#end>##
     <span class="sr-only">$services.localization.render('core.document.header.logo.anchor.text')</span>
     <img src="$!logourl" ##
-      alt="$escapetool.xml($services.localization.render('core.document.header.logo.image.text'))"/>##
+      alt="$escapetool.xml($logoalt)"/>##
   </a>
 </div>

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-theme/xwiki-platform-flamingo-theme-ui/src/main/resources/FlamingoThemesCode/ThemeClass.xml

@@ -644,6 +644,19 @@
       <validationRegExp/>
       <classType>com.xpn.xwiki.objects.classes.StringClass</classType>
     </logo>
+    <logo-description>
+      <customDisplay/>
+      <disabled>0</disabled>
+      <name>logo-description</name>
+      <number>63</number>
+      <picker>0</picker>
+      <prettyName>logo-description</prettyName>
+      <size>100</size>
+      <unmodifiable>0</unmodifiable>
+      <validationMessage/>
+      <validationRegExp/>
+      <classType>com.xpn.xwiki.objects.classes.StringClass</classType>
+    </logo-description>
     <navbar-default-bg>
       <customDisplay/>
       <disabled>0</disabled>

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-theme/xwiki-platform-flamingo-theme-ui/src/main/resources/FlamingoThemesCode/ThemeSheet.xml

@@ -52,7 +52,8 @@
 ############################
 #set($variables = {
   "logos": {
-    "logo": "image"
+    "logo": "image",
+    "logo-description": "text"
   },
   "base-colors": {
     "text-color": "color",
@@ -235,8 +236,16 @@
       #foreach($var in $catVar.keySet())
         #set($varName = $var)
         #set($varType = $catVar.get($varName))
+        #set($hintKey = "${obj.xWikiClass.name}_${varName}.hint")
+        #set($hint = $services.localization.render($hintKey))
+        #if($hint == $hintKey)
+          #set($hint = $NULL)
+        #end
         <div class="form-group">
           <label for="var-$varName" class="col-xs-12">@$varName</label>
+          #if ($hint)
+            <span class="col-xs-12 xHint">$escapetool.xml($hint)</span>
+          #end
           <div class="col-xs-12">
             #if($varType == 'image')
               #fieldImage($varName, $obj)
@@ -745,6 +754,14 @@ require(['jquery', 'xwiki-l10n!xwiki-flamingo-theme-messages', 'bootstrap'], fun
 
 #iframe {
   height: 400px;
+}
+
+/* When reworking the DOM of this form, use the standard vertical form structure to avoid hard-coding styles like 
+this. */
+#panel-theme-variables .xHint {
+  color: $theme.textSecondaryColor;
+  font-size: smaller;
+  margin: 0.3em 0;
 }</code>
     </property>
     <property>

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-theme/xwiki-platform-flamingo-theme-ui/src/main/resources/FlamingoThemesCode/Translations.xml

@@ -108,6 +108,7 @@ platform.flamingo.themes.defaultvalue=Default
 platform.flamingo.themes.lessCode.description=In this field, you can directly write LESS code which will be added into the skin.
 platform.flamingo.themes.local=Local
 platform.flamingo.themes.global=Global
+FlamingoThemesCode.ThemeClass_logo-description.hint=Alternative text for the logo. It should describe the logo's meaning. The localized value associated to the key "core.document.header.logo.image.text" is used by default.
 
 ###############################################################################
 ## Deprecated