Merge pull request #92 from solo-io/charlesthebird/lighthouseFixes

Google Lighthouse Fixes
solo-io · Jul 19, 2024 · b6c8a8c · b6c8a8c
2 parents 6da10f5 + 86bd136
commit b6c8a8c
Show file tree

Hide file tree

Showing 24 changed files with 50 additions and 86 deletions.
diff --git a/changelog/v0.0.34/lighthouse-fixes.yaml b/changelog/v0.0.34/lighthouse-fixes.yaml
@@ -0,0 +1,6 @@
+changelog:
+  - type: NON_USER_FACING
+    issueLink: https://github.com/solo-io/gloo-mesh-enterprise/issues/15009
+    description: >-
+      Includes accessibility, best-practices, and performance 
+      improvements related to Google Chrome lighthouse tests.
diff --git a/projects/ui/index.html b/projects/ui/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -9,11 +9,11 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
     <script>
       if (global === undefined) {
         var global = window;
       }
     </script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/projects/ui/package.json b/projects/ui/package.json
@@ -59,7 +59,6 @@
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^3.0.0",
-    "babel-loader": "^8.3.0",
     "eslint": "^8.34.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-storybook": "^0.8.0",

diff --git a/projects/ui/src/Assets/[email protected] b/projects/ui/src/Assets/[email protected]
diff --git a/projects/ui/src/Assets/[email protected] b/projects/ui/src/Assets/[email protected]
diff --git a/projects/ui/src/Assets/[email protected] b/projects/ui/src/Assets/[email protected]
diff --git a/projects/ui/src/Assets/[email protected] b/projects/ui/src/Assets/[email protected]
diff --git a/projects/ui/src/Components/AdminSubscriptions/AdminSubscriptionsFilter.tsx b/projects/ui/src/Components/AdminSubscriptions/AdminSubscriptionsFilter.tsx
@@ -95,7 +95,7 @@ export function AdminSubscriptionsFilter({
     <Box px="30px">
       <Styles.FilterArea>
         <div className="choicesArea">
-          <h3 className="title">Filters</h3>
+          <div className="title">Filters</div>
           <form
             onSubmit={(e) => {
               e.preventDefault();

diff --git a/...rc/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryGridCard.tsx b/...rc/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryGridCard.tsx
@@ -23,7 +23,7 @@ export function ApiSummaryGridCard({
       to={getApiProductDetailsSpecTabLink(apiProduct.id)}
     >
       <GridCardStyles.ApiImageHolder>
-        <img src={bgImageURL} alt="API thumbnail" role="banner" />
+        <img src={bgImageURL} alt="API thumbnail" />
       </GridCardStyles.ApiImageHolder>
       <Box pb={"25px"}>
         <GridCardStyles.Title>{apiProduct.name}</GridCardStyles.Title>
@@ -36,7 +36,7 @@ export function ApiSummaryGridCard({
           </Box>
         )}
         {!!apiProduct.apiProductMetadata && (
-          <Box px={'5px'} pt={"15px"}>
+          <Box px={"5px"} pt={"15px"}>
             <DataPairPillList className="metadataList">
               {Object.entries(apiProduct.apiProductMetadata)
                 .filter(filterMetadataToDisplay)

diff --git a/...rc/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryListCard.tsx b/...rc/Components/Apis/gloo-gateway-components/ApisTab/ApiSummaryCards/ApiSummaryListCard.tsx
@@ -25,7 +25,7 @@ export function ApiSummaryListCard({
       <ListCardStyles.ListCardWithLink>
         <Flex>
           <ListCardStyles.ApiImageHolder>
-            <img src={bgImageURL} alt="API thumbnail" role="banner" />
+            <img src={bgImageURL} alt="API thumbnail" />
           </ListCardStyles.ApiImageHolder>
 
           <Box p={"30px"}>

diff --git a/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisFilter.tsx b/projects/ui/src/Components/Apis/gloo-gateway-components/ApisTab/ApisFilter.tsx
@@ -94,7 +94,7 @@ export function ApisFilter({ filters }: { filters: FiltrationProp }) {
   return (
     <Styles.FilterArea>
       <div className="choicesArea">
-        <h3 className="title">Filters</h3>
+        <div className="title">Filters</div>
         <form
           onSubmit={(e) => {
             e.preventDefault();

diff --git a/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApiSummaryGridCard.tsx b/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApiSummaryGridCard.tsx
@@ -13,7 +13,7 @@ export function ApiSummaryGridCard({ api }: { api: API }) {
     <NavLink to={`/apis/${api.apiId}`} className="apiGridCard">
       <div className="content">
         <div className="apiImageHolder">
-          <img src={bgImageURL} alt="API thumbnail" role="banner" />
+          <img src={bgImageURL} alt="API thumbnail" />
         </div>
         <div className="details">
           <div>

diff --git a/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApiSummaryListCard.tsx b/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApiSummaryListCard.tsx
@@ -15,7 +15,7 @@ export function ApiSummaryListCard({ api }: { api: API }) {
       <div className="apiListCard">
         <div className="content">
           <ListCardStyles.ApiImageHolder>
-            <img src={bgImageURL} alt="API thumbnail" role="banner" />
+            <img src={bgImageURL} alt="API thumbnail" />
           </ListCardStyles.ApiImageHolder>
 
           <div className="details">

diff --git a/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApisFilter.tsx b/projects/ui/src/Components/Apis/gloo-mesh-gateway-components/ApisFilter.tsx
@@ -216,7 +216,7 @@ export function ApisFilter({ filters }: { filters: ApisFiltrationProp }) {
   return (
     <div className="filterArea">
       <div className="choicesArea">
-        <h3 className="title">Filters</h3>
+        <div className="title">Filters</div>
         <form
           onSubmit={(e) => {
             e.preventDefault();

diff --git a/projects/ui/src/Components/Apps/PageContent/AppSummaryCards/AppSummaryGridCard.tsx b/projects/ui/src/Components/Apps/PageContent/AppSummaryCards/AppSummaryGridCard.tsx
@@ -27,7 +27,7 @@ export function AppSummaryGridCard({ app }: { app: AppWithTeam }) {
   return (
     <GridCardStyles.GridCardWithLink to={getAppDetailsLink(app)}>
       <GridCardStyles.ApiImageHolder>
-        <img src={defaultCardImage} alt="placeholder" role="banner" />
+        <img src={defaultCardImage} alt="placeholder" />
       </GridCardStyles.ApiImageHolder>
       <Box px={"20px"}>
         <CardStyles.TitleLarge>{app.name}</CardStyles.TitleLarge>

diff --git a/projects/ui/src/Components/Apps/PageContent/AppsFilter.tsx b/projects/ui/src/Components/Apps/PageContent/AppsFilter.tsx
@@ -69,7 +69,7 @@ export function AppsFilter({
   return (
     <Styles.FilterArea>
       <div className="choicesArea">
-        <h3 className="title">Filters</h3>
+        <div className="title">Filters</div>
         <form
           onSubmit={(e) => {
             e.preventDefault();

diff --git a/projects/ui/src/Components/Common/Banner/BannerHeading.style.tsx b/projects/ui/src/Components/Common/Banner/BannerHeading.style.tsx
@@ -118,9 +118,9 @@ export namespace BannerStyles {
       z-index: 0;
 
       img {
-        min-height: 100%;
-        min-width: 100%;
-        background-size: contain;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
     `
   );

diff --git a/projects/ui/src/Components/Common/Banner/BannerHeading.tsx b/projects/ui/src/Components/Common/Banner/BannerHeading.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@mantine/core";
 import { useContext } from "react";
-import Banner from "../../../Assets/banner.png";
+import Banner from "../../../Assets/banner@2x.webp";
 import { AppContext } from "../../../Context/AppContext";
 import Breadcrumbs from "../Breadcrumbs";
 import { BannerStyles as Styles } from "./BannerHeading.style";
@@ -45,11 +45,7 @@ export function BannerHeading({
         </Styles.BannerContent>
 
         <Styles.BannerImageContainer pageContentIsWide={pageContentIsWide}>
-          <img
-            src={!!bgImageURL ? bgImageURL : Banner}
-            alt="background"
-            role="banner"
-          />
+          <img src={!!bgImageURL ? bgImageURL : Banner} alt="background" />
         </Styles.BannerImageContainer>
       </Styles.BannerHeadingContentContainer>
     </>

diff --git a/projects/ui/src/Components/Home/HomePage.style.tsx b/projects/ui/src/Components/Home/HomePage.style.tsx
@@ -14,15 +14,15 @@ export namespace HomePageStyles {
       border: 1px solid ${theme.aprilGrey};
       background: ${theme.lightGreyTransparent};
       color: ${theme.novemberGrey};
-
-      h3 {
-        font-size: 34px;
-        text-align: center;
-        margin-bottom: 20px;
-      }
     `
   );
 
+  export const ApiCategoriesTitle = styled.div`
+    font-size: 34px;
+    text-align: center;
+    margin-bottom: 20px;
+  `;
+
   export const CategoriesList = styled.div`
     display: flex;
     flex-wrap: wrap;
@@ -87,10 +87,9 @@ export namespace HomePageStyles {
       // This is a best-guess background fit attempt for user-supplied images.
       height: 100%;
       ${mediaQueryWithScreenSize.mediumAndSmaller} {
-        height: unset;
         width: 100%;
       }
-      background-size: cover;
+      object-fit: cover;
     }
   `;
 

diff --git a/projects/ui/src/Components/Home/HomePage.tsx b/projects/ui/src/Components/Home/HomePage.tsx
@@ -12,9 +12,9 @@ import { HomePageCategoryCard } from "./HomePageCategoryCard";
 
 /* TODO: Clean this up. Is there a better way to display this? Should 
     these images be coming from the backend */
-import CardImage1 from "../../Assets/card-option-1.png";
-import CardImage2 from "../../Assets/card-option-2.png";
-import CardImage3 from "../../Assets/card-option-3.png";
+import CardImage1 from "../../Assets/card-option-1@2x.webp";
+import CardImage2 from "../../Assets/card-option-2@2x.webp";
+import CardImage3 from "../../Assets/card-option-3@2x.webp";
 
 export function HomePage() {
   const { isAdmin } = useContext(AuthContext);
@@ -40,7 +40,9 @@ export function HomePage() {
 
       <HomePageStyles.HomePageCategories role="region">
         <Box p={"10px"}>
-          <h3>API Categories</h3>
+          <HomePageStyles.ApiCategoriesTitle>
+            API Categories
+          </HomePageStyles.ApiCategoriesTitle>
         </Box>
         <HomePageStyles.CategoriesList>
           <HomePageCategoryCard

diff --git a/projects/ui/src/Components/Home/HomePageCategoryCard.tsx b/projects/ui/src/Components/Home/HomePageCategoryCard.tsx
@@ -14,7 +14,7 @@ export function HomePageCategoryCard({
   return (
     <HomePageStyles.CategoriesCard>
       <HomePageStyles.CategoryImageHolder>
-        <img src={imageSrc} alt={imageAlt} role="banner" />
+        <img src={imageSrc} alt={imageAlt} />
       </HomePageStyles.CategoryImageHolder>
       <HomePageStyles.CategoryName>{categoryName}</HomePageStyles.CategoryName>
       <HomePageStyles.CategoryDescription>

diff --git a/projects/ui/src/Components/Structure/Header.tsx b/projects/ui/src/Components/Structure/Header.tsx
@@ -63,7 +63,7 @@ export function Header() {
     <HeaderStyles.StyledTopNavHeader aria-label="Site top level menus">
       <HeaderStyles.StyledTopNavContent pageContentIsWide={pageContentIsWide}>
         <div className="logoContainer">
-          <Link to="/" aria-hidden="true">
+          <Link aria-label="Home" to="/">
             {!!logoImageURL ? (
               <HeaderStyles.StyledLogoImg src={logoImageURL} alt="logo" />
             ) : (

diff --git a/projects/ui/vite.config.ts b/projects/ui/vite.config.ts
@@ -14,4 +14,9 @@ export default defineConfig({
     eslint(),
     svgr(),
   ],
+  build: {
+    // This can be enabled for Google Lighthouse testing, but should be set
+    // to false for actual builds since it adds a lot to the build size.
+    sourcemap: false,
+  },
 });
diff --git a/projects/ui/yarn.lock b/projects/ui/yarn.lock
@@ -3239,7 +3239,7 @@
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
   integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.9":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -3584,11 +3584,6 @@ acorn@^8.11.3, acorn@^8.9.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
 
-ajv-keywords@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
-  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -3857,16 +3852,6 @@ babel-core@^7.0.0-bridge.0:
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
-babel-loader@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
-  integrity sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==
-  dependencies:
-    find-cache-dir "^3.3.1"
-    loader-utils "^2.0.0"
-    make-dir "^3.1.0"
-    schema-utils "^2.6.5"
-
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
@@ -3953,11 +3938,6 @@ base64-js@^1.3.1, base64-js@^1.5.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
 binary-extensions@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
@@ -4775,11 +4755,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -5523,7 +5498,7 @@ find-cache-dir@^2.0.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.0.0, find-cache-dir@^3.3.1:
+find-cache-dir@^3.0.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
   integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
@@ -6553,7 +6528,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.2, json5@^2.2.3:
+json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -6669,15 +6644,6 @@ [email protected]:
     rfdc "^1.3.0"
     wrap-ansi "^8.1.0"
 
-loader-utils@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
-  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -6812,7 +6778,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.2, make-dir@^3.1.0:
+make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -7450,9 +7416,9 @@ mobx-react@^7.2.0:
     mobx-react-lite "^3.4.0"
 
 mobx@^6.8.0:
-  version "6.12.3"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.12.3.tgz#b6a0fde4268116be602d50bffb32f1b90a8fb077"
-  integrity sha512-c8NKkO4R2lShkSXZ2Ongj1ycjugjzFFo/UswHBnS62y07DMcTc9Rvo03/3nRyszIvwPNljlkd4S828zIBv/piw==
+  version "6.13.1"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.13.1.tgz#76c41aa675199f75b84a257e4bec8ff839e33259"
+  integrity sha512-ekLRxgjWJr8hVxj9ZKuClPwM/iHckx3euIJ3Np7zLVNtqJvfbbq7l370W/98C8EabdQ1pB5Jd3BbDWxJPNnaOg==
 
 [email protected]:
   version "2.0.0"
@@ -8882,15 +8848,6 @@ scheduler@^0.23.2:
   dependencies:
     loose-envify "^1.1.0"
 
-schema-utils@^2.6.5:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
-  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
-  dependencies:
-    "@types/json-schema" "^7.0.5"
-    ajv "^6.12.4"
-    ajv-keywords "^3.5.2"
-
 semver@^5.6.0:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"