URL to the page

https://instenv-10949-s8ch.instenv.internal.atlassian.com/#recently-worked

Steps to Reproduce

1. Open URL to the page
2. Navigate and activate "Search".
3. Navigate to "Advanced search" and activate.
4. Navigate to "Add a filter" button and activate.
5. From available dropdown list select any filter component.
6. Navigate to newly added filter using keyboard and try to remove filter using "X" button provided.
7. Observe if "X" button receives keyboard focus.

Screenshot

Screen Recording

Screen Recording 2022-03-21 at 11.57.27 AM.mov

Actual Behaviour

When user attempts to remove filter using "X" button available after filter name, since "X" button is missing keyboard support keyboard only users cannot use the functionality of removing filters.due to which keyboard only users would have bad user experience.

Expected Result

When keyboard only users tries to remove filter using "X" button keyboard focus should move accordingly, allowing them to use remove filter functionality.

By defining "X" button using <button> tag would make sure keyboard users can move their focus and screenreader user would also be able to identify it as button.

alternatively, modify the scripts and make sure <span> element in which the "X" button is coded receives keyboard focus also make sure it is announced as button with functionality of remove filter for screen reader users.

Bug Ref: 724783