LBRYCommunity/components
1
0
Fork 0
Code Issues1 Pull requests7 Projects Releases Packages Wiki Activity

v3 - accessible components #12

Merged
neb-b merged 1 commit from styleguide into master 2019-10-31 18:44:39 +01:00
Conversation 1 Commits 1 Files changed 30 +5122 -1466
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

### 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.

Going to merge this so the link to docs work, but I will request a real review before I publish v3.
Sign in to join this conversation.
No reviewers
No labels
area: devops
area: discovery
area: docs
area: livestream
consider soon
dependencies
Epic
good first issue
hacktoberfest
help wanted
icebox
level: 1
level: 2
level: 3
level: 4
needs: exploration
needs: grooming
needs: priority
needs: repro
needs: tech design
on hold
priority: blocker
priority: high
priority: low
priority: medium
resilience
Tom's Wishlist
type: bug
type: discussion
type: improvement
type: new feature
type: refactor
type: task
type: testing
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.
Delete branch "styleguide"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?