search

Tradeshift / tradeshift-ui

Tradeshift UI is a framework-agnostic JavaScript library to help Tradeshift App developers to create cohesive user experiences and to provide reusable UI components.
https://ui.tradeshift.com
Other
33 stars 44 forks source link

[Forms] Misaligned checkboxes and radio buttons #465

Open nsp918 opened 6 years ago

nsp918 commented 6 years ago

Issue

Form fields are misaligned compared to checkboxes and radio buttons. It doesn't look to good that radio buttons and checkboxes are indented by 11px because of highlight area around them.

Screenshots

group screen shot 2017-12-01 at 11 13 51 am

wiredearp commented 6 years ago

Well, you can turn that around and say that it wouldn't look too good if the controls are not indented when the (keyboard focus) highlight is active. Do you suggest instead that we turn off the keyboard hints? Or would you suggest that the highlight outline should not be aligned, so that the outline will be "outdented" when it encounters a radio group?

nsp918 commented 6 years ago

Could we highlight just the checkbox or radio button instead so the highlight stays within bounds? Something like this for checkbox/radio button: http://dev.wix.com/docs/ui-lib/ui-controls/

wiredearp commented 6 years ago

That page doesn't support keyboard navigation at all, and also the radio buttons don't appear to highlight anything, so it is perhaps not the best example. If you go to http://ui.tradeshift.com/#components/forms/redesign.html and attempt to keyboard-navigate the form using the actual keyboard, you can see why we highlight the group of radio buttons instead of the individual radio button.

ℹ️ You use the arrow buttons to interact with a radio group.