[ACCESSIBILITY] Events Filtering - Two Clear buttons leads to confusion and poor usability

[acovher2]

Describe the issue
Upon certain conditions, there are two "Clear" buttons on the Events Filtering page. This is confusing to the screen reader user that hears "Clear button" at two different places in the page and can't decipher which is to clear which information.
To add to the confusion, the "Clear" button at the top right of the page is not in fact clearing anything but rather, still acting as "Apply" and takes the user back to the Map.
WCAG 4.1.2 Name, role, value
WCAG 3.3.2 Labels of Instructions

To Reproduce
Steps to reproduce the behavior:

1. Using Android, turn on TalkBack
2. Gesture to 'Map.'
3. Select 'Filter.'
4. Apply any filter
5. Reselect "Filter" button
6. Upon entering there will be a "Clear" button at the top right and one at the bottom of filtering options.

Expected behavior
Every button has a Unique element ID. Multiple buttons cannot have the same name.

(Textbook example "See more" as a no no)

Actual behavior
There is a "Clear" button at the top of page which returns user to the Map. (As if it were the "Apply" button)
If a new filter parameter is selected, the Top "Clear" button changes to "Apply" and parameters will be applied and user taken back to Map if user selects "Apply".

There is a "Clear" button at the bottom of filter parameters, and if the user clicks this unselects any filtering parameters.
After clearing the parameters, the top "Clear" button turns to "Apply" in which case user can apply changes and return to Map.

Screenshots
See Video:

Double.Clear.button.mp4

Testing Environment & Devices (please complete the following information):
• OS: Android Version 13
• Device: Google Pixel 4a

Additional context
This should also function like Events Filtering in that the "Filter: Upcoming; Location: 1524" should be keyboard accessible and announced to Screen reader users upon landing back on page from applying filters. Filed in Github #4420