#96 Implemented standard button elements, added focus styles

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -37,20 +37,19 @@
 
       <!-- 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>
-
+        <div 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>
           <span class="f-enter-desc">{{ language.pressEnter }}</span>
-        </a>
+        </div>
 
         <p class="text-success" v-if="submitted">Submitted succesfully.</p>
       </template>

examples/questionnaire/branding.css

@@ -111,6 +111,7 @@ span.f-answered{
 }
 
 /*buttons*/
+
 .o-btn-action {
   color: var(--bg-color);
   background-color: var(--main-text-color);
@@ -121,6 +122,9 @@ span.f-answered{
   background-color: var(--main-text-color);
   opacity: .9;
 }
+.o-btn-action:focus {
+  outline: 3px solid #BBEBD5;
+}
 
 /*footer*/
 .f-footer .footer-inner-wrap{
@@ -153,7 +157,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);
 }
 

examples/quiz/Example.vue

@@ -35,19 +35,18 @@
 
       <!-- 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 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>
-
+          </button>
           <span class="f-enter-desc">{{ language.pressEnter }}</span>
-        </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

@@ -130,14 +130,28 @@ 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;
   text-align: center;
   display: inline-block;
+  min-height: 44px;
+} 
+
+.o-btn-action {
+  z-index: 1;
   line-height: 45px;
   height: 44px;
   font-weight: 900;
@@ -247,12 +261,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],

src/components/FlowForm.vue

@@ -29,13 +29,17 @@
 
           <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>
+             <span class="f-enter-desc">{{ language.pressEnter }}</span>
           </slot>
         </div>
       </div>

src/components/Question.vue

@@ -50,23 +50,20 @@
         </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>
-
+      <div class="animate fade-in-up 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>
         <span class="f-enter-desc">{{ language.pressEnter }}</span>
-      </a>
+      </div>
 
       <div v-if="showInvalid()" class="f-invalid" role="alert" aria-live="assertive">{{ language.invalidPrompt }}</div>
     </div>