0

I have an asp menu control as menu items which I' trying to add a new attribute tabindex="0" to gain focus on the menu items with keyboard navigation. 

   <Site:DynamicMenu ID="DynamicID" runat="server"/> //this is from Master page

   <asp:Menu ID="IDHere" runat="server" Orientation="Horizontal"></asp:Menu> // this is from Menu rendering page

I have added a new class to it and added Tabindex property(to gain focus each time) to the control so bind a keyboard event which can be used by ADA users. I was able to add role="button" via jQuery which stayed on the control in browser. But the Tabindex property never stays put. On further debugging, I noticed that this control has a tabindex property as "-1" generated from server side code which was replacing the new tabindex="0" that I had appended to the above asp control. The server side script is not in my control(at-least that's what I think?). Are there other options that I can make this tabindex="0" overwrite for my menu so it will gain focus?

Below is what I added to the control:

   <asp:Menu ID="IDHere" runat="server" Orientation="Horizontal" cssClass="keyboardFn" Tabindex="0"></asp:Menu>

Script(which appended the attr to the a tag that is generated: 

   $("#IDHere").attr("role", "button"); //appending the attribute
   $('.keyboardFn').keydown( function (e) {
    //doing the thing here
   }

Tag that renders in the browser is below:

   <a class="menu1" href="#" onclick="__doPostBack('ctl00$DynamicID$IDHere','1')" tabindex="-1" role="button">Menu Name1</a>

If you notice, the role="button" stays put, but the tabindex keeps replacing due to the script below from webresources server generated code:

    .....
    menuItem.hover(false);
    menuItem.blur();
    ......
    .......
     blur: function() { this.setTabIndex(-1); } // this is what I think is replacing the tabindex that I'm trying to set.

Is there a way to overwrite this property to maintain the new value on a condition basis for my page? I have browsed tremendously and failed.

I have found the below post, but it's not/won't work in my case. Any help appreciated!

Setting ASP.NET Button attributes client side and read attribute value server side

  • This is the problem with mixing WebForms, which are very high level web controls with JQuery (which is very low level - to the point of actual JS code). If you want to reclaim control over what actually gets rendered please consider moving to MVC technology. – LongChalk Apr 02 '19 at 07:14
  • @LongChalk That exactly was my point! Unfortunately I'm unable to change much of the code unless I force it using some external force :D. Looking for some ideas on the same. –  Apr 02 '19 at 07:22

0 Answers0