Unable to add attributes directly to Filter - Search element

Currently it’s not possible to add any attributes directly to the Filter - Search element. This causes accessibility issues and breaks native functionality such as the for and aria-labelledby attributes.

To add, there is no option to remove/disable the placeholder text being set as the aria-label. Similarly mentioned in this topic

in the meantime, you could use the bricks/element/render_attributes filter which can be used to add/remove attributes from any elements.

Example removing the placeholder attribute from the search filter input, and adding custom attributes…

add_filter('bricks/element/render_attributes', function($attributes, $key, $element) {

    // Only if the filter-search element
    if ($element->name === 'filter-search') {

        if ($key === 'input') {
			
            // Remove the placeholder attribute
            if (isset($attributes[$key]['placeholder'])) {
                unset($attributes[$key]['placeholder']);
            }
            
            // Add any custom attributes
            $attributes[$key]['data-custom'] = esc_attr('your-custom-value');
            $attributes[$key]['data-another-one'] = esc_attr('another-custom-value');
        }
    }
    
    return $attributes;

}, 10, 3);
1 Like