SA-216

Summary

In a portal with the accessibility framework enabled, from My Work landing page, if you tab to the column header of any worklist then press enter to sort the column the column does sort. However the focus appears to moves to the 1st page number in the paging control. In order to sort in the opposite direction (resort) you must use tabbing to go from there back to the column you wish to sort the press enter again.

Normal accessibility conventions would be that focus would stay on the column header being sorted and to sort in the opposite direction would be to just press enter again.

Error Messages

None. The following screen shots illustrate the issue.

Navigate to column header, prior to sort:



After sort, no focus shown:



After hitting tab key to show focus. Focus has been reset to first focusable element of the list view (in this case, the paging breadcrumb for page 2):

Steps to Reproduce

On the My Work landing page add a listview with sorting and paging enabled. Ensure there are enough items in the list to cause paging. Tab to any column header and press enter. The column will sort but the focus will move away from the column header. 

Root Cause

When a list view column header is clicked in order to sort the report on that column, the refresh that occurs causes the focus to be reset to the first focusable element on the list view. With accessibility enabled, this requires visually impaired users to re-navigate back to the column header (by repeatedly hitting the Tab key) every time they want to reverse the sort order. PRPC currently does not support the behavior of retaining the focus point, and this is not fixable in the current release.

Resolution

An enhancement request has been submitted for this issue (FDBK-8621).

This issue can also be resolved through the following local change: 

Developer should do the following:

1) Create a custom non-auto-generated section containing the following JavaScript to save the list view and column IDs:

<script>
var orig;

if(!orig)
orig = pega.ui.ListView.prototype.sortColumn;

pega.ui.ListView.prototype.sortColumn = function(strColumnName,strQueryTimeStamp,e){ 

var lvArr = pega.util.Dom.getElementsById("embeddedlvbody");
for(var i=0;i<lvArr.length;i++)
{
if(pega.util.Dom.isAncestor(lvArr[i].parentNode,e.srcElement))
{
lvId=lvArr[i].parentNode.id;
}
}

var cName = e.srcElement.className;
if(cName=="lv_header_span")
{
var par = e.srcElement.parentNode;
indexVal = par.colIndex;
}

if(cName=="lv_header_col")
{
indexVal=e.srcElement.colIndex;

}

if(cName=="rplistarrowup")
{
var par = e.srcElement.parentNode.parentNode.parentNode;
indexVal=par.colIndex;
}

if(e.srcElement.tagName=='A')
{
var par = e.srcElement.parentNode.parentNode;
indexVal=par.colIndex;

}

orig.call(this,strColumnName,strQueryTimeStamp,e);
setTimeout("setFocus()",500);

}



</script>
<script>
function setFocus()
{


var arr = pega.util.Dom.getElementsByClassName("lv_header_span","span",lvId);
for(var j=0;j<arr.length;j++)
{
if(arr[j].parentNode.colIndex==indexVal)
{

arr[j].focus();

break;
}

}

}


</script>


2) Include this custom section as the Footer in the affected list view(s):



3) Add the following JavaScript code to declare the ID variables in the UserWorkForm HTML entry point:

<script>
var indexVal = -1;
var lvId="";
 
</script>