FORMS-18644: Desktop, RWD Tablet, RWD Mobile - Controls have same name but different actions @sunnym @vavarshn

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/questionMark.html

@@ -1,4 +1,6 @@
-<template data-sly-template.questionMark="${@ componentId, longDescription, bemBlock}">
-  <button class="${bemBlock}__questionmark" data-sly-test="${longDescription}" aria-expanded="false" title="Help text">
+<template data-sly-template.questionMark="${@ componentId, longDescription, bemBlock, componentTitle}">
+  <sly data-sly-set.namedTitle="${componentTitle} ${'help text' @ i18n, locale=request.locale}" />
+  <sly data-sly-set.fullTitle="${componentTitle ? namedTitle : 'Help text' @ i18n, locale=request.locale}" />
+  <button class="${bemBlock}__questionmark" data-sly-test="${longDescription}" aria-expanded="false" title="${fullTitle}">
   </button>
-</template>
+</template>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/accordion.html

@@ -32,8 +32,7 @@
     <div class="cmp-accordion__label-container" role="heading">
       <div data-sly-call="${label.label @componentId=accordion.id, labelValue=accordion.label.value, labelVisible=accordion.label.visible, labelRichText=accordion.label.richText, bemBlock='cmp-accordion'}"
           data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=accordion.id, longDescription=accordion.description, bemBlock='cmp-accordion'}"
-          data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=accordion.id, longDescription=accordion.description, bemBlock='cmp-accordion', componentTitle=accordion.label.value}" data-sly-unwrap></div>
     </div>
     <div data-sly-call="${shortDescription.shortDescription @componentId=accordion.id, shortDescriptionVisible=accordion.tooltipVisible, shortDescription=accordion.tooltip, bemBlock='cmp-accordion'}"
          data-sly-unwrap></div>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/button.html

@@ -28,7 +28,7 @@
      data-cmp-is="adaptiveFormButton"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
   <div class="cmp-adaptiveform-button__help-container">
-    <div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button'}" data-sly-unwrap></div>
+    <div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button', componentTitle=button.label.value}" data-sly-unwrap></div>
   </div>
   <button
       type="button"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v2/button/button.html

@@ -28,7 +28,7 @@
      data-cmp-is="adaptiveFormButton"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
   <div class="cmp-adaptiveform-button__help-container">
-    <div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button'}" data-sly-unwrap></div>
+    <div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button', componentTitle=button.label.value}" data-sly-unwrap></div>
   </div>
   <!-- Button is disabled to prevent the button from being clicked before JS is initialized, else it would default to HTML form submit behavior -->
   <button

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html

@@ -33,7 +33,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[checkbox.id, 'widget']}"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
      <div class="cmp-adaptiveform-checkbox__help-container">
-      <div data-sly-call="${questionMark.questionMark @componentId=checkbox.id, longDescription=checkbox.description, bemBlock='cmp-adaptiveform-checkbox'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=checkbox.id, longDescription=checkbox.description, bemBlock='cmp-adaptiveform-checkbox', componentTitle=checkbox.label.value}" data-sly-unwrap></div>
     </div>
 
     <div class="cmp-adaptiveform-checkbox__widget-container">

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/checkboxgroup.html

@@ -36,7 +36,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[checkboxgroup.id, 'widget']}">
     <div class="cmp-adaptiveform-checkboxgroup__label-container">
         <div data-sly-call="${label.label @componentId=widgetId, labelValue=checkboxgroup.label.value, labelVisible=checkboxgroup.label.visible, labelRichText=checkboxgroup.label.richText, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup', componentTitle=checkboxgroup.label.value}" data-sly-unwrap></div>
     </div>
     <sly data-sly-call="${widget.widget @ checkboxgroup = checkboxgroup}"></sly>
     <div data-sly-call="${shortDescription.shortDescription @componentId=checkboxgroup.id, shortDescriptionVisible=checkboxgroup.tooltipVisible, shortDescription=checkboxgroup.tooltip, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html

@@ -33,7 +33,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[datePicker.id, 'widget']}">
      <div class="cmp-adaptiveform-datepicker__label-container">
         <div data-sly-call="${label.label @componentId=widgetId, labelValue=datePicker.label.value, labelVisible=datePicker.label.visible, labelRichText=datePicker.label.richText, bemBlock='cmp-adaptiveform-datepicker'}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=datePicker.id, longDescription=datePicker.description, bemBlock='cmp-adaptiveform-datepicker'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=datePicker.id, longDescription=datePicker.description, bemBlock='cmp-adaptiveform-datepicker', componentTitle=datePicker.label.value}" data-sly-unwrap></div>
     </div>
     <sly data-sly-use.minDate="${'dateformatter.js' @date=datePicker.minimumDate}"
          data-sly-use.maxDate="${'dateformatter.js' @date=datePicker.maximumDate}"></sly>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html

@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[dropdown.id, 'widget']}">
     <div class="cmp-adaptiveform-dropdown__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=dropdown.label.value, labelVisible=dropdown.label.visible, labelRichText=dropdown.label.richText, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=dropdown.id, longDescription=dropdown.description, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=dropdown.id, longDescription=dropdown.description, bemBlock='cmp-adaptiveform-dropdown', componentTitle=dropdown.label.value}" data-sly-unwrap></div>
     </div>
     <select class="cmp-adaptiveform-dropdown__widget"
             id="${widgetId}"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html

@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[email.id, 'widget']}">
     <div class="cmp-adaptiveform-emailinput__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=email.label.value, labelVisible=email.label.visible, labelRichText=email.label.richText, bemBlock='cmp-adaptiveform-emailinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=email.id, longDescription=email.description, bemBlock='cmp-adaptiveform-emailinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=email.id, longDescription=email.description, bemBlock='cmp-adaptiveform-emailinput', componentTitle=email.label.value}" data-sly-unwrap></div>
     </div>
     <input title="${email.tooltipVisible ? '' : email.tooltipText}"
            class="cmp-adaptiveform-emailinput__widget"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html

@@ -32,7 +32,7 @@
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
     <div class="cmp-adaptiveform-fileinput__label-container">
       <div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput', isHeading=true}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput', componentTitle=file.label.value}" data-sly-unwrap></div>
     </div>
     </br>
     <div class="cmp-adaptiveform-fileinput__widget-container" role="region">

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html

@@ -32,7 +32,7 @@
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
     <div class="cmp-adaptiveform-fileinput__label-container">
       <div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput', isHeading=true}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput', componentTitle=file.label.value}" data-sly-unwrap></div>
     </div>
     </br>
     <div class="cmp-adaptiveform-fileinput__container cmp-adaptiveform-fileinput__widget-container" role="region">

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html

@@ -35,7 +35,7 @@
   data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
  <div class="cmp-adaptiveform-fileinput__label-container">
    <div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput', isHeading=true}" data-sly-unwrap></div>
-   <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
+   <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput', componentTitle=file.label.value}" data-sly-unwrap></div>
  </div>
  </br>
  <div class="cmp-adaptiveform-fileinput__container cmp-adaptiveform-fileinput__widget-container" role="region">

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fragment/v1/fragment/fragment.html

@@ -36,7 +36,7 @@
          style="${container.backgroundStyle @ context='styleString'}">
         <div class="cmp-adaptiveform-fragment__label-container">
           <div data-sly-call="${label.label @componentId=fragment.id, labelValue=label.label.value, labelVisible=label.label.visible, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
-          <div data-sly-call="${questionMark.questionMark @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment', componentTitle=label.label.value}" data-sly-unwrap></div>
         </div>
         <div data-sly-call="${shortDescription.shortDescription @componentId=fragment.id, shortDescriptionVisible=fragment.tooltipVisible, shortDescription=fragment.tooltip, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
         <div data-sly-call="${longDescription.longDescription @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html

@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[numberinput.id, 'widget']}">
     <div class="cmp-adaptiveform-numberinput__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=numberinput.label.value, labelVisible=numberinput.label.visible, labelRichText=numberinput.label.richText, bemBlock='cmp-adaptiveform-numberinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=numberinput.id, longDescription=numberinput.description, bemBlock='cmp-adaptiveform-numberinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=numberinput.id, longDescription=numberinput.description, bemBlock='cmp-adaptiveform-numberinput', componentTitle=numberinput.label.value}" data-sly-unwrap></div>
     </div>
     <input
             class="cmp-adaptiveform-numberinput__widget"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/responsiveGrid.html

@@ -54,7 +54,7 @@
          style="${container.backgroundStyle @ context='styleString'}">
         <div class="cmp-container__label-container" role="heading">
           <div data-sly-call="${label.label @componentId=panel.id, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-container'}" data-sly-unwrap></div>
-          <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container', componentTitle=panel.label.value}" data-sly-unwrap></div>
         </div>
         <div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-container'}" data-sly-unwrap></div>
         <div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/simple.html

@@ -64,7 +64,7 @@
          style="${container.backgroundStyle @ context='styleString'}">
         <div class="cmp-container__label-container">
           <div data-sly-call="${label.label @componentId=panel.id, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-container', isHeading=true}" data-sly-unwrap></div>
-          <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container', componentTitle=panel.label.value}" data-sly-unwrap></div>
         </div>
         <div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-container'}" data-sly-unwrap></div>
         <div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html

@@ -35,7 +35,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[radioButton.id, 'widget']}">
     <div class="cmp-adaptiveform-radiobutton__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=radioButton.label.value, labelVisible=radioButton.label.visible, labelRichText=radioButton.label.richText, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton', componentTitle=radioButton.label.value}" data-sly-unwrap></div>
     </div>
     <div class="cmp-adaptiveform-radiobutton__widget ${radioButton.orientation}" id="${widgetId}" role="radiogroup">
       <div data-sly-list="${radioButton.enums}" data-sly-unwrap>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html

@@ -34,7 +34,7 @@
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
     <div class="cmp-adaptiveform-switch__label-container">
         <div data-sly-call="${label.label @componentId=widgetId, labelValue=switch.label.value, labelVisible=switch.label.visible, labelRichText=switch.label.richText, bemBlock='cmp-adaptiveform-switch'}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=switch.id, longDescription=switch.description, bemBlock='cmp-adaptiveform-switch'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=switch.id, longDescription=switch.description, bemBlock='cmp-adaptiveform-switch', componentTitle=switch.label.value}" data-sly-unwrap></div>
     </div>
 
     <div class="cmp-adaptiveform-switch__container" id="${widgetId}">

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/tabsontop.html

@@ -30,7 +30,7 @@
   data-sly-test.widgetId="${'{0}-{1}' @ format=[panel.id, 'widget']}">
      <div class="cmp-tabs__label-container" role="heading">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs', componentTitle=panel.label.value}" data-sly-unwrap></div>
      </div>
      <div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
      <div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs'}" data-sly-unwrap></div>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html

@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[telText.id, 'widget']}">
     <div class="cmp-adaptiveform-telephoneinput__label-container">
       <div data-sly-call="${label.label @componentId=widgetIdd, labelValue=telText.label.value, labelVisible=telText.label.visible, labelRichText=telText.label.richText, bemBlock='cmp-adaptiveform-telephoneinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=telText.id, longDescription=telText.description, bemBlock='cmp-adaptiveform-telephoneinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=telText.id, longDescription=telText.description, bemBlock='cmp-adaptiveform-telephoneinput', componentTitle=telText.label.value}" data-sly-unwrap></div>
     </div>
     <input title="${telText.tooltipVisible ? '' : telText.tooltipText}"
            class="cmp-adaptiveform-telephoneinput__widget"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html

@@ -33,7 +33,7 @@
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
     <div class="cmp-adaptiveform-termsandcondition__label-container">
         <div data-sly-call="${label.label @componentId=tnc.id, labelValue=tnc.label.value, labelVisible=tnc.label.visible, labelRichText=tnc.label.richText, bemBlock='cmp-adaptiveform-termsandcondition', isHeading=true}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition', componentTitle=tnc.label.value}" data-sly-unwrap></div>
     </div>
     <div class="cmp-adaptiveform-termsandcondition__widget-container" role="region">
         <div class="cmp-adaptiveform-termsandcondition__content-container ${!wcmmode.edit && tnc.showAsPopup ? 'cmp-adaptiveform-termsandcondition__content-container--modal' : ''}"