feat: improve accessibility (#300)

Author: halcin

public/css/style.css

@@ -249,3 +249,6 @@ ul {
         cursor: pointer;
         color: var(--li-hover-color);
     }
+    li[role=link]:focus {
+      outline: 2px solid black;
+    }

public/css/themes/light.css

@@ -1,9 +1,9 @@
 :root {
     --primary-text-color: #263238;
-    --secondary-text-color: #607d8be5;
+    --secondary-text-color: black;
     --primary-border-color: rgba(55, 71, 79, 0.1);
     --faded-border-color: rgba(78, 99, 109, 0.1);
-    --head-paragraph-color: #90A4AE;
+    --head-paragraph-color: black;
     --main-color: #304FFE;
     --default-margin: 15px;
     --avatar-border-color: #FFF;

public/scripts/main.js

@@ -91,14 +91,24 @@ function createChart(elementId, type = "bar", payload = {}) {
 }
 window.createChart = createChart;
 
-function liPackageClick() {
+function liPackageNavigateLink(e) {
   const dataValue = this.getAttribute("data-value");
-  window.open(`https://www.npmjs.com/package/${dataValue}`, "_blank");
+  if (e.type === "click" || e.key === "Enter") {
+    const ref = e.target ?? e.srcElement;
+    if (ref) {
+      window.open(`https://www.npmjs.com/package/${dataValue}`, "_blank");
+    }
+  }
 }
 
-function nodeDepClick() {
+function nodeDepNavigateLink(e) {
   const dataValue = this.getAttribute("data-value");
-  window.open(`https://nodejs.org/dist/latest/docs/api/${dataValue}.html`, "_blank");
+  if (e.type === "click" || e.key === "Enter") {
+    const ref = e.target ?? e.srcElement;
+    if (ref) {
+      window.open(`https://nodejs.org/dist/latest/docs/api/${dataValue}.html`, "_blank");
+    }
+  }
 }
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -117,12 +127,14 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const packagesList = document.querySelectorAll("ul.npm-packages-list li");
   for (const liElement of packagesList) {
-    liElement.addEventListener("click", liPackageClick);
+    liElement.addEventListener("click", liPackageNavigateLink);
+    liElement.addEventListener("keydown", liPackageNavigateLink);
   }
 
   const nodeList = document.querySelectorAll("ul.node-list li");
   for (const liElement of nodeList) {
-    liElement.addEventListener("click", nodeDepClick);
+    liElement.addEventListener("click", nodeDepNavigateLink);
+    liElement.addEventListener("keydown", nodeDepNavigateLink);
   }
 
   setTimeout(() => {

views/template.html

@@ -20,7 +20,7 @@
 <div class="page">
     <header>
         <div class="logo">
-            <img src="[[=z.report_logo]]" />
+            <img src="[[=z.report_logo]]" alt="logo"/>
         </div>
         <h1>[[=z.report_title]]</h1>
         <p>[[=z.report_date]]</p>
@@ -56,7 +56,7 @@ <h3><span>[[=z.npm_stats.packages_count.internal]]</span>Internal Dependencies</
                 <ul class="npm-packages-list">
                     [[ for (const [name, option] of Object.entries(z.npm_stats.packages)) { ]]
                     [[ if (!option.isThird) { ]]
-                    <li data-value="[[=name]]">
+                    <li data-value="[[=name]]" tabindex="0" role="link" class="link">
                         <p>[[=name]]</p>
                     </li>
                     [[ } ]]
@@ -71,7 +71,7 @@ <h3><span>[[=z.npm_stats.packages_count.external]]</span>Third-party Dependencie
                 <ul class="npm-packages-list">
                     [[ for (const [name, option] of Object.entries(z.npm_stats.packages)) { ]]
                     [[ if (option.isThird) { ]]
-                    <li data-value="[[=name]]">
+                    <li data-value="[[=name]]" tabindex="0" role="link" class="link">
                         <p>[[=name]]</p>
                     </li>
                     [[ } ]]
@@ -87,7 +87,7 @@ <h3><span>[[=z.npm_stats.deps.transitive.size]]</span>Transitive Dependencies</h
                 </div>
                 <ul class="npm-packages-list">
                     [[ for (const name of z.npm_stats.deps.transitive) { ]]
-                    <li data-value="[[=name]]">
+                    <li data-value="[[=name]]" tabindex="0" role="link" class="link">
                         <p>[[=name]]</p>
                     </li>
                     [[ } ]]
@@ -100,7 +100,7 @@ <h3><span>[[=z.npm_stats.deps.node.size]]</span>Node.js Core Dependencies</h3>
                 </div>
                 <ul class="node-list">
                     [[ for (const name of z.npm_stats.deps.node) { ]]
-                    <li data-value="[[=name]]">
+                    <li data-value="[[=name]]" tabindex="0" role="link" class="link">
                         <p>[[=name]]</p>
                     </li>
                     [[ } ]]
@@ -171,7 +171,7 @@ <h3><span>[[=z.git_stats.packages_count.internal]]</span>Internal Dependencies</
                 <ul class="npm-packages-list">
                     [[ for (const [name, option] of Object.entries(z.git_stats.packages)) { ]]
                     [[ if (!option.isThird) { ]]
-                    <li data-value="[[=name]]">
+                    <li data-value="[[=name]]" tabindex="0" role="link" class="link">
                         <p>[[=name]]</p>
                     </li>
                     [[ } ]]
@@ -186,7 +186,7 @@ <h3><span>[[=z.git_stats.packages_count.external]]</span>Third-party Dependencie
                 <ul class="npm-packages-list">
                     [[ for (const [name, option] of Object.entries(z.git_stats.packages)) { ]]
                     [[ if (option.isThird) { ]]
-                    <li data-value="[[=name]]">
+                    <li data-value="[[=name]]" tabindex="0" role="link" class="link">
                         <p>[[=name]]</p>
                     </li>
                     [[ } ]]