Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[low] Chrome + Jaws: New chat(+) dropdown expanded/collapsed state is not announced. #8667

Closed
Stutikuls opened this issue Apr 18, 2022 · 1 comment

Comments

@Stutikuls
Copy link

Stutikuls commented Apr 18, 2022

Action Performed:

  1. Using Chrome + Jaws, open URL staging.new.expensify.com
  2. Navigate to new chat (+) using Tab key and press Enter to activate.
  3. Listen to the screen reader and observe the issue.

Expected Result:

When the New chat(+) dropdown is expanded, the dropdown button should be announced with its expanded state (e.g. New chat(+) button, expanded).

Actual Result:

The expanded/collapsed state of the New chat(+) dropdown is not announced by screen reader.

HTML Code:
<div aria-label="New chat(Floating Action)" role="button" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1awozwy r-1loqt21 r-1777fci r-u8s1d r-1otgn73" style="background-color: rgb(3, 212, 124); border-radius: 999px; bottom: 34px; height: 52px; right: 20px; transform: rotate(0deg); width: 52px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="rgba(255, 255, 255, 1)"><path d="M16.9 8.8h-5.6V3.1c0-.4-.2-.6-.6-.6H9.4c-.4 0-.6.3-.6.6v5.6H3.1c-.3.1-.6.3-.6.7v1.2c0 .4.2.6.6.6h5.6v5.6c0 .4.2.6.6.6h1.2c.4 0 .6-.2.6-.6v-5.6h5.6c.4 0 .6-.2.6-.6V9.4c.2-.4-.1-.6-.4-.6z"></path></svg></div>

Other Occurrences:

Same issue repro on PRs #8692, #8725, #8969, #8436, #8760
Same issue repro on PR #8754 -state is not defined for setting.

Workaround:

Yes

Area issue was found in:

New chat floating button

Failed WCAG checkpoints

4.1.2

User impact:

Screen reader users with no or low vision and cognitive disabilities may not be aware that the area has been expanded or collapsed which will result in confusion and disorientation.

Suggested resolution:

Add an aria-expanded="true" attribute on the New chat(+) button when it is expanded and aria-expanded="false" when it is collapsed. Make sure that screen reader announce the exact information of a button.

Refer to:
https://a11y-guidelines.orange.com/en/web/components-examples/dropdown-menu/

Platform:

  • Web
  • iOS
  • Android
  • Desktop App
  • Mobile Web

Version Number: v1.1.55-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Stuti

8512.-7.-New.chat.dropdown.expanded.collapsed.state.is.not.announced.mp4
@Stutikuls Stutikuls changed the title Chrome + Jaws: New chat(+) dropdown expanded/collapsed state is not announced. [low ]Chrome + Jaws: New chat(+) dropdown expanded/collapsed state is not announced. Apr 18, 2022
@Stutikuls Stutikuls changed the title [low ]Chrome + Jaws: New chat(+) dropdown expanded/collapsed state is not announced. [low] Chrome + Jaws: New chat(+) dropdown expanded/collapsed state is not announced. Apr 18, 2022
@melvin-bot melvin-bot bot added the Monthly KSv2 label Apr 21, 2022
@melvin-bot melvin-bot bot added the Overdue label May 24, 2022
@melvin-bot melvin-bot bot closed this as completed Jul 4, 2022
@melvin-bot
Copy link

melvin-bot bot commented Jul 4, 2022

@Stutikuls, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant