Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Append script is not workinf for Tabs

  • usethebitcoin
    August 2, 2024 at 11:29 am

    Hi GP Team!

    In our mobile view we have this tabs options and inside of it are some articles. Since I am fixing the pageinsights issues, I notice that my code was not working.

    document.getElementById('ub-tabbed-content-bd89f598-5d75-4a30-a115-827455285c3a-tab-0').setAttribute('aria-label', 'Editors Choice Tab')

    It was showing in the header but was not appending where I wanted to append the aria-label. The id was correct.

    Pls refer to the image below.
    https://i.postimg.cc/TwFD5byV/Screenshot-42.jpg

    Thanks for your help

  • David
    August 3, 2024 at 6:05 am

    Hi there,

    try adding your script to the wp_footer.
    This means the script will fire AFTER the HTML has been loaded on the page.

  • usethebitcoin
    August 5, 2024 at 9:00 am

    Hi David,

    Thank you; it worked. I thought this might solve some of the issues from PageInsights, since aria-label was missing.

    Assistive technologies, like screen readers, can’t interpret ARIA attributes with invalid values.
    https://i.postimg.cc/Sxx5hXWm/Screenshot-43.jpg

    What is you suggestion about this? I have read some past topics about this, but how to really solve this issue?

  • David
    August 6, 2024 at 2:00 am

    Have you spoken to the Tab plugin developer ?

    I can’t say what google specifically doesn’t like about that particular HTML element. It could be the following issue I see:

    Here is the HTML for the tabpanel.
    And it contains a aria-labelledby attribute: aria-labelledby="ub-tabbed-content--tab-0"

    
<div role="tabpanel" class="wp-block-ub-tabbed-content-tab-content-wrap active editors-choice-tab" id="ub-tabbed-content--panel-0" aria-labelledby="ub-tabbed-content--tab-0" tabindex="0">

    And that attribute ID should correspond to the labelling element, which would be the tab element:

    
<div role="tab" id="ub-tabbed-content-56c2d3a7-a186-4d35-97f3-9ef52ffd93f5-tab-0" aria-controls="ub-tabbed-content-56c2d3a7-a186-4d35-97f3-9ef52ffd93f5-panel-0" aria-selected="true" class="wp-block-ub-tabbed-content-tab-title-wrap active" tabindex="0"><div class="wp-block-ub-tabbed-content-tab-title">Editor’s Choice</div></div>

    But the tab ID does not match the tabpabels aria-labelledby.

    And that needs to be fixed at source by the plugin developer.

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