Setting focus to top of page (accessibility)

5 posts, 0 answers
  1. Erik
    Erik avatar
    4 posts
    Member since:
    Apr 2009

    Posted 05 Jan Link to this post

    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?

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 07 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Erik
    Erik avatar
    4 posts
    Member since:
    Apr 2009

    Posted 07 Jan Link to this post

    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.

  5. Erik
    Erik avatar
    4 posts
    Member since:
    Apr 2009

    Posted 07 Jan in reply to Erik Link to this post

    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.

     

  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 11 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready