Issue with header search form (Accessibility)

Hi,

I try to run my current website here: https://wave.webaim.org/ in order to see any accessibility issue.

The only error right now is related to search form on header and more specific it shows that there are multiple form labels.

Please check the photo attached.

Can we fix it somehow in order to pass the test. Maybe with custom css or something like that?

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Please find this file: woodmart/inc/modules/search.php

You need copy the whole function into functions.php of the child theme and delete this line: aria-label=”” https://prnt.sc/20gsxue and https://prnt.sc/20gt24b

Best Regards

Thank you for this.

Could you please let me know which part to copy from search.php?

Entire file code?

Basically it would much easier for me if you could give me the ready code with the modifications in order to add to functions.php file.

Thank you!

Hello,

Please make the full backup of your site and insert FTP access to the Private content block below the message area.

Best Regards

Done.

Keep in mind I don’t use a child theme but I use the Code Snippets plugin where i have all my custom codes that go to functions.php

That’s why I provide you all the info below.

Thank you!

Hello,

Here is the code:

function woodmart_search_form( $args = array() ) {
	$args = wp_parse_args( $args, array(
		'ajax' => false,
		'post_type' => 'post',
		'show_categories' => false,
		'type' => 'form',
		'thumbnail' => true,
		'price' => true,
		'count' => 20,
		'icon_type' => '',
		'search_style' => '',
		'custom_icon' => '',
		'el_classes' => '',
		'wrapper_custom_classes' => '',
	) );

	extract( $args );
	
	ob_start();

	$class = '';
	$btn_classes = '';
	$data  = '';
	$wrapper_classes = '';
	$dropdowns_classes = '';

	if ( $show_categories && $post_type == 'product' ) {
		$class .= ' wd-with-cat';
		$class .= woodmart_get_old_classes( ' has-categories-dropdown' );
	}

	if ( $icon_type == 'custom' ) {
		$btn_classes .= ' wd-with-img';
		$btn_classes .= woodmart_get_old_classes( ' woodmart-searchform-custom-icon' );
	}

	if ( $search_style ) {
		$class .= ' wd-style-' . $search_style;
		$class .= woodmart_get_old_classes( ' search-style-' . $search_style );
	}

	$ajax_args = array(
		'thumbnail' => $thumbnail,
		'price' => $price,
		'post_type' => $post_type,
		'count' => $count,
		'sku' => woodmart_get_opt( 'show_sku_on_ajax' ) ? '1' : '0',
		'symbols_count' => apply_filters( 'woodmart_ajax_search_symbols_count', 3 ),
	);

	if( $ajax ) {
		$class .= ' woodmart-ajax-search';
		woodmart_enqueue_js_library( 'autocomplete' );
		woodmart_enqueue_js_script( 'ajax-search' );
		foreach ($ajax_args as $key => $value) {
			$data .= ' data-' . $key . '="' . $value . '"';
		}
	}

	switch ( $post_type ) {
		case 'product':
			$placeholder = esc_attr_x( 'Search for products', 'submit button', 'woodmart' );
			$description = esc_html__( 'Start typing to see products you are looking for.', 'woodmart' );
		break;

		case 'portfolio':
			$placeholder = esc_attr_x( 'Search for projects', 'submit button', 'woodmart' );
			$description = esc_html__( 'Start typing to see projects you are looking for.', 'woodmart' );
		break;

		case 'page':
			$placeholder = esc_attr_x( 'Search for pages', 'submit button', 'woodmart' );
			$description = esc_html__( 'Start typing to see pages you are looking for.', 'woodmart' );
			break;
	
		default:
			$placeholder = esc_attr_x( 'Search for posts', 'submit button', 'woodmart' );
			$description = esc_html__( 'Start typing to see posts you are looking for.', 'woodmart' );
		break;
	}

	if ( $el_classes ) {
		$class .= ' ' . $el_classes;
	}

	if ( $wrapper_custom_classes ) {
		$wrapper_classes .= ' ' . $wrapper_custom_classes;
	}

	if ( 'dropdown' === $type ) {
		$wrapper_classes .= ' wd-dropdown';
	}

	if ( 'full-screen' === $type ) {
		woodmart_enqueue_js_script( 'search-full-screen' );
		woodmart_enqueue_inline_style( 'header-search-fullscreen' );
		$wrapper_classes .= ' wd-fill';
	} else {
		$dropdowns_classes .= ' wd-dropdown';
	}

	if ( 'light' === whb_get_dropdowns_color() ) {
		if ( 'form' !== $type ) {
			$wrapper_classes .= ' color-scheme-light';
		}
		$dropdowns_classes .= ' color-scheme-light';
	}

	$wrapper_classes .= woodmart_get_old_classes( ' woodmart-search-' . $type );
	$dropdowns_classes .= woodmart_get_old_classes( ' woodmart-search-results' );

	?>
		<div class="wd-search-<?php echo esc_attr( $type ); ?><?php echo esc_attr( $wrapper_classes ); ?>">
			<?php if ( $type == 'full-screen' ): ?>
				<span class="wd-close-search wd-action-btn wd-style-icon wd-cross-icon<?php echo woodmart_get_old_classes( ' woodmart-close-search' ); ?>"><a aria-label="<?php esc_attr_e( 'Close search form', 'woodmart' ); ?>"></a></span>
			<?php endif ?>
			<form role="search" method="get" class="searchform <?php echo esc_attr( $class ); ?>" action="<?php echo esc_url( home_url( '/' ) ); ?>" <?php echo ! empty( $data ) ? $data : ''; ?>>
				<input type="text" class="s" placeholder="<?php echo esc_attr( $placeholder ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr( $placeholder ); ?>" />
				<input type="hidden" name="post_type" value="<?php echo esc_attr( $post_type ); ?>">
				<?php if( $show_categories && $post_type == 'product' ) woodmart_show_categories_dropdown(); ?>
				<button type="submit" class="searchsubmit<?php echo esc_attr( $btn_classes ); ?>">
					<span>
						<?php echo esc_attr_x( 'Search', 'submit button', 'woodmart' ); ?>
					</span>
					<?php 
						if ( $icon_type == 'custom' ) {
							echo whb_get_custom_icon( $custom_icon );
						}
					?>
				</button>
			</form>
			<?php if ( $type == 'full-screen' ): ?>
				<div class="search-info-text"><span><?php echo esc_html( $description ); ?></span></div>
			<?php endif ?>
			<?php if ( $ajax ): ?>
				<div class="search-results-wrapper">
					<div class="wd-dropdown-results wd-scroll<?php echo esc_attr( $dropdowns_classes ); ?>">
						<div class="wd-scroll-content"></div>
					</div>

					<?php if ( 'full-screen' === $type ) : ?>
						<div class="wd-search-loader wd-fill<?php echo woodmart_get_old_classes( ' woodmart-search-loader' ); ?>"></div>
					<?php endif; ?>
				</div>
			<?php endif ?>
		</div>
	<?php

	echo apply_filters( 'get_search_form', ob_get_clean() );
}

Best Regards

Hi and thanks for this but there is an issue with the provide code.
Please see the photo attached. This error came when i try to run it.

Attachments:

You must be logged in to view attached files.

Hello,

Your plugin does not support the function modification that is why you need to install the child theme and insert this code into function.php of the child theme.

Best Regards

Thanks for letting me know.

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts