Duplicate labels used with multiple naming techniques

[colabottles]

Why It Matters: Page headings and labels for form and interactive controls are informative. Avoid duplicating heading and label text unless the structure provides adequate differentiation between them.

How to Fix It: Use a visually hidden CSS class to hide the text and remove the placeholder. Placeholders are not labels and some browser/screen reader combinations will read the placeholder twice.

In this approach, the <label> element is provided to identify a form control within the code, but it is visually hidden to avoid redundancy for users who can derive the purpose from the visual cues.

<label for="search" class="visuallyhidden">Search for...
    <input 
        name="searchQuery" 
        id="U0b8fb8121c3845e99ff71a95ab78d05b" 
        type="text" 
        class="text-style-body-medium _searchInput_f6v3c_118 "
    >
</label>

Success Criteria Affected:

• 2.4.6 Headings and Labels (Level AA)
• 4.1.2 Name, Role, Value (Level A)

Screenshot(s):

[fennifith]

This is fixed as of #791 :)