Label for search forms

[Margot]

Hello,
I am building a website for a school project with the RentalHive theme and need it to comply to the Web Content Accessibility Guidelines. To do so, every input field in a form need to have either a tag or a aria-labelledby attribute.
Curently, the placeholder attribute is used to identify the field intent, and it’s flagged as an accessibility error.
I would need the “final code” for the fields to be something like this :

<label>Location
<input type="text" name="location" value="" autocomplete="off" placeholder="Where do we go ?" maxlength="256" class="hp-field hp-field--text pac-target-input"></label>

instead of the current

<input type="text" name="location" value="" autocomplete="off" placeholder="Localisation" maxlength="256" class="hp-field hp-field--text pac-target-input">

An added code snippet would be ideal but I havent find any with that function in the existing ones.

Thank you for your help !

[ihor]

Hi,

Please try this PHP snippet (for example, via the Code Snippets plugin):

add_filter(
	'hivepress/v1/forms/listing_search',
	function( $form ) {
		if ( isset( $form['fields']['location'] ) ) {
			$form['fields']['location']['label'] = 'Location';
		}

		return $form;
	}, 1000
);

Also, please add this CSS snippet (in Appearance/Customize/Additional CSS):

.hp-form--listing-search .hp-field__label {display:block!important}

This should add a label for the Location field. In the same way, you can add labels for other fields within the search bar (this depends on which fields you enabled). Please note that these labels may require further CSS styling since they are hidden by default.

Hope this helps

[Margot]

Hi,
I’m really sorry but it doesn’t work. It added no label and I don’t see any modification in the code with the inspect function.
I added the snippet with code snippets and the css in the additional css.

[andrii]

Hi,

We have updated the PHP snippet; please test it again. Also, please note that it can require further customization.

[Margot]

Hi,
It created the label but did not associated it with the field it’s labelling.
The label tag should either include the input field
<label>Location <input [...]> </label>

or the label tag should indicate what it’s labelling in this manner :
<label for="location">Location</label> )

so it wouldn’t be flagged as “not properly labelled” by accessibility checkers.

When applying this snippets to the other fields (guests and listing categories), it generates some <small>(optional)</small> text in the label tag.
Also, the “Date” field doesn’t have a name associated to it so cannot be labelled with this snippet.

Many thanks for your help !

[andrii]

Hi,

I see. We have added this feature to the backlog and will try to add it in the next updates. As a temporary solution, we can provide you with a temporary fix on your site, let us know if it works for you.