HabitRPG / habitica

A habit tracker app which treats your goals like a Role Playing Game.
https://habitica.com
Other
11.94k stars 4.08k forks source link

some website elements lack focus styling #11449

Open Alys opened 5 years ago

Alys commented 5 years ago

In the Report a Bug guild, Donald Maness / @ddmaness (4d235d28-bd6f-4859-b222-e9a3f45ea212) has reported that the elements below lack discernible focus styling. "All Items tested in Chrome on Oct. 16 2019 against WCAG's 2.1 AA standards" Ref: 2.4.7 Focus Visible

I'll leave this as suggestion-discussion for a week or so and then if there's no objections I'll mark it as help wanted.

ddmaness commented 5 years ago

There are two separate causes for this issue. For the donate button and three dot dropdown trigger, the fix should be fairly simple as the elements are visible but just lack focus styling. Adding focus state styles to the :focus selectors for these elements would be all that's required to address the issue.

The issue in the header navigation is a bit more complicated as the elements that are gaining focus within the dropdown menu actually already have focus styles. The issue is actually with the dropdown menu itself, because it remains closed as a user's tab focus arrives at the items within the menu.

There are ways to fix this, but one of the simpler ways would be to expand the dropdown menu when the user tabs into elements within the dropdown, and close it once the user tabs out of the dropdown menu.

kimiannalena commented 3 years ago

Is this issue still active? I'd like to work on this.

Alys commented 3 years ago

@kimiannalena This issue is on hold. Only issues tagged with the help wanted label are available. Please read the wiki's GitHub Labels page for more information about labels.