Docs

[MatrixFour]

Hi Guys,

Great work on your theme. I am working on it for a clients website and I am having an issue with the mobile nav dropdowns.

When the website screen size is made to the point of the sandwich icon showing up, I can tab to the menu and open it up. One thing I want to be able to accomplish is when tabbed to a dropdown item, the items show up. So essentially when the menu changes to the sandwich icon, the dropdown menu items below the main item cannot be accessed unless clicked on with the mouse.

We need to stick to accessibility best practices and this issue makes the items unavailable. Which isn’t the best for accessibility.

I have attempted to use the ubermenu, but that seems even worse when trying to tab to it on smaller sizes(when the sandwich icon appears) the menu wasn’t even receiving tab focus.

How can I get the dropdowns to appear when on a smaller screen size when getting tab focus?

Thanks for the help!

[Nabeel A]

Hi there,

Thanks for writing in! There is no tab on mobile that’s why accessing menu with tab should not work. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[MatrixFour]

Thanks for the prompt reply.

So let’s say the users monitor is very small or they have the browser window shrunken down to activate the mobile menu sandwich icon. Mind you that size is 980px, not just a mobile size. So once it goes under that threshold the user will have no ability to access the dropdowns except with a mouse click? Also the focus indicator is not shown when tabbing over the dropdown item.

The reason this concerns me is only for accessibility. Since you state you have this on your theme at https://theme.co/x/features/wai-aria-compatible/ I thought it would be something standard and implemented into the site.

Should it not be implemented? My suggestions is to have the dropdowns automatically be open when the screen is under the 980px pixel dimensions. I am a developer so customizing it can be done, but maybe this is something to consider for future releases of the theme. I just don’t want someone that doesn’t have mouse access to have to navigate to the product page then make they’re selection.

Let me know your thoughts.

[Rue Nel]

Hello There,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks!

[MatrixFour]

Hi Rue,

I also noticed that the product tabs are not keyboard accessible. Do you know a way to achieve this?

[Rupok]

Hi there,

Thanks for updating. Product Tabs are not keyboard accessible and it’s usual. If you want that feature you need to achieve that with custom development that would be out of our support scope.

Cheers!

[MatrixFour]

Do you know which file I can customize to achieve this?

I see this line of code in the tabs.php file

<?php if ( x_get_option( 'x_woocommerce_product_tabs_enable' ) == '1' ) : ?>

    <?php ob_start(); ?>

      [x_tab_nav type="<?php echo $tab_num_class; ?>"]
        <?php foreach ( $tabs as $key => $tab ) : ?>
          [x_tab_nav_item class="<?php echo esc_attr( $key ); ?>_tab" title="<?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?>"]
        <?php endforeach; ?>
      [/x_tab_nav]
      [x_tabs]
        <?php foreach ( $tabs as $key => $tab ) : ?>
          [x_tab class="<?php echo esc_attr( $key ); ?>_pane"]<?php call_user_func( $tab['callback'], $key, $tab ); ?>[/x_tab]
        <?php endforeach; ?>
      [/x_tabs]

    <?php $tabs = ob_get_clean(); ?>

    <div class="woocommerce-tabs">
      <?php echo do_shortcode( $tabs ); ?>
    </div>

  <?php endif; ?>

All I want to do is a some aria labels to make it accessible. Where is the shortcode object edited? and created?

The woocommerce tabs would be easy to customize using the tabs.php file that comes with woocommerce, but I am lost on how to edit the one that comes with x theme.

The woocommerce tabs.php code

<?php
/**
 * Single Product tabs
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	https://docs.woothemes.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.4.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Filter tabs and allow third parties to add their own.
 *
 * Each tab is an array containing title, callback and priority.
 * @see woocommerce_default_product_tabs()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if ( ! empty( $tabs ) ) : ?>

	<div class="woocommerce-tabs wc-tabs-wrapper">
		<ul class="tabs wc-tabs">
			<?php foreach ( $tabs as $key => $tab ) : ?>
				<li class="<?php echo esc_attr( $key ); ?>_tab">
					<a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
				</li>
			<?php endforeach; ?>
		</ul>
		<?php foreach ( $tabs as $key => $tab ) : ?>
			<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab" id="tab-<?php echo esc_attr( $key ); ?>">
				<?php call_user_func( $tab['callback'], $key, $tab ); ?>
			</div>
		<?php endforeach; ?>
	</div>

<?php endif; ?>

Would I just overwrite the tabs.php page in my childtheme(from x theme) with the woocommerce tabs.php file?

Can you please provide some insight on how to customize it or override it and use the woocommerce tabs.php instead. I chose this theme as it says it conforms with Wai-Aria best practices.

Thanks.

[Christian]

Hey there,

Please see https://community.theme.co/kb/customization-best-practices/ to learn how to customize X. To override WooCommerce, pleas see https://docs.woothemes.com/document/template-structure/

X Tabs is powered by the Cornerstone plugin. The location and file is plugins\cornerstone\includes\shortcodes\tabs.php

Please take note that we do not support modifications and issues arising from it would be outside the scope of our support.

Thanks.

[MatrixFour]

Ok thank you. I will investigate.

[Lely]

You’re welcome!

Cheers!

[MatrixFour]

This reply has been marked as private.

[Thai]

Hi There,

Please copy this file:

– x/woocommerce/single-product/tabs/tabs.php

To your child theme:

– x-child/woocommerce/single-product/tabs/tabs.php

Hope it helps 🙂

[Author]

Posts