tabindex for home homepage panels

  • Resolved MHJP

    (@mhjp)


    6 years, 1 month ago

    Hi. I posted a question in the general Twenty-seventeen forum and did not get any responses. Maybe someone here has some insights on how “tabindex” gets sets for each home page panel section. It seems random and I’m completely stymied and it’s affecting the anchor positions for the panels.

    Some anchors land where they are supposed to, and others land after the intended location. When I inspect the page code, the ones that work show tabindex set at ‘panel-content’ level: 

    <div class="panel-content" id="noted" tabindex="-1">
<div class="wrap">
<div class="entry-content">
<p><a name="noted"></a> </p>
<h2>Noted</h2>

    The ones that land incorrectly have tabindex set in the “a” anchor link.

    <div class="panel-content" id="video">
<div class="wrap">
<div class="entry-content">
<p><a name="video" tabindex="-1"></a></p>
<h2>A Video is Worth a Thousand Words</h2>

    It seems random from page section to page section. I can’t figure out the differences between how I set the pages up. The on page code is simple and seems the same:

    <a name="noted"></a> 
<h2>noted</h2>
[testimonial_view id="2"]

<a name="video"></a>
<h2>video</h2>
[vimeography id="1"]

    Any suggestions would be greatly appreciated! Thanks Mike

    • This topic was modified 6 years, 1 month ago by MHJP.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    Hello,

    Have you seen the anchors that this plugin inserts into front page panels?

    <div class="panel-content" id="lorem-ipsum">

    Oliver

    Thread Starter MHJP

    (@mhjp)

    Ah, does the plugin also insert “tabindex”? Any idea why it’s there in some and not other panels?

    No, I had not seen the anchors. But now that you mention that, can I use those anchors in the menu? I want the menu items, when clicked, to navigate to the panel section instead of the underlying page. So I set: .entry-title {display: none;} and set an anchor for each panel that is used as a custom link in the menu.

    Maybe there a better way to achieve this using the anchors already there?

    Thanks, Mike

    • This reply was modified 6 years, 1 month ago by MHJP.
    • This reply was modified 6 years, 1 month ago by MHJP.
    Plugin Author Oliver Campion

    (@domainsupport)

    Hi,

    Yes, the upgraded plugin adds anchor links to the .panel-content element as shown in my last message and then also adds a custom menu meta panel to allow you to add links to these anchor tags from within your menu.

    The tabindex issue may be coming from the plugin as it uses a jQuery script to smoothly scroll to locations which injects a tabindex attribute.

    Please can you confirm that the tabindex issue is resolved when you disable the Options for Twenty Seventeen plugin and let us know so we can investigate further?

    Thank you,

    Mike

    Thread Starter MHJP

    (@mhjp)

    Thanks so much. I will try out using the anchors set by the plugin.

    Confirming, yes, when I deactivate the plugin the tabindex issue goes away and my anchors work properly.

    Mike

    Thread Starter MHJP

    (@mhjp)

    One related question. Is there an easy way to make anchor-link-based menu item of the panel that is being viewed appear in a different color? mike

    Plugin Author Oliver Campion

    (@domainsupport)

    Hi Mike,

    I will put on my to-do list “investigate why the smooth scroll function requires tabindex attribute to be injected” and report back.

    With regards to the anchor-link based menu items, this was an option in the upgraded plugin but it appears to not be functioning currently so I will look into that as well and get back to you.

    Oliver

    Plugin Author Oliver Campion

    (@domainsupport)

    Hi Mike,

    We’ve noticed that on some WordPress installations, in order to see the “Front Page Sections” menu meta box when adding menu items to menus in the dashboard, you may need to click “Screen Options” at the top right of the Menus admin page and then tick the box next to “Front Page Sections”.

    However, this option is only available to websites that have upgraded the plugin and who have enabled the “Customizer – Theme Options – Front Page Sections Menus Box” option.

    I’m going to look further into the tabindex issue now.

    Oliver

    Plugin Author Oliver Campion

    (@domainsupport)

    OK, so the tabindex of -1 is added to elements when you click to scroll to them if the target element is unable to be “focused” …

    function() {
                            var $target = jQuery(target);
                            $target.focus();
                            if ($target.is(":focus")) {
                            return false;
                        } else {
                            $target.attr('tabindex','-1');
                            $target.focus();
                        };

    This is so that it can be focused programatically.

    Oliver

    Thread Starter MHJP

    (@mhjp)

    Thanks for looking into this Oliver. I don’t know much about jquery and focus. Could you describe how this works in terms of adding new panels through the interface? Why does one panel have tabindex injected and another not? Is there some particular action? Much appreciated. Mike

    • This reply was modified 6 years, 1 month ago by MHJP.
    • This reply was modified 6 years, 1 month ago by MHJP.
    Plugin Author Oliver Campion

    (@domainsupport)

    Hi Mike,

    Just looking at your site. You have a JavaScript error here …

          jQuery(document).ready(function () {
        bwg_check_ready = function () {}
        jQuery(document).keyup(function(e) {
          if ( e.keyCode == 27 ) {
            bwg_remove_loading_block();
          }
        });
      });

    … this should be wrapped in document ready function as it is calling jQuery before jQuery has been included / loaded.

    Anyway, back to your question. I’ve just had a look at WordPress “out of the box” and it looks like Twenty Seventeen (not this plugin) only adds tabindex to four elements in the admin bar (if logged in).

    Our plugin only adds a tabindex of -1 to anchor link targets if they are not able to be focused.

    It may be that your website has another plugin which is messing with your tab indexes. Have you tried disabling all plugins to see which one is creating the issue?

    One last thing, there is definitely something slowing your site down with JavaScript, so that’s also something to look into.

    Kind regards,

    Oliver

    Plugin Author Oliver Campion

    (@domainsupport)

    Hi Mike,

    Not heard from you so going to mark this one as resolved.

    Let me know if you have any other issues.

    Thanks,

    Oliver

    Thread Starter MHJP

    (@mhjp)

    Hi Oliver… apologies for just getting back. Was on vacation and just getting back to it. Thanks so much for all the fixed and insights. I see the front page sections panel under menus now and will adjust accordingly.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘tabindex for home homepage panels’ is closed to new replies.