HTML validation

.htmlvalidate.json

@@ -0,0 +1,8 @@
+{
+  "plugins": ["html-validate-vue"],
+  "extends": ["html-validate:recommended", "html-validate-vue:recommended"],
+  "elements": ["html5"],
+  "transform": {
+    "^.*\\.vue$": "html-validate-vue"
+  }
+}

package.json

@@ -1,21 +1,22 @@
 {
   "name": "web",
   "version": "1.0.0",
+  "private": true,
   "description": "UPchieve web client",
   "author": "Corey <corey.johns@believeachieve.com>",
-  "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve --open",
     "build": "vue-cli-service build",
-    "build:staging": "vue-cli-service build --mode=staging",
     "lint": "vue-cli-service lint",
-    "lint:prod": "vue-cli-service lint --mode=production --no-fix --max-warnings=0",
+    "build:staging": "vue-cli-service build --mode=staging",
+    "clean-slate": "npx rimraf node_modules dist && npm install",
+    "cypress": "npx cypress run",
+    "dev": "vue-cli-service serve --open",
     "e2e": "vue-cli-service test:e2e --mode=development",
     "e2e:headless": "vue-cli-service test:e2e --mode=development --headless",
+    "html-validate": "vue-cli-service html-validate",
+    "lint:prod": "vue-cli-service lint --mode=production --no-fix --max-warnings=0",
     "test": "vue-cli-service test:unit",
-    "test:watch": "vue-cli-service test:unit --watch",
-    "clean-slate": "npx rimraf node_modules dist && npm install",
-    "cypress": "npx cypress run"
+    "test:watch": "vue-cli-service test:unit --watch"
   },
   "dependencies": {
     "@sentry/browser": "^5.9.0",
@@ -66,13 +67,16 @@
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.0.1"
   },
-  "engines": {
-    "node": ">= 11.7.0",
-    "npm": ">= 6.0.0"
-  },
   "devDependencies": {
     "cypress-file-upload": "^4.0.7",
+    "html-validate": "^3.5.0",
+    "html-validate-vue": "^3.2.0",
+    "vue-cli-plugin-html-validate": "~1.2.3",
     "vue-jest": "^3.0.5",
     "webpack-bundle-analyzer": "^3.7.0"
+  },
+  "engines": {
+    "node": ">= 11.7.0",
+    "npm": ">= 6.0.0"
   }
 }

src/components/Admin/SessionListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link :to="`/admin/sessions/${session._id}`" class="session-list-link">
     <div class="session-list-item">
-      <div class="session-list-item__column session-list-item__column">
+      <div class="session-list-item__column">
         <span class="bold">{{ subTopicDisplayName }}</span>
         <span>{{ createdAt }}</span>
       </div>

src/components/App/AppHeader/DefaultHeader/index.vue

@@ -2,7 +2,7 @@
   <div class="DefaultHeader">
     <template v-if="mobileMode">
       <div class="DefaultHeader-user-info">
-        <img class="DefaultHeader-user-info-avatar" :src="avatarUrl" />
+        <img class="DefaultHeader-user-info-avatar" :src="avatarUrl" alt="" />
         <span class="DefaultHeader-user-info-name">{{ name }}</span>
       </div>
 
@@ -11,7 +11,7 @@
 
     <template v-else>
       <router-link to="/">
-        <img class="DefaultHeader-logo" :src="logoUrl" />
+        <img class="DefaultHeader-logo" :src="logoUrl" alt="UPchieve" />
       </router-link>
     </template>
   </div>

src/components/App/AppHeader/RejoinSessionHeader.vue

@@ -13,7 +13,11 @@
         <hyperlink-button reverse @click.native="end"
           >End chat</hyperlink-button
         >
-        <large-button primary reverse @click.native="rejoin"
+        <large-button
+          button-type="button"
+          primary
+          reverse
+          @click.native="rejoin"
           >Return to chat</large-button
         >
       </div>

src/components/App/AppHeader/SessionHeader.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="session-header__center">
       <router-link to="/">
-        <img class="session-header__logo" :src="logoUrl" />
+        <img class="session-header__logo" :src="logoUrl" alt="UPchieve" />
       </router-link>
     </div>
     <div class="session-header__right"></div>

src/components/App/AppModal/ModalTemplate.vue

@@ -21,10 +21,14 @@
       <template v-if="!mobileMode && showTemplateButtons">
         <div class="ModalTemplate-seperator" />
         <div class="ModalTemplate-buttons">
-          <large-button v-if="!alertModal" @click.native="handleCancel"
+          <large-button
+            v-if="!alertModal"
+            button-type="button"
+            @click.native="handleCancel"
             >Cancel</large-button
           >
           <large-button
+            button-type="button"
             primary
             @click.native="$emit('accept')"
             :disabled="!enableAccept"

src/components/App/AppModal/RejoinSessionModal.vue

@@ -7,8 +7,12 @@
     </h2>
 
     <div class="RejoinSessionModal-buttons">
-      <large-button primary @click.native="rejoin">Return to chat</large-button>
-      <large-button secondary @click.native="end">End chat</large-button>
+      <large-button button-type="button" primary @click.native="rejoin"
+        >Return to chat</large-button
+      >
+      <large-button button-type="button" secondary @click.native="end"
+        >End chat</large-button
+      >
     </div>
   </div>
 </template>

src/components/App/AppModal/UpgradeAppModal.vue

@@ -24,9 +24,13 @@
     <div v-if="!mobileMode" class="seperator" />
 
     <div class="UpgradeAppModal-buttons">
-      <large-button @click.native="onClose()">No thanks.</large-button>
+      <large-button button-type="button" @click.native="onClose()"
+        >No thanks.</large-button
+      >
       <a :href="appStoreLink" target="_blank" class="UpgradeAppModal-link">
-        <large-button primary>Take me to the app store!</large-button>
+        <large-button button-type="button" primary
+          >Take me to the app store!</large-button
+        >
       </a>
     </div>
   </div>

src/components/App/AppSidebar/SidebarInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="SidebarInfo">
     <template v-if="authenticated">
-      <img class="SidebarInfo-avatar" :src="avatarUrl" />
+      <img class="SidebarInfo-avatar" :src="avatarUrl" alt="" />
       <div class="SidebarInfo-name">{{ name }}</div>
       <div class="SidebarInfo-type">{{ type }}</div>
       <div class="SidebarInfo-status">

src/components/ButtonTemplate.vue

@@ -9,10 +9,10 @@
     />
   </router-link>
 
-  <button v-else class="ButtonTemplate">
-    <div>
+  <button :type="buttonType" v-else class="ButtonTemplate">
+    <span>
       <slot />
-    </div>
+    </span>
     <arrow-icon
       v-if="primary && showArrow"
       class="ButtonTemplate-icon arrow-icon"
@@ -29,7 +29,10 @@ export default {
   props: {
     primary: Boolean,
     routeTo: String,
-    showArrow: Boolean
+    showArrow: Boolean,
+    buttonType: {
+      type: String
+    }
   }
 };
 </script>

src/components/HyperlinkButton.vue

@@ -1,5 +1,10 @@
 <template>
-  <button-template :primary="primary" :routeTo="routeTo" :class="buttonClasses">
+  <button-template
+    :buttonType="buttonType"
+    :primary="primary"
+    :routeTo="routeTo"
+    :class="buttonClasses"
+  >
     <slot />
   </button-template>
 </template>
@@ -13,7 +18,13 @@ export default {
     primary: Boolean,
     dark: Boolean,
     reverse: Boolean,
-    routeTo: String
+    routeTo: String,
+    buttonType: {
+      type: String,
+      default: function() {
+        return "button";
+      }
+    }
   },
   computed: {
     buttonClasses() {

src/components/LargeButton.vue

@@ -1,5 +1,6 @@
 <template>
   <button-template
+    :buttonType="buttonType"
     :primary="primary"
     :routeTo="routeTo"
     :class="buttonClasses"
@@ -22,6 +23,9 @@ export default {
     showArrow: {
       type: Boolean,
       default: true
+    },
+    buttonType: {
+      type: String
     }
   },
   computed: {

src/components/ReferenceForm.vue

@@ -9,15 +9,16 @@
       class="questions-container"
       :class="isAdminReview && 'admin-review'"
     >
-      <template v-if="!isAdminReview">
-        <h1 class="title">UPchieve Applicant Reference Evaluation</h1>
-        <p>
+      <fieldset :disabled="isAdminReview">
+        <legend v-if="!isAdminReview">
+          <h1 class="title">UPchieve Applicant Reference Evaluation</h1>
+        </legend>
+        <legend v-else>Evaluation Responses</legend>
+        <p v-if="!isAdminReview">
           Please answer the following questions honestly based on your knowledge
           of/experience with the applicant. It should take less than 10 minutes
           to complete and all answers will remain confidential.
         </p>
-      </template>
-      <fieldset :disabled="isAdminReview">
         <div class="question-col">
           <label for="affiliation" class="uc-form-label"
             >In what capacity do you know the applicant?</label