rokwire / illinois-app

Source code repository of "Illinois" App - the official mobile app of the University of Illinois.
https://app.illinois.edu/
Apache License 2.0
23 stars 21 forks source link

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

Open acovher2 opened 1 month ago

acovher2 commented 1 month ago

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. 20241015_110503

Screenshots See Video:

https://github.com/user-attachments/assets/762f4b13-e6f2-41ef-9361-8e9a4948fe5b

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 filter locations should be SR accessible