Merge pull request #1698 from adobe/dev

DevToMaster 28 August 2025

Author: rismehta

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/clientlibs/site/js/checkboxgroupview.js

@@ -40,7 +40,8 @@
             errorDiv: `.${CheckBoxGroup.bemBlock}__errormessage`,
             tooltipDiv: `.${CheckBoxGroup.bemBlock}__shortdescription`,
             item:  `.${CheckBoxGroup.bemBlock}-item`,
-            optionLabel: `${CheckBoxGroup.bemBlock}__option-label`
+            optionLabel: `${CheckBoxGroup.bemBlock}__option-label`,
+            optionLink: `${CheckBoxGroup.bemBlock}__links`
         };
 
         constructor(params) {
@@ -97,6 +98,16 @@
                     this.setInactive();
                 });
             })
+
+            let optionLinks = this.element.querySelectorAll(`.${CheckBoxGroup.selectors.optionLink}`);
+            const actionKeys = ['Enter', ' ', 'Spacebar', 'Space'];
+            optionLinks.forEach(optionLink => {
+                optionLink.addEventListener('keydown', (e)=>{
+                    if(actionKeys.includes(e.key)) {
+                        optionLink.click();
+                    }
+                });
+            });
         }
 
         #updateModelValue(widget) {

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>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js

@@ -127,14 +127,20 @@
              */
             #bindEvents() {
                 const _self = this;
-                this.getNextButtonDiv().addEventListener("click", function (event) {
-                    _self.#navigateToNextTab();
-                })
-                this.getPreviousButtonDiv().addEventListener("click", function (event) {
-                    _self.#navigateToPreviousTab();
-                })
-
+                const actionKeys = ['Enter', ' ', 'Spacebar', 'Space'];
 
+                ["click", "keydown"].forEach(function(event){
+                    _self.getNextButtonDiv().addEventListener(event, function(event){
+                        if (event.type ==='click' || (event.type === 'keydown' && actionKeys.includes(event.key))) {
+                            _self.#navigateToNextTab();
+                        }
+                    });
+                    _self.getPreviousButtonDiv().addEventListener(event, function(event){
+                        if (event.type ==='click' || (event.type === 'keydown' && actionKeys.includes(event.key))) {
+                            _self.#navigateToPreviousTab();
+                        }
+                    });
+                })
             }
 
             /**

ui.frontend/src/view/FormFieldBase.js

@@ -249,7 +249,7 @@ class FormFieldBase extends FormField {
         this.#syncLabel()
         this.#syncWidget()
         this.#syncShortDesc()
-        this. #syncLongDesc()
+        this.#syncLongDesc()
         this.#syncAriaDescribedBy()
         this.#syncError()
         this.#syncAriaLabel()