Setting focus to top of page (accessibility)

[Erik]

I'm making an app using Kendo and need to make it Section 508 compliant and accessible.  One of the issues i'm having is that when a user navigates to a new page after clicking on a ListView item, the focus needs to change to the top title bar, but that's not working when I use ListView.  I tell the focus to change in the data-after-show method of each page. It works if I go to the page via a KendoMobileButton or Kendo Tab bar button, but not for a ListView item.  Here is my data-after-show method:

   

function setFocusToTop() {
     //first, since header is dynamically generated,we need to find the current page title element.
     var id = app.view().wrapper[0].attributes['id'].value;
     var newId = id + "-hTitle";

     //give it an ID so we're 100% sure we're only finding the right one...not necessary, but worth the attempt.
     $('#' + id + ' .viewTitleStyle:visible').attr('id', newId);
     //give it a tabindex since it's not an input control.  this lets us focus it
     $('#' + newId).attr('tabindex', '-1');
     $('#' + newId).focus();

 }

 

And here are my templates for my listview:

<script type="text/x-kendo-template" id="customListViewNoDescriptionTemplate">
       <div class="km-listview-link noDesc" role="button">
           <div class="graphic-container"><img class="item-photo" src="${image}" aria-hidden="true" /></div>
           <h3 class="item-title">${name}</h3>
       </div>
   </script>

And here is how I create/bind the listview with that template:

$("#myHome-listview").kendoMobileListView({
                    dataSource: myDataSource,
                    template: $("#customListViewNoDescriptionTemplate").html(),
                    click: listViewLinkClick
                });

I'm testing using Cordova on an iPhone using iOS9+ with VoiceOver turned on.  Does anyone have any advice as to how to modify my ListView binding or template so that the focus event will work?

[Petyo]

Hello Erik,

 

iOS safari is very picky when it comes to setting focus. In fact, it ignores any focus calls which are not directly performed in touch/mouse event handlers. There are plenty of details and discussions of that problem in Stack Overflow, but I haven't seen any solution to that problem. 

 

Regards,
Petyo
Telerik

 

 

[Erik]

I believe you are correct, I was just wondering if there was any insight on how to adjust templates or anything, given that the KendoMobileButtons and TabStrip both don't seem to have this problem, it's just the ListView.

I've tried, for example, to make the templates wrapped in an <a href="javascript:app.navigate(${url})"> but this throws errors.

[Erik]

So after an extended period of trial and error, I was able to work around this.  Here's how:

I wasn't able to navigate to new pages/urls using the <a> tag in my template, but I was able to call a simple javascript function so I changed my div from the original template into an <a> and instead of trying to navigate, the href just calls the focus change function.  This <a> counts as using a touch event handler, while the bound click event does not, so I set my focus here.

<a class="km-listview-link noDesc" role="button" href="javascript:setFocusToTop();">
   <div class="graphic-container"><img class="item-photo" src="${image}" aria-hidden="true" /></div>
   <h3 class="item-title">${name}</h3>
# if(typeof description!="undefined") {#  <p class="item-info">${description}</p>   # }#
        </a>

The bound click event still needs to do the navigation, as I was getting jQuery errors when I tried to do it within the template.  It doesn't appear to occur during a touch event handler, but it still navigates just fine.

 

[Petyo]

Hello Erik,

 

thank you for sharing the workaround. The approach you have taken would work, as long as the focus call is kept in the stack of the event handler. 

 

Regards,
Petyo
Telerik