gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(a11y): using button instead of div

Browse Source 
label, div, a can be styled to look like a button, but it does not behave as a button semantically
This commit is contained in:
Sarbbottam Bandyopadhyay
2016-05-12 16:26:29 -07:00
parent 95108e4ca1
commit 9365b39cb0
3 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
server/views/challenges/showBonfire.jade
View File

@ -30,15 +30,18 @@ block content
ul: li: a(href=""+link, target="_blank") !{MDNkeys[index]} ul: li: a(href=""+link, target="_blank") !{MDNkeys[index]}
.button-spacer .button-spacer
if (user) if (user)
label.btn.btn-primary.btn-block.btn-lg#submitButton button.btn.btn-primary.btn-block.btn-lg#submitButton
| Run tests (ctrl + enter) | Run tests (ctrl + enter)
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.input-group.btn-group-justified
label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal .btn-group
button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal
|   Reset |   Reset
label.btn.btn-primary.btn-primary-ghost.btn-lg#challenge-help-btn .btn-group
button.btn.btn-primary.btn-primary-ghost.btn-lg#challenge-help-btn
|   Help |   Help
label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal .btn-group
button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal
|   Bug |   Bug
if (!user) if (!user)
.button-spacer .button-spacer

18
server/views/challenges/showHTML.jade
View File

@ -24,15 +24,17 @@ block content
p.wrappable!= sentence p.wrappable!= sentence
.negative-bottom-margin-30 .negative-bottom-margin-30
.button-spacer .button-spacer
.btn-big.btn.btn-primary.btn-block#submitButton button.btn-big.btn.btn-primary.btn-block#submitButton
| Run tests (ctrl + enter) | Run tests (ctrl + enter)
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.btn-group-justified
label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal Reset .btn-group
label.btn.btn-primary.btn-primary-ghost.hidden-sm.hidden-md.hidden-lg button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal Reset
a(href='//gitter.im/freecodecamp/help') Help a.btn.btn-primary.btn-primary-ghost.hidden-sm.hidden-md.hidden-lg(href='//gitter.im/freecodecamp/help') Help
label.btn.btn-primary.btn-primary-ghost.hidden-xs.btn-lg#challenge-help-btn Help .btn-group
label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal Bug button.btn.btn-primary.btn-primary-ghost.hidden-xs.btn-lg#challenge-help-btn Help
.btn-group
button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal Bug
script. script.
var userLoggedIn = true; var userLoggedIn = true;
if (!user) if (!user)
@ -67,7 +69,7 @@ block content
span.completion-icon.ion-checkmark-circled.text-primary span.completion-icon.ion-checkmark-circled.text-primary
.spacer .spacer
if(user) if(user)
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge (ctrl + enter) button#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge (ctrl + enter)
else else
a#next-challenge.btn.btn-lg.btn-primary.btn-block(href="/challenges/next-challenge?id="+id) Go to my next challenge (ctrl + enter) a#next-challenge.btn.btn-lg.btn-primary.btn-block(href="/challenges/next-challenge?id="+id) Go to my next challenge (ctrl + enter)
include ../partials/challenge-modals include ../partials/challenge-modals

13
server/views/challenges/showJS.jade
View File

@ -35,12 +35,15 @@ block content
.form-group.text-center .form-group.text-center
.col-xs-12 .col-xs-12
// extra field to distract password tools like lastpass from injecting css into our username field // extra field to distract password tools like lastpass from injecting css into our username field
label.btn.btn-primary.btn-big.btn-block#submitButton Run tests (ctrl + enter) button.btn.btn-primary.btn-big.btn-block#submitButton Run tests (ctrl + enter)
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.input-group.btn-group-justified
label.btn.btn-primary.btn-lg#trigger-reset-modal Reset .btn-group
label.btn.btn-primary.btn-lg#challenge-help-btn Help button.btn.btn-primary.btn-lg#trigger-reset-modal Reset
label.btn.btn-primary.btn-lg#trigger-issue-modal Bug .btn-group
button.btn.btn-primary.btn-lg#challenge-help-btn Help
.btn-group
button.btn.btn-primary.btn-lg#trigger-issue-modal Bug
if (!user) if (!user)
.button-spacer .button-spacer
a.btn.signup-btn.btn-block.btn-block(href='/signin') Sign in so you can save your progress a.btn.signup-btn.btn-block.btn-block(href='/signin') Sign in so you can save your progress
@ -72,7 +75,7 @@ block content
.spacer .spacer
.row .row
if (user) if (user)
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge (ctrl + enter) button#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge (ctrl + enter)
else else
a#next-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block(href="/challenges/next-challenge?id="+id) Go to my next challenge (ctrl + enter) a#next-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block(href="/challenges/next-challenge?id="+id) Go to my next challenge (ctrl + enter)
include ../partials/challenge-modals include ../partials/challenge-modals