improve Lighthouse "Accessibility" and "Best Practices" scores: (#46)

danikane · addyosmani · commit 84a805910b2b · 2017-06-27T21:39:33.000-07:00
1) https://dequeuniversity.com/rules/axe/1.1/list - removed <br> tag from list 2) https://dequeuniversity.com/rules/axe/1.1/html-lang - added lang="en" as default to <html> tag 3) https://developers.google.com/web/tools/lighthouse/audits/contrast-ratio - using Vue's icon darker color for header and links 4) https://developers.google.com/web/tools/lighthouse/audits/noopener - added rel="noopener" to all links
diff --git a/template/index.html b/template/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/template/src/App.vue b/template/src/App.vue
@@ -48,7 +48,7 @@ header {
   margin: 0;
   height: 56px;
   padding: 0 16px 0 24px;
-  background-color: #4fc08d;
+  background-color: #35495E;
   color: #ffffff;
 }
 
diff --git a/template/src/components/Hello.vue b/template/src/components/Hello.vue
@@ -3,19 +3,18 @@
     <h1>\{{ msg }}</h1>
     <h2>Essential Links</h2>
     <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://gitter.im/vuejs/vue" target="_blank" rel="noopener">Gitter Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank" rel="noopener">Docs for This Template</a></li>
     </ul>
     <h2>Ecosystem</h2>
     <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+      <li><a href="http://router.vuejs.org/" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="http://vuex.vuejs.org/" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="http://vue-loader.vuejs.org/" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
     </ul>
   </div>
 </template>
@@ -32,7 +31,7 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style>
 h1, h2 {
   font-weight: normal;
 }
@@ -48,6 +47,6 @@ li {
 }
 
 a {
-  color: #42b983;
+  color: #35495E;
 }
 </style>

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ header {`
`48`	`48`	`margin: 0;`
`49`	`49`	`height: 56px;`
`50`	`50`	`padding: 0 16px 0 24px;`
`51`		`- background-color: #4fc08d;`
	`51`	`+ background-color: #35495E;`
`52`	`52`	`color: #ffffff;`
`53`	`53`	`}`
`54`	`54`