Search field: Added aria-label and name to search input for accessibility (closes #21938)

[andreaslborg]

Description

This PR addresses #21938, which notes that the search input field lacks a programmatic label, causing accessibility issues and Google Console warnings.

Previously, the search input only had a placeholder attribute but no name or accessible label (aria-label). This caused:

• Google Console warnings about form fields missing id or name attributes
• WCAG accessibility compliance failures (WCAG 2.5.3 and 3.3.2)
• Screen readers unable to properly identify the search input field

To fix this, the search input now includes:

• name="search-input" attribute to provide form field identification
• aria-label attribute using the localized placeholder text

These attributes work together to ensure the input is properly labeled and accessible to assistive technologies, while maintaining the existing visual design and behavior.

Testing

Default setup - Open the Umbraco backoffice, click the search icon, and verify the search input is visible and functional with improved accessibility.

Screen reader testing - Using NVDA, JAWS, or similar, the input field should be announced with its label ("Type to search...") and properly identified as a text input.

Developer console - Verify no warnings about missing form field identification and that the name and aria-label attributes are present on the input element.

Search functionality - Type in the search field, verify results appear correctly, navigate using keyboard (Arrow Up/Down, Tab), and verify Enter key closes the modal.

[github-actions]

Hi there @andreaslborg, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[emmagarland]

Sorry @leekelleher, I updated the branch then realised its on your review list :)

[leekelleher]

@emmagarland No problem at all. I hadn't got around to reviewing it yet.

[leekelleher]

Super, thanks @andreaslborg!

I made a couple of tweaks whilst reviewing, just minor code tidy-up that I'd been wanting to do for a while, nothing directly related to your fix.