FORMS-21075 : using tabindex to make it compatible for safari browser (#1690)

Author: AnurudraS

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

@@ -37,7 +37,7 @@
       disabled="${!button.enabled}"
       title="${button.tooltipVisible ? '' :   button.tooltipText}"
       data-cmp-data-layer="${button.data.json}"
-      aria-label="${button.label.visible != false ? '' : button.label.value}">
+      aria-label="${button.label.visible != false ? '' : button.label.value}" tabindex="0">
     <sly data-sly-call="${iconTemplate.icon @ icon=button.icon}"></sly>
     <span data-sly-test="${button.label.value && button.label.visible != false}" class="cmp-adaptiveform-button__text" data-richtext="${button.label.richText}">${button.label.value @ context = button.label.richText ? 'html' : 'text'}</span>
   </button>

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

@@ -42,7 +42,7 @@
             title="${checkbox.tooltipVisible ? '' : checkbox.tooltipText}"
             name="${checkbox.name}"
             value="${checkbox.default[0]}"
-            disabled="${!checkbox.enabled || checkbox.readOnly}" />
+            disabled="${!checkbox.enabled || checkbox.readOnly}" tabindex="0" />
 
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=checkbox.label.value, labelVisible=checkbox.label.visible, labelRichText=checkbox.label.richText, bemBlock='cmp-adaptiveform-checkbox'}" data-sly-unwrap></div>
     </div>

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

@@ -25,7 +25,7 @@
                  checked="${checkboxgroup.enums[itemList.index] in checkboxgroup.default }"
                  disabled="${!checkboxgroup.enabled || checkboxgroup.readOnly}"
                  aria-readonly="${checkboxgroup.readOnly ? 'true' : ''}"
-                 aria-label="${checkboxgroup.label.value}: ${checkboxgroup.enumNames[itemList.index]}"/>
+                 aria-label="${checkboxgroup.label.value}: ${checkboxgroup.enumNames[itemList.index]}" tabindex="0"/>
           <span>${checkboxgroup.enumNames[itemList.index] @ context = 'html'}</span>
         </label>
       </div>

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

@@ -42,7 +42,7 @@
    <div class="cmp-adaptiveform-fileinput__dragarea">
         <div class="cmp-adaptiveform-fileinput__icon"></div>
         <div class="cmp-adaptiveform-fileinput__dragtext">${file.dragDropText @context='html'}</div>
-        <button type="button" data-sly-test="${file.buttonText}" class="cmp-adaptiveform-fileinput__widgetlabel">${file.buttonText}</button>
+        <button type="button" data-sly-test="${file.buttonText}" class="cmp-adaptiveform-fileinput__widgetlabel" tabindex="0">${file.buttonText}</button>
         <input class="cmp-adaptiveform-fileinput__widget"
              data-sly-attribute.multiple="${file.isMultiple ? 'multiple' : ''}"
              style="${file.buttonText ? 'display:none' : '' @ context='styleString'}"

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

@@ -49,7 +49,7 @@
                         value="${item.toString}"
                         disabled="${!radioButton.enabled || radioButton.readOnly}"
                         checked="${radioButton.enums[itemList.index] == radioButton.default[0]}"
-                        aria-label="${radioButton.label.value}: ${radioButton.enumNames[itemList.index]}"/>
+                        aria-label="${radioButton.label.value}: ${radioButton.enumNames[itemList.index]}" tabindex="0"/>
                   <span>${radioButton.enumNames[itemList.index] @ context = 'html'}</span>
               </label>
           </div>

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

@@ -48,7 +48,7 @@
                    aria-label="${switch.label.value}"
                    disabled="${!switch.enabled || switch.readOnly}"
                    value="${switch.default}"
-                   aria-readonly="${switch.readOnly ? 'true' : ''}">
+                   aria-readonly="${switch.readOnly ? 'true' : ''}" tabindex="0">
             <div class="cmp-adaptiveform-switch__widget-slider">
                 <div class="cmp-adaptiveform-switch__circle-indicator"></div>
             </div>