Merge branch 'button-fixes'

# Conflicts:
#	src/components/Question.vue

Author: spinn

examples/questionnaire/Example.vue

@@ -37,20 +37,22 @@
 
       <!-- We've overriden the default "completeButton" slot content -->
       <template v-slot:completeButton>
-        <a
-          ref="button"
-          href="#"
-          v-on:click.prevent="onSendData()"
-          v-if="!submitted"
-          role="button"
-          aria-label="Press to submit"
-        >
-          <div class="o-btn-action">
-            <span>{{ language.submitText }}</span>
-          </div>
-
-          <span class="f-enter-desc">{{ language.pressEnter }}</span>
-        </a>
+        <div class="f-submit" v-if="!submitted">
+          <button 
+            class="o-btn-action"
+            ref="button"
+            type="submit"
+            href="#"
+            v-on:click.prevent="onSendData()"
+            aria-label="Press to submit"
+          >
+              <span>{{ language.submitText }}</span>
+          </button>
+          <a class="f-enter-desc"
+            href="#"
+            v-on:click.prevent="onSendData()">
+           {{ language.pressEnter }}</a>
+        </div>
 
         <p class="text-success" v-if="submitted">Submitted succesfully.</p>
       </template>

examples/quiz/Example.vue

@@ -35,19 +35,22 @@
 
       <!-- We've overriden the default "completeButton" slot content -->
       <template v-slot:completeButton>
-        <a
-          ref="button"
-          href="#"
-          v-on:click.prevent="onQuizSubmit()"
-          v-if="!submitted"
-        >
-          <div class="o-btn-action">
+        <div class="f-submit" v-if="!submitted">
+          <button
+            class="o-btn-action"
+            ref="button"
+            type="submit"
+            href="#"
+            v-on:click.prevent="onQuizSubmit()"
+            aria-label="Press to submit">
             <span>Calculate score</span>
-          </div>
-
-          <span class="f-enter-desc">{{ language.pressEnter }}</span>
-        </a>
-
+          </button>
+          <a 
+            class="f-enter-desc"
+            href="#"
+            v-on:click.prevent="onQuizSubmit()">
+            {{ language.pressEnter }}</a>
+        </div>
         <p class="text-success" v-if="submitted && score < 4">"You scored {{ score }} out of {{ total }}. There's a lot of room for improvement."</p>
         <p class="text-success" v-else-if="submitted && score < 7">"You scored {{ score }} out of {{ total }}. Not bad at all!"</p>
         <p class="text-success" v-else-if="submitted && score <= total">"You scored {{ score }} out of {{ total }}. Wow, that's impressive!"</p>

src/assets/css/common.css

@@ -131,16 +131,30 @@ svg.logo {
   opacity: 1;
 }
 
+.v-form button,
+.v-form input {
+  -webkit-appearance: none;
+  overflow: visible;
+}
+
 /*buttons*/
-.o-btn-action {
-  z-index: 1;
+
+/*default button*/
+.v-form button {
+  border: none;
+  outline: 0;
   cursor: pointer;
-  padding: 0 1.4rem 0;
-  margin-bottom: 20px;
+  padding: 0.6rem 1.4rem;
   text-align: center;
   display: inline-block;
-  line-height: 45px;
-  height: 44px;
+  min-height: 44px;
+  white-space: pre-wrap;
+  max-width: 100%;
+} 
+
+.o-btn-action {
+  z-index: 1;
+  line-height: 1.2;
   font-weight: 900;
   text-transform: lowercase;
 }
@@ -153,7 +167,13 @@ svg.logo {
 }
 
 .f-enter-desc {
+  display: inline-block;
   margin-left: 0.6rem;
+  margin-top: 0.6rem;
+}
+
+.f-enter {
+  margin-bottom: 20px;
 }
 
 /*v-form*/
@@ -248,12 +268,6 @@ span.faux-form {
   resize: vertical;
 }
 
-.v-form button,
-.v-form input {
-  -webkit-appearance: none;
-  overflow: visible;
-}
-
 .v-form .full-width input[type=text],
 .v-form .full-width input[type=number],
 .v-form .full-width input[type=tel],
@@ -536,6 +550,10 @@ a.f-disabled {
   max-width: 760px;
 }
 
+f.submit {
+  margin-bottom: 20px;
+}
+
 /*
   media-start
 */
@@ -637,11 +655,6 @@ a.f-disabled {
     font-size: .9rem;
   }
 
-  .o-btn-action {
-    line-height: 40px;
-    height: 40px;
-  }
-
   .field-sectionbreaktype p {
     font-size: 1rem;
   }

src/assets/css/themes/theme-minimal.css

@@ -118,6 +118,7 @@ span.f-answered{
 }
 
 /*buttons*/
+
 .o-btn-action {
   color: var(--bg-color);
   background-color: var(--main-text-color);
@@ -127,7 +128,7 @@ span.f-answered{
 .o-btn-action:focus {
   background-color: var(--main-text-color);
   opacity: .9;
-}
+} 
 
 /*footer*/
 .f-footer .footer-inner-wrap{
@@ -136,7 +137,7 @@ span.f-answered{
 
 @media screen and (max-width:479px) {
   .f-footer .footer-inner-wrap{
-    background-color: rgba(0,0,0,0.05);
+    background-color: rgba(180,180,180,0.15);
   }
 
 }
@@ -160,7 +161,9 @@ span.f-answered{
 }
 
 .f-prev:hover,
-.f-next:hover{
+.f-next:hover,
+.f-prev:focus,
+.f-next:focus{
   background-color: rgba(0,0,0,0.07);
 }
 

src/components/FlowForm.vue

@@ -29,13 +29,22 @@
 
           <slot name="completeButton">
             <!-- Default content for the "completeButton" slot -->
-            <a ref="button" href="#" v-on:click.prevent="submit()" v-if="!submitted" role="button" v-bind:aria-label="language.ariaSubmitText">
-              <div class="o-btn-action">
+            <button 
+            class="o-btn-action"
+            ref="button" 
+            type="button" 
+            href="#" 
+            v-on:click.prevent="submit()" 
+            v-if="!submitted"
+            v-bind:aria-label="language.ariaSubmitText">
                 <span>{{ language.submitText }}</span>
-              </div>
-
-              <span class="f-enter-desc">{{ language.pressEnter }}</span>
-            </a>
+            </button>
+             <a 
+              class="f-enter-desc"
+              href="#"
+              v-on:click.prevent="submit()"
+              v-if="!submitted">
+             {{ language.pressEnter }}</a>
           </slot>
         </div>
       </div>

src/components/Question.vue

@@ -50,23 +50,25 @@
         </div>
         <p v-if="question.description" class="description">{{ question.description }}</p>
       </div>
-
-      <a
-        class="animate fade-in-up f-enter"
-        ref="button"
-        href="#"
-        v-if="showOkButton()"
-        v-on:click.prevent="onEnter"
-        role ="button"
-        v-bind:aria-label="language.ariaOk"
-      >
-        <div class="o-btn-action">
-          <span v-if="question.type === QuestionType.SectionBreak">{{ language.continue }}</span>
-          <span v-else>{{ language.ok }}</span>
-        </div>
-
-        <span class="f-enter-desc" v-if="question.type !== QuestionType.LongText || !isMobile">{{ language.pressEnter }}</span>
-      </a>
+      <div class="animate fade-in f-enter" v-if="showOkButton()">
+        <button 
+          class="o-btn-action"
+          type="button"
+          ref="button"
+          href="#"
+          v-on:click.prevent="onEnter"
+          v-bind:aria-label="language.ariaOk"
+        >
+            <span v-if="question.type === QuestionType.SectionBreak">{{ language.continue }}</span>
+            <span v-else>{{ language.ok }}</span>
+        </button>
+        <a 
+          class="f-enter-desc"
+          href="#"
+          v-if="question.type !== QuestionType.LongText || !isMobile"
+          v-on:click.prevent="onEnter">
+          {{ language.pressEnter }}</a>
+      </div>
 
       <div v-if="showInvalid()" class="f-invalid" role="alert" aria-live="assertive">{{ language.invalidPrompt }}</div>
     </div>
@@ -238,4 +240,4 @@
       }
     }
   }
-</script>
+</script>