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.

Sign up for GitHub

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

Jump to bottom

Contribution flow: step profile + payment accessibility issues #3585

Closed
Betree opened this issue Oct 9, 2020 · 13 comments · Fixed by opencollective/opencollective-frontend#5312
Closed

Contribution flow: step profile + payment accessibility issues #3585

Betree opened this issue Oct 9, 2020 · 13 comments · Fixed by opencollective/opencollective-frontend#5312
Assignees
@Betree
Labels
accessibility complexity → simple css frontend good first issue

Comments

@Betree
Copy link
Member

Betree commented Oct 9, 2020

On the step profile & step payment, using the tab button kind of works but doesn't show you which entry in the radio list is actually focused.

image
@terminator0309
Copy link

@Betree can i work on this ...?
Looks not so difficult for me as i am first timer

@Betree
Copy link
Member Author

Betree commented Oct 19, 2020

Sure, some help on this would be much appreciated!

@terminator0309
Copy link

terminator0309 commented Oct 20, 2020 •
edited
Loading

@Betree i am not able to change selected radio button using Tabs, I think i need to add some kind of onHover effect to those radio buttons.

@Betree
Copy link
Member Author

Betree commented Oct 20, 2020 •
edited
Loading

Not hover, the state that we need to handle here is focus

@Betree Betree added the css label Oct 20, 2020
@terminator0309
Copy link

If i select one of the radio buttons then i am able to navigate through them by using up/down arrow but tab button does nothing to them.

@terminator0309
Copy link

@Betree What exact behaviour do we looking for....?

@Betree
Copy link
Member Author

Betree commented Oct 21, 2020 •
edited
Loading

We want to surface which element is currently focused. It's important for accessibility.

Basically, you should be able to complete these two steps by just using your keyboard, with the tab + arrows key.

So we need to come up with some CSS to reflect this. Below is a screencast of what we have with a similar radio list in another part of the website:
Peek 2020-10-21 15-50

@terminator0309
Copy link

@Betree i dont know why but my radio button looks different. Am i missing some dependency..!?
image

@Betree
Copy link
Member Author

Betree commented Oct 23, 2020

As mentioned, the screencast above is from another part of the website.

Also, radio buttons styles can slightly vary across browsers.

@terminator0309
Copy link

@Betree i tried this but it has no effect on radio buttons. I am totally confused.
image

@Betree
Copy link
Member Author

Betree commented Oct 27, 2020

Sorry, I can't provide much more assistance. I recommend looking at the styles & behavior for the Github flow (where I took the screenshot from). You can access it from https://staging.opencollective.com/opensource/apply/ > Verify using github stars.

@Betree Betree assigned Betree and unassigned terminator0309 Oct 28, 2020
@Betree
Copy link
Member Author

Betree commented Oct 28, 2020

@terminator0309 I'm pushing an update for this as part of the recent contribution flow updates

@Betree Betree mentioned this issue Oct 28, 2020
Merged
@terminator0309
Copy link

@Betree I had tried that but it didn't seem to work. I am not very good with radio buttons. BTW thanks for your precious time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Betree Betree

Labels
accessibility complexity → simple css frontend good first issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

StyledRadioList: Improve focus accessibility opencollective/opencollective-frontend
2 participants
@Betree @terminator0309