Issue Summary

The "x" remove button that is present in the "Search" input field is not keyboard-operable.

Steps to Reproduce

1. Open the “Browse projects“ page.
2. Navigate to the "x" button in the mentioned form field.
3. Try to delete or remove it.
4. Observe that it is not possible due to missing keyboard support for the “x” remove button.

Screenshot

Actual Results

When a user tries to navigate onto the mentioned interactive element using a keyboard it is not possible to interact with it. This is because the mentioned element is lacking <button> markup.

As a result, if the interactive element is missing keyboard support then screen readers and keyboard-only users will miss out on important functionality associated with it.

Expected Results

Apply the following changes:

• The mentioned interactive element should receive keyboard support when user navigates through it using TAB key.
• The mentioned interactive element should be coded as button with role=”button” or type=”button” and also it should have accessible name for this button such as "Remove".

Note: If using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and define event handlers for click and key-down events. This includes handling the Enter and Space keypresses in order to process all forms of user input.

For working implementation of button please refer this link https://www.w3.org/WAI/ARIA/apg/patterns/button/examples/button/

Workaround

Not Available.

Environment

MacBook Pro (14-inch, 2021)
macOs Sonoma 14.2.1
Chrome - Version 121.0.6167.85 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit)
Safari- Version 17.2.1 (19617.1.17.11.12)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest