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

Improve Selector usability (keyboard focus, hover and disabled states) #544

Closed
larimaza opened this issue Feb 7, 2020 · 3 comments · Fixed by #560
Closed

Improve Selector usability (keyboard focus, hover and disabled states) #544

larimaza opened this issue Feb 7, 2020 · 3 comments · Fixed by #560
Assignees
Labels
♿ accessibility Improves usability 🎨 design Requires input from designers good first issue A beginner-friendly task

Comments

@larimaza
Copy link
Contributor

larimaza commented Feb 7, 2020

Component to amend

Selector

Visual

Captura de Tela 2020-02-07 às 11 21 10

Context

We have a few issues to address on this:

  • The Selector component is currently not accessible - not focusable via keyboard. That's because the markup structure is all divs. We could change them to radio buttons instead.
  • Hover styles look kinda wonky because the thicker border pushes the elements around it.
  • Disabled state does not look disabled enough - we'll need help from design team on this.
@larimaza larimaza added ♿ accessibility Improves usability good first issue A beginner-friendly task labels Feb 7, 2020
@larimaza larimaza changed the title Make Selector focusable via keyboard Improve Selector usability (keyboard focus, hover and disabled states) Feb 7, 2020
@larimaza larimaza added the 🎨 design Requires input from designers label Feb 7, 2020
connor-baer added a commit that referenced this issue Mar 31, 2020
This makes the Selector component accessible (it wasn't before). It also brings the API inline with
the Checkbox and RadioButton components. Furthermore, it allows for multiple options to be selected.

BREAKING CHANGE:
The Selector component now accepts the onChange, value, name, and checked props. The onClick and
selected props have been removed.

ISSUES CLOSED: #544
connor-baer added a commit that referenced this issue Mar 31, 2020
@connor-baer connor-baer self-assigned this Mar 31, 2020
@connor-baer connor-baer linked a pull request Apr 1, 2020 that will close this issue
5 tasks
connor-baer added a commit that referenced this issue Apr 3, 2020
* feat(components): rewrite the Selector as radio/checkbox

This makes the Selector component accessible (it wasn't before). It also brings the API inline with
the Checkbox and RadioButton components. Furthermore, it allows for multiple options to be selected.

BREAKING CHANGE:
The Selector component now accepts the onChange, value, name, and checked props. The onClick and
selected props have been removed.

ISSUES CLOSED: #544

* feat(components): increase color contrast on Selector

ISSUES CLOSED: #544

* feat(components): add SelectorGroup component

The SelectorGroup is a convenience component to display multiple, related Selector components in an
accessible way. The component API is modelled after the RadioButtonGroup component, so they can be
used interchangeably.

* fix(components): remove unnecessary attributes from Checkbox and RadioButton labels

The value and name attributes are not valid HTML attributes on the label element.

* feat(components): rename label prop for RadioButtonGroup options

The options that are passed to a RadioButtonGroup should include a children prop instead of a label
prop. This brings it in line with the RadioButton and SelectorGroup components.

BREAKING CHANGE:
The label property of the options prop of the RadioButtonGroup component has been renamed to
children.

* test(components): update storyshots

* refactor(docs): don't persist event unnecessarily
@github-actions
Copy link
Contributor

github-actions bot commented Apr 3, 2020

🎉 This issue has been resolved in version 2.0.0-alpha.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions
Copy link
Contributor

github-actions bot commented Jun 8, 2020

🎉 This issue has been resolved in version 2.0.0-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions
Copy link
Contributor

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
♿ accessibility Improves usability 🎨 design Requires input from designers good first issue A beginner-friendly task
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants