[Resolved] Off Canvas Panel Accessibility Issues

Home Forums Support [Resolved] Off Canvas Panel Accessibility Issues

Home Forums Support Off Canvas Panel Accessibility Issues

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1972258
    Michael

    Hi All. We are using GeneratePress, GenerateBlocks PRO and WPShowPosts with great results. We came across a couple of potential accessibility issues that I wanted to check with you folks on.

    Skip To Content
    The first issue we identified was that when you tabbed and selected “Skip to Content” that button sent me to the footer. Since most of the entire homepage was developed with Elements and calls to WP short codes I’m wondering if there is a fix or we need to redesign the homepage to accommodate. I’ve included a link to a short video capture of what I describe and a link to the actual site.

    Off Canvas Accessibility
    In the second video linked below illustrates hitting the Off Canvas panel on the second tab press and it will open hitting the Enter key. If we left the menu open and tabbed it will cycle through the entire page and then finish with the content in the off canvas panel. If I open and close the panel and then tab, it runs through all of the links but you will see if you look close that it finishes with the content in the off canvas panel even when it isn’t open.

    I’ve also included a link to the live website you can open and look for yourself. I would welcome your thoughts.

    Thanks all!

    #1972548
    David
    Staff
    Customer Support

    Hi there,

    1. simplest fix would be to use the generate_before_main_content hook for your block elements. This will add the content inside the site-content container which is what the skip-link jumps to.

    2. Hmmm…. may need to get some advice on this regarding the tab through of the off canvas panel.
    But first we could try ensuring the A-Z services toggle maintains the tab-index of the primary nav, so it maintains some logical order.
    To do this you can change the A-Z buttons block elements Hook to: menu_bar_items and set its priority to 50 – this will add its HTML after the last item in the primary navigation.

    Once thats in place ill do some looking around re: the off canvas menus tab ordering.

    #1975745
    Michael

    Thank David! I’ll give it a go today and let you know our results soon. Much appreciated.

    #1975839
    David
    Staff
    Customer Support

    You’re welcome – keep us posted!

    #1976739
    Michael

    Hi David. I tried fix number one for the “Skip to Content” and it works if I create a new container and assign the hook “before_main_content” but when I go to edit the hook of something that I’ve already created, I receive the following error:

    “Updating failed. Could not update the meta value of _generate_block_type in database.”

    I’ve taken a screen capture in the private info window so you can see. This occurs whenever I try to edit the hooks and I’m not sure why. I can recreate the layout but it would be substantial work. Is it a configuration I’m missing?

    FYI – We are running a WordPress 5.7.2 in multisite running about 300-400 sites. The theme in question runs the main (parent) site and we are building a number of child themes in GP to switch our users over to over the next year or so. We also run GP premium, GenerateBlocks, GenerateBlocks Pro, WP Show Posts and WP Show Post Pro.

    Thanks again.

    #1977342
    Elvin
    Staff
    Customer Support

    Hi Michael,

    “Updating failed. Could not update the meta value of _generate_block_type in database.”

    This shouldn’t happen. A plugin may be messing with it.

    Can you try with ALL plugins disabled except GPP + GB + GB Pro and check if it still occurs?

    FYI – We are running a WordPress 5.7.2 in multisite running about 300-400 sites. The theme in question runs the main (parent) site and we are building a number of child themes in GP to switch our users over to over the next year or so. We also run GP premium, GenerateBlocks, GenerateBlocks Pro, WP Show Posts and WP Show Post Pro.

    Consider cloning the site to a dev/staging site and update to the latest version of WordPress to see if the issue goes away.

    A wise man once said:
    "Have you cleared your cache?"

    #1981185
    Michael

    Hi David,

    Thank you for the suggestions! The following are my results after I’ve incorporated you changes.

    Skip To Content
    Changing the hook on the homepage element to generate_before_main_content worked. However, I could not change the hook name when I was editing the element. I was able to work around the error by copying the entire container of the homepage element, create another block element, name it “homepage new” and then paste it in, set the hook and then display it on the front page while disabling the old homepage element. Long way around the barn, but it works. I still get that error intermittently and I have provided a screen capture of it from my local instance in the private window.

    Off Canvas Accessibility
    I was able to apply the menu_bar_items hook to the A-Z block element while I was editing it and set the priority to 50. Once I get tabbed to the A-Z tab, I would like it to return up to the secondary menu beginning with the “Canvas” link. In the video link in the private window, you can see that once I tab off of the A-Z, it goes to the Contact/Links element and then starts with the secondary menu. See the video link I’ve included below.

    *****

    Hi Elvin,

    Thanks for chiming in! I disabled as many plugins as I could (some are network activated) so I couldn’t turn all of them off. I did find that the error still occurred. To further test, I created a single instance and a multisite instance using the Local development environment for WordPress and was able to replicate the error using only the following:

    ▪ GenerateBlocks 1.4.0
    ▪ GenerateBlocks Pro 1.1.0
    ▪ GP Premium 2.1.0
    ▪ GeneratePress Parent Theme – Default
    ▪ Generate Child Theme – Default

    but it seemed intermittent. I’m still testing if my homepage element I developed was causing the issue. It seems like when I used a simple element with lorem ipsum content, it works fine. Still testing… For now I’ve implemented the fix I describe to David with a copy old element in total, create new element, paste and set the new hook.

    Thanks all. I’ll make sure to update when I get a chance.

    #1981513
    David
    Staff
    Customer Support

    Hi Michael,

    your secondary Navigation button, try changing the Hook to: Custom Hook and adding: generate_after_secondary_menu
    This should insert the HTML after the navigation, so the tab ordering should mirror the visible layout.

    The other issue i am going to pass over to Tom to take a look.

    #1981547
    Michael

    Hi David. That custom hook works perfectly. Thanks much.

    After racking my brain on the error yesterday & today one possibility might be an issue with the import. I developed the original element layout on an external web host so I didn’t have to wait for our test repo to push to our AWS EC2 every time I made a change. Once I had it where I was happy with it I went to Tools > Export > Elements. Then I imported the file into the parent site: Tools > Import > Selected the file. Once the element was there it worked but if I attempted to change the hook position, it seemed to choke as did all of the other elements I imported. Once I copied the element from the parent container down, created a new element block, pasted and saved, I could change the hook position without issue and assign the new element to appear in the page. Food for thought anyway. I’m not sure of that’s it but I plan on testing some import/exports of elements tomorrow to see. I’ll let you know.

    Thanks again. Much appreciated.

    #1981570
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    We specifically look for a menu item when opening the off-canvas panel to apply focus to it: https://www.screencast.com/t/4Su85nxdrF

    However, it looks like we’re going to need to tweak this to look for the first focusable element, instead. As it’s becoming more common to add blocks/widgets inside the panel instead of menu items.

    We’ll look at getting this done in GPP 2.2.0.

    #1981671
    Michael

    That would be great Tom. I agree. I think this will be very useful to a lot of folks who are using that panel in different ways. I’d be happy to QA solutions/fixes you come up with. Thanks again for all the help from you and the team.

    #1983431
    Tom
    Lead Developer
    Lead Developer

    I’ve logged it as an issue and milestoned it for 2.2.0.

    Appreciate the heads up on this – thank you! 🙂

    #1986793
    Michael

    That is great news Tom! Look forward to it!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.