v3 - accessible components #12

Merged

neb-b merged 1 commit from styleguide into master

2019-10-31 18:44:39 +01:00

neb-b commented

2019-10-31 18:17:48 +01:00

(Migrated from github.com)

Motivations

The existing shared components are overly complex and can be frustrating to deal with. Many of the components are not accessible to keyboards and use text with a very low contrast ratio.

Making changes to them outside of this repo requires very specific style rules. ex: https://github.com/lbryio/lbry-desktop/blob/master/src/ui/scss/component/_form-field.scss#L4-L19

Changes

A quick overview of the changes can be seen here:
Radio and checkboxes can now be accessed via keyboard
Elements in focus have proper :focus style
I removed a ton of colors, they allowed for a lot of different color styles on elements that weren't the same.
The colors I kept all have > 4.5 contrast ratio in their respective use-cases
Designed to make it easy for custom themes

Additional Notes

I think eventually this will include card/modal styles
All dist/ changes can be ignored
This is a breaking change
- I will upgrade lbry-desktop first, then lbry.com, then possibly lbry.tech
https://github.com/lbryio/lbry-desktop/issues/3131

### Motivations The existing shared components are overly complex and can be frustrating to deal with. Many of the components are not accessible to keyboards and use text with a very low contrast ratio. Making changes to them outside of this repo requires very specific style rules. ex: https://github.com/lbryio/lbry-desktop/blob/master/src/ui/scss/component/_form-field.scss#L4-L19 ### Changes - A quick overview of the changes can be seen here: - Radio and checkboxes can now be accessed via keyboard - Elements in focus have proper `:focus` style - I removed a ton of colors, they allowed for a lot of different color styles on elements that weren't the same. - The colors I kept all have > 4.5 contrast ratio in their respective use-cases - Designed to make it easy for custom themes ### Additional Notes - I think eventually this will include card/modal styles - All `dist/` changes can be ignored - This is a breaking change - I will upgrade lbry-desktop first, then lbry.com, then possibly lbry.tech - https://github.com/lbryio/lbry-desktop/issues/3131

neb-b commented

2019-10-31 18:42:39 +01:00

(Migrated from github.com)

Going to merge this so the link to docs work, but I will request a real review before I publish v3.

No reviewers

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/components#12

No description provided.

Rows
Columns