From 9365b39cb0213150f7a1d04d1857304af196cc5c Mon Sep 17 00:00:00 2001 From: Sarbbottam Bandyopadhyay Date: Thu, 12 May 2016 16:26:29 -0700 Subject: [PATCH] fix(a11y): using button instead of div label, div, a can be styled to look like a button, but it does not behave as a button semantically --- server/views/challenges/showBonfire.jade | 11 +++++++---- server/views/challenges/showHTML.jade | 18 ++++++++++-------- server/views/challenges/showJS.jade | 13 ++++++++----- 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/server/views/challenges/showBonfire.jade b/server/views/challenges/showBonfire.jade index bb7bc6b33e..7b01d104ff 100644 --- a/server/views/challenges/showBonfire.jade +++ b/server/views/challenges/showBonfire.jade @@ -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 diff --git a/server/views/challenges/showHTML.jade b/server/views/challenges/showHTML.jade index b9c706c707..e68b3c6cc1 100644 --- a/server/views/challenges/showHTML.jade +++ b/server/views/challenges/showHTML.jade @@ -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 diff --git a/server/views/challenges/showJS.jade b/server/views/challenges/showJS.jade index 517c5d13ec..bdebab3ad8 100644 --- a/server/views/challenges/showJS.jade +++ b/server/views/challenges/showJS.jade @@ -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