University libraries | Spaces: Missing label for search input field

Issue Summary

On the “University libraries | Spaces” page, the “search” input field present in the header section is missing an accessible label.

Steps to Reproduce

1. Navigate to the “University libraries” homepage.

1. Navigate to “Space” menu button, and activate it to choose “View all spaces” from options.

1. verify user is on the “All Spaces” page.

1. With screen reader running on, navigate to the search input field of the top navigation and observe that input field missing an accessible label.

Screenshot

Screen Recording
Screen Recording 2024-04-26 at 6.03.51 PM.mov

Actual Results

 On the “University libraries | Spaces” page, the “search” input field present in the header section is missing an accessible label.

As a result, screen reader users would not understand the purpose of the form field and they might find it difficult to interact with the unlabelled field.

Expected Results

Make sure a visual label is provided for the interactive elements and that they are programmatically identified for the screen reader users.

Labels and the mentioned field should be explicitly associated via the “for” attribute of <label> and the "id" attribute of <input>. Visible labels help all users to understand the purpose of a form element.

If a visual label is not feasible then there should be the aria-label attribute present for the mentioned field which will help to announce accessible names for screen reader users.

<input aria-label="Search pages, attachements and more" data-test-id="search-dialog-input" placeholder="Search" maxlength="500" default="" class="css-1ban08t eq4kchp6" value="">

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available