search

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 20 forks source link

[ACCESSIBILITY] Assistant - Focus hidden behind edit text box (TalkBack) #4193

Open acovher2 opened 3 months ago

acovher2 commented 3 months ago

Describe the issue Currently if a TalkBack (screen reader) user starts to enter a question, then, let's say they want to look back at previous questions, and gesture left to go back, the visual focus is trapped under the Edit Text area.

To Reproduce Steps to reproduce the behavior:

  1. Using TalkBack
  2. Go to 'Assistant'
  3. Gesture until you hear 'Edit box, double tap to edit text'
  4. Double tap, enter any question (for this I used 'Where is the nearest dining hall?' via voice entry button)
  5. Then, gesture left to go in reverse to a previous response/entry...

Expected behavior Visual focus will move with the gesturing and the partially sighted user may see what element is focused on as well as the screen reader user hear the element focused on.

Actual behavior Visual focus is not moving with the gesturing and the partially sighted user can not see what element is focused on as well as the screen reader user hear the element focused on.

Screenshots Screenshot_20240702-114922

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

Additional context When the visual focus is behind the element you're interacting with, it violates Success Criterion 2.4.7: Focus Visible from the Web Content Accessibility Guidelines (WCAG). This criterion ensures that keyboard-operable user interfaces have a visible focus indicator, allowing users to know which element currently has keyboard focus¹. To address this, use the :focus CSS pseudo-element to indicate the focused element, and avoid removing all visual treatment of the focused element. Additionally, consider using onfocus and onblur event handlers via scripting for browsers that don't natively support the :focus pseudo-element².

Source: Conversation with Copilot, 7/2/2024 (1) Understanding Success Criterion 2.4.7: Focus Visible | WAI | W3C. https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html. (2) WCAG 2.1 - SC 2.4.7 Focus Visible. https://www.boia.org/wcag2/cp/2.4.7. (3) A guide to designing accessible, WCAG-conformant focus indicators. https://www.sarasoueidan.com/blog/focus-indicators/. (4) Failure of Success Criterion 2.4.7 due to styling element ... - W3C. https://www.w3.org/WAI/WCAG21/Techniques/failures/F78.

TodorBachvarov commented 3 months ago

@acovher2, This should be fixed in version 6.0.21

acovher2 commented 1 month ago

Hello, Unfortunately in the 6.0.36 android Prod version I'm still able to see this focus hidden behavior. This is a new example in 6.0.36 Please let me know if you have questions.

https://github.com/user-attachments/assets/057687b2-af1f-418c-8240-1d88c0d96d49

acovher2 commented 1 month ago

I can hear the proper things but is there a way to move the focus above the line for typing questions to assistant so that it is not hidden behind that?