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

Can't tell between focused and unfocused checkbox in the Paper theme #505

Closed
dandv opened this issue Sep 1, 2015 · 4 comments
Closed

Can't tell between focused and unfocused checkbox in the Paper theme #505

dandv opened this issue Sep 1, 2015 · 4 comments

Comments

@dandv
Copy link

dandv commented Sep 1, 2015

To reproduce, focus the Password field at https://bootswatch.com/paper/ and tab to the next field (the checkbox).

image

By comparison, in United, Superhero, Yeti and other themes, there's an outline: 5px auto -webkit-focus-ring-color:

image

Maybe the outline is not the prettiest, but it helps with accessibility when using keyboard navigation.
@thomaspark
Copy link
Owner

Thanks for the suggestion, we should be able to give focused checkboxes some sort of feedback like this for Paper as well.

@thomaspark
Copy link
Owner

Focused checkboxes will now have a colored border:
screen shot 2015-09-01 at 1 47 21 pm

@dandv
Copy link
Author

dandv commented Sep 1, 2015

Thanks! This is better than the Polymer Paper implementation now.

@dandv dandv mentioned this issue Sep 1, 2015
Closed
@dandv
Copy link
Author

dandv commented Sep 1, 2015

Nevermind my comment above. Turns out the current demo for Polymer Paper elements is at https://elements.polymer-project.org/elements/paper-checkbox?view=demo:demo/index.html, and the focused checkbox does have a circle around it.

mwalz added a commit to mwalz/bootswatch that referenced this issue Oct 16, 2015
@mwalz
Merge branch 'gh-pages' of https://github.com/thomaspark/bootswatch i…
8b5def4 
…nto emagine-styles

# By Thomas Park (106) and others
# Via Thomas Park
* 'gh-pages' of https://github.com/thomaspark/bootswatch: (132 commits)
  update api path and demo
  superhero: use default font-weight, closes thomaspark#522
  include the CSS and SASS fixes
  parentheses appear to be needed here for less
  make table of contents anchor links consistent
  add table of contents to sections, closes thomaspark#519
  Fix google font import issue with scss
  add npmignore, closes thomaspark#512
  paper: fix styling of forms in navbar, closes thomaspark#511
  set web font path as variable that can be overridden, closes thomaspark#507
  rename bootswatch assets to custom to reduce confusion
  paper: focused checkboxes have colored border, closes thomaspark#505
  Add FontCDN to tools section
  paper: fix checkbox/radio alignment in firefox, closes thomaspark#497
  yeti: fix padding for pagination spans, closes thomaspark#496
  spacelab: remove text-shadow on btn-link
  wide button column on preview pages
  style btn-link as flat button, tweak all buttons, closes thomaspark#495
  update bootstrapcdn links
  paper: give colored underline to readonly inputs, closes thomaspark#491
  ...

# Conflicts:
#	darkly/bootstrap.css
#	darkly/bootstrap.min.css
#	flatly/bootstrap.css
#	flatly/bootstrap.min.css
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dandv @thomaspark