Feature Description

The keywords input has no label because it renders the label attribute on the TextField as a placeholder HTML attribute. This isn't accessible, so let's add a label.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Because the label prop supplied to the TextField component here is rendered as a placeholder, there should also be a manually-created <label> added for the TextField for assistive technology. Ensure there is always a <label> tag for the TextField with the text "Keywords (minimum one, maximum three)".

Implementation Brief

• edit assets/js/components/user-input/UserInputKeywords.js
• add a <label> to the TextField with the text "Keyword" and hide it with the VisuallyHidden component.

Test Coverage

• No tests needed for this change.

Visual Regression Changes

• VRT changes to the placeholder being empty after a value is entered might occur; otherwise none should occur.

QA Brief

• Check that the term text fields have hidden labels

Changelog entry

• Introduce hidden labels for search term fields of the User Input Settings flow.