Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

Section in row repeat is not keyboard accessible

SA-15967


Summary



A row repeat add a new section has been configured everytime the add icon is clicked. First item in the section is not in focus after a new row has been added. Section can't be accessed using keyboard. 

Error Messages



n/a

Steps to Reproduce



1. Include the PegaWAI ruleset in the application. 
2. Create a section with various fields. 
3. Add the section in a row repeat 
4. Use the keyboard and add a new row. The fields in the section cannot be accessed via keyboard.

Root Cause



If Accessibility is enabled, pega.ui.Doc.prototype.getFocusOnNewRow method in pega_ui_repeatlayout file is being called twice. Once from focusNewRow method and again in the setTimeout method. First time it is called with 3 arguments and second time with no arguments. This method has to be called with 3 arguments. 



Resolution



Add the below code in UserWorkForm :
 
<script>
  $(document).ready(function(){
    if(pega && pega.ui && pega.ui.Doc && pega.ui.Doc.prototype.getFocusOnNewRow && pega.u && pega.u.d && pega.u.d.isAccessible && pega.u.d.getFocusOnNewRow){
      pega.ui.Doc.prototype.getFocusOnNewRow = function(paramPropertyName, paramIndexInList, reloadElement){
        if(pega.u.d.isAccessible && !this.bFocused){
            window.setTimeout(function(){
              pega.u.d.getFocusOnNewRow(paramPropertyName, paramIndexInList, reloadElement);
            }, 100);
            this.bFocused = true;
            return;
        }
 
        var srcSourceIndex = -1;
        var nextSourceIndex;
        var nextElement;
        var isInsert = false;
 
        if(typeof(paramPropertyName)=="string"){
            strPropertyName = paramPropertyName;
        }
        if(typeof(paramIndexInList)!="undefined"){
            if(paramIndexInList===""){
                isInsert = true;
                paramIndexInList = 0;
            }
            if(paramIndexInList == -1)
                paramIndexInList = 0;
            indexInList = paramIndexInList;
        }
                                try{
                                                var indexOfNewRow = parseInt(indexInList)+1;
                                                var strTrId = "";
            if(isNaN(indexOfNewRow)){
                strTrId = trim(strPropertyName)+indexInList;
            }
            else{                         
                strTrId = trim(strPropertyName)+indexOfNewRow;
            }
            var parentRow = pega.util.Dom.getElementsById(strTrId, reloadElement);
            var newRows = parentRow;
            if(parentRow) parentRow = parentRow[0];
                               
            if(isInsert && (indexOfNewRow == 1) && (parentRow)){
                var tmpParentRow = parentRow;
                var tmpIndexOfNewRow = indexOfNewRow;
                while(tmpParentRow != null){
                    tmpParentRow = pega.util.Dom.getElementsById(trim(strPropertyName) + tmpIndexOfNewRow, reloadElement);
                    tmpIndexOfNewRow++;
                }
                tmpIndexOfNewRow = tmpIndexOfNewRow - 2;
                parentRow = pega.util.Dom.getElementsById(trim(strPropertyName) + tmpIndexOfNewRow, reloadElement);
                var newRows = parentRow;
                if(parentRow) parentRow = parentRow[0];
            }
                               
            if(newRows && newRows.length){
                for(var i=0;i<newRows.length;i++) {
                var parentRow = newRows[i];
                if(parentRow) {
 
                var inputTypes = new Array("input", "select", "textarea", "button", "a");
                for(var k=0; k<inputTypes.length; k++){
                    var inputElements = parentRow.getElementsByTagName(inputTypes[k]);
                    for(var j=0; j<inputElements.length; j++){
                        if(inputElements[j].sourceIndex){
                            eltSourceIndex = inputElements[j].sourceIndex;
                        }else{
                            eltSourceIndex = this.getSourceIndex(inputElements[j], reloadElement);
                        }
                       
                        if(srcSourceIndex == -1 && (inputElements[j].type != "hidden") && inputElements[j].style.display!="none"){
                            srcSourceIndex = eltSourceIndex;
                        }
                        if((srcSourceIndex >= eltSourceIndex)  && (inputElements[j].type != "hidden") && inputElements[j].style.display!="none"){
                            if(nextSourceIndex == null){
                                nextSourceIndex = eltSourceIndex;
                                nextElement = inputElements[j];
                            }else if(nextSourceIndex > eltSourceIndex){
                                nextSourceIndex = eltSourceIndex;
                                nextElement = inputElements[j];                                                                                            
                            }
                        }
                    }
                }
 
                if(nextElement && nextElement.disabled==true && nextElement.getAttribute("DSSource")){
                    var counter = 0;
                    var funcRef = function(){
                        try{
                            if(nextElement.disabled == true && counter<5){
                                counter++;
                                window.setTimeout(funcRef,500);
                                return;
                            }
                            nextElement.focus();
                            if(document.activeElement != nextElement){
                                nextElement.focus();
                            }
                        }catch(exception){}
                    };
                    window.setTimeout(funcRef,500);
                    return;
                }else{
                    if(nextElement) {
                    nextElement.focus();
                    if(document.activeElement != nextElement){
                        nextElement.focus();
                    }
                    return;
                    }
                }
                   }
                }                                             
            }
                                                if (typeof(paramIndexInList)!="undefined"  && paramIndexInList!=0 && parentRow==null )
                                                                this.getFocusOnNewRow(paramPropertyName, paramIndexInList-1, reloadElement);
                                }catch (exception){}
      }
                }
  });
 
</script>

Published January 31, 2016 - Updated October 8, 2020

Was this useful?

0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us