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]}
.button-spacer
if (user)
label.btn.btn-primary.btn-block.btn-lg#submitButton
button.btn.btn-primary.btn-block.btn-lg#submitButton
| Run tests (ctrl + enter)
.button-spacer
.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
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
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
if (!user)
.button-spacer

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

@ -24,15 +24,17 @@ block content
p.wrappable!= sentence
.negative-bottom-margin-30
.button-spacer
.btn-big.btn.btn-primary.btn-block#submitButton
button.btn-big.btn.btn-primary.btn-block#submitButton
| Run tests (ctrl + enter)
.button-spacer
.btn-group.input-group.btn-group-justified
label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal Reset
label.btn.btn-primary.btn-primary-ghost.hidden-sm.hidden-md.hidden-lg
a(href='//gitter.im/freecodecamp/help') Help
label.btn.btn-primary.btn-primary-ghost.hidden-xs.btn-lg#challenge-help-btn Help
label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal Bug
.btn-group.btn-group-justified
.btn-group
button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal Reset
a.btn.btn-primary.btn-primary-ghost.hidden-sm.hidden-md.hidden-lg(href='//gitter.im/freecodecamp/help') Help
.btn-group
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.
var userLoggedIn = true;
if (!user)
@ -67,7 +69,7 @@ block content
span.completion-icon.ion-checkmark-circled.text-primary
.spacer
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
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

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

@ -35,12 +35,15 @@ block content
.form-group.text-center
.col-xs-12
// 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
.btn-group.input-group.btn-group-justified
label.btn.btn-primary.btn-lg#trigger-reset-modal Reset
label.btn.btn-primary.btn-lg#challenge-help-btn Help
label.btn.btn-primary.btn-lg#trigger-issue-modal Bug
.btn-group
button.btn.btn-primary.btn-lg#trigger-reset-modal Reset
.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)
.button-spacer
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
.row
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
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