Merge branch 'master' of github.com:caneveryoneusetemp/caneveryoneuse…

…_tool
caneveryoneusetemp · Mar 18, 2024 · 989e15b · 989e15b
2 parents 93085f8 + a8effd1
commit 989e15b
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 42 deletions.
diff --git a/src/json/foundation.json b/src/json/foundation.json
@@ -25,7 +25,7 @@
             "name": "Accordion",
             "slug":"accordion",
             "Axe": {
-                "total_issues": 6,
+                "total_issues": 3,
                 "errors": [
                     {
                         "error_type": "Elements must only use supported ARIA attributes",
@@ -104,7 +104,7 @@
                     {
                         "error_type": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
                         "description": "Lists must be marked up correctly, meaning they must not contain content elements other than li elements.",
-                        "fix": "wrap the two buttons with a list itme <li>",
+                        "fix": "wrap the two buttons with a list item <li>",
                         "wcag": {
                             "version": "2.2",
                             "success_criteria": "MUST: Info and Relationships"

diff --git a/src/json/material-angular.json b/src/json/material-angular.json
@@ -15,7 +15,7 @@
                     {
                         "error_type": "2.1.1 Keyboard",
                         "description": "Content is not scrollable with the keyboard. Long content gets cut off.",
-                        "fix": "Make content of dialog focussable so it can be scrolled via keyboard. Suggestion: Add ad tabindex='0'",
+                        "fix": "Make content of dialog focusable so it can be scrolled via keyboard. Suggestion: Add ad tabindex='0'",
                         "wcag": {
                             "version": "2.2",
                             "success_criteria": "https://www.w3.org/TR/WCAG22/#keyboard"

diff --git a/src/partials/framework-overview-summary.jsx b/src/partials/framework-overview-summary.jsx
@@ -28,19 +28,6 @@ const calculateIssuesForFramework = (framework) => {
   };
 };
 
-const getTrophyIcon = (rank) => {
-  const trophyStyles = { width: '16px', verticalAlign: 'middle', marginLeft: '5px' };
-  switch(rank) {
-    case 1:
-      return <img src="/images/trophy-gold.svg" style={trophyStyles} alt="Gold Trophy" />;
-    case 2:
-      return <img src="/images/trophy-silver.svg" style={trophyStyles} alt="Silver Trophy" />;
-    case 3:
-      return <img src="/images/trophy-bronze.svg" style={trophyStyles} alt="Bronze Trophy" />;
-    default:
-      return null;
-  }
-};
 
 const FrameworkOverviewSummary = () => {
   let frameworkSummaries = frameworkData.map(framework => ({
@@ -55,30 +42,19 @@ const FrameworkOverviewSummary = () => {
     framework.rank = index + 1;
   });
 
-  const rankStyle = {
-    textAlign: 'left', 
-  };
   const textStyle = {
     textAlign: 'left',
   };
   const numberStyle = {
     textAlign: 'right',
   };
 
-  const rankAndTrophyStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-  };
-
   return (
     <div className="container">
-      <h2>Framework Summary Overview</h2>
+      <h2>Framework Summary</h2>
       <table className="table">
         <thead>
           <tr>
-            <th style={rankStyle}>Rank</th>
             <th style={textStyle}>Framework</th>
             <th style={numberStyle}>Total Components</th>
             <th style={numberStyle}>Components with Zero Issues</th>
@@ -88,12 +64,6 @@ const FrameworkOverviewSummary = () => {
         <tbody>
           {frameworkSummaries.map((framework, index) => (
             <tr key={index}>
-              <td style={rankStyle}>
-                <div style={rankAndTrophyStyle}>
-                  <span>{framework.rank}</span>
-                  {getTrophyIcon(framework.rank)}
-                </div>
-              </td>
               <td style={textStyle}><Link to={`/${framework.slug}`} className="text-dark">{framework.name}</Link></td>
               <td style={numberStyle}>{framework.totalComponents}</td>
               <td style={numberStyle}>{framework.zeroIssuesCount}</td>

diff --git a/src/partials/framework-overview.jsx b/src/partials/framework-overview.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import frameworkData from '../json';
 import { Link } from "react-router-dom";
 
-
 const calculateTotalIssues = (component) => {
   let totalIssues = 0;
 
@@ -27,17 +26,21 @@ const getBackgroundClass = (issues) => {
 
 const FrameworkOverview = () => {
   const allComponentNames = [...new Set(frameworkData.flatMap(framework =>
-    framework.components.map(component => component.name)))];
+    framework.components.map(component => ({ name: component.name, slug: component.slug }))))];
 
-  const componentIssuesMap = allComponentNames.reduce((acc, name) => {
+  const componentIssuesMap = allComponentNames.reduce((acc, { name, slug }) => {
     acc[name] = frameworkData.map(framework => {
       const component = framework.components.find(c => c.name === name);
-      return component ? calculateTotalIssues(component) : '-';
+      return component ? { issues: calculateTotalIssues(component), slug: `${framework.slug}/${component.slug}` } : { issues: '-', slug: null };
     });
     return acc;
   }, {});
 
-  // Inline style for equal column width
+  const linkStyle = {
+    textDecoration: 'none',
+    color: 'black',
+  };
+
   const columnStyle = {
     width: `${100 / (frameworkData.length + 1)}%`,
     textAlign: 'center',
@@ -64,8 +67,12 @@ const FrameworkOverview = () => {
           {Object.entries(componentIssuesMap).map(([componentName, issuesCounts], index) => (
             <tr key={index}>
               <td style={columnStyle}>{componentName}</td>
-              {issuesCounts.map((count, fwIndex) => (
-                <td key={fwIndex} className={`${getBackgroundClass(count)} text-center text-bkack`} style={columnStyle}>{count}</td>
+              {issuesCounts.map(({ issues, slug }, fwIndex) => (
+                <td key={fwIndex} className={`${getBackgroundClass(issues)} text-center`} style={columnStyle}>
+                  {issues !== '-' && parseInt(issues, 10) > 0 ? (
+                    <Link to={`/${slug}`} style={linkStyle}>{issues}</Link>
+                  ) : issues}
+                </td>
               ))}
             </tr>
           ))}

diff --git a/src/partials/search.jsx b/src/partials/search.jsx
@@ -76,7 +76,7 @@ const Search = () => {
                             <div className="position-relative" style={style.inputWrapper} >
                                 <input
                                     style={style.input}
-                                    type="text"
+                                    type="search"
                                     className="form-control form-control-search rounded-4 bg-white"
                                     id="search_q"
                                     placeholder="Search here..."