fix: increase lighthouse score

* add accessibility enhancements.
* generate translation json for new changes

lighthouserc.js

@@ -10,7 +10,13 @@ module.exports = {
       // },
     },
     assert: {
-      preset: "lighthouse:recommended",
+      assertions: {
+        'first-contentful-paint': ['error', { maxNumericValue: 2000 }],
+        'categories:performance': ['error', { minScore: 0.95 }],
+        'categories:accessibility': ['error', { minScore: 0.95 }],
+        'categories:best-practices': ['error', { minScore: 0.95 }],
+        'categories:seo': ['error', { minScore: 0.95 }]
+      }
     },
     upload: {
       target: "temporary-public-storage",

package.json

@@ -23,9 +23,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@lingui/react": "^4.6.0",
     "@lingui/macro": "^4.6.0",
-    "@mui/material": "^5.15.0",
+    "@lingui/react": "^4.6.0",
+    "@mui/material": "^5.15.15",
     "@mui/material-nextjs": "^5.15.0",
     "@next/bundle-analyzer": "^14.0.4",
     "@reduxjs/toolkit": "^2.0.1",

src/containers/Repos/index.tsx

@@ -1,5 +1,5 @@
 import { Container, CustomCard, If, T } from "@common";
-import { Box, Divider, Link, OutlinedInput, Pagination } from "@mui/material";
+import { Box, Divider, Link, OutlinedInput, Pagination, FormControl, InputLabel } from "@mui/material";
 import { ErrorState, RepoList } from "@features/repos/components";
 import { IRepoError } from "@features/repos/types";
 import React, { memo, useEffect, useState } from "react";
@@ -8,12 +8,20 @@ import { useFetchRecommendationQuery } from "@features/repos/api/getRecommendati
 import { useRouter } from "next/router";
 import { Trans } from "@lingui/macro";
 import { skipToken } from "@reduxjs/toolkit/query";
+import styled from "@emotion/styled";
 
 interface RepoContainerProps {
   padding?: number;
   maxwidth?: number;
 }
 
+const StyledSpan = styled.span`
+  color: darkblue;
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`;
 const Repos: React.FC<RepoContainerProps> = ({ maxwidth }) => {
   const router = useRouter();
   const [repoName, setRepoName] = useState<string>("react");
@@ -65,11 +73,13 @@ const Repos: React.FC<RepoContainerProps> = ({ maxwidth }) => {
         </T>
       </Box>
       <Box justifyContent="space-between">
-        <Link href="https://www.iamawesome.com/">
+        <StyledLink href="https://www.iamawesome.com/">
           <T>
-            <Trans>You Are Awesome</Trans>
+            <Trans>
+              <StyledSpan>You Are Awesome</StyledSpan>
+            </Trans>
           </T>
-        </Link>
+        </StyledLink>
       </Box>
       <Divider />
       <CustomCard maxwidth={maxwidth}>
@@ -79,12 +89,17 @@ const Repos: React.FC<RepoContainerProps> = ({ maxwidth }) => {
         <T marginBottom={1}>
           <Trans>Get details of repositories</Trans>
         </T>
-        <OutlinedInput
-          data-testid="search-bar"
-          type="search"
-          fullWidth
-          onChange={evt => handleRepoSearch(evt.target.value)}
-        />
+        <FormControl fullWidth>
+          <InputLabel htmlFor="repo-search">Search</InputLabel>
+          <OutlinedInput
+            id="repo-search"
+            data-testid="search-bar"
+            type="search"
+            fullWidth
+            onChange={evt => handleRepoSearch(evt.target.value)}
+            label="Search"
+          />
+        </FormControl>
       </CustomCard>
       <RepoList reposData={data} repoName={repoName} loading={isLoading && isFetching} />
       <If condition={data}>

src/features/repos/components/ErrorState/index.tsx

@@ -25,7 +25,7 @@ const ErrorState: React.FC<ErrorStateProps> = ({ reposData, reposError, loading
   }
 
   return !loading && repoError ? (
-    <CustomCard color={reposError ? "red" : "grey"} data-testid="error-state">
+    <CustomCard color={reposError ? "red" : "#323132"} data-testid="error-state">
       <T variant="subtitle2">
         <Trans>Repository List</Trans>
       </T>

src/translations/en.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/containers/Repos/index.tsx:78
+msgid "<0>You Are Awesome</0>"
+msgstr "<0>You Are Awesome</0>"
+
 #: src/features/info/components/RepoInfo/index.tsx:20
 msgid "Back to Search"
 msgstr "Back to Search"
@@ -21,15 +25,15 @@ msgstr "Back to Search"
 msgid "Forks: {forks}"
 msgstr "Forks: {forks}"
 
-#: src/containers/Repos/index.tsx:80
+#: src/containers/Repos/index.tsx:90
 msgid "Get details of repositories"
 msgstr "Get details of repositories"
 
 #: src/features/info/components/EmptyResult/index.tsx:8
 msgid "No records found"
 msgstr "No records found"
 
-#: src/containers/Repos/index.tsx:64
+#: src/containers/Repos/index.tsx:72
 msgid "Recommendation"
 msgstr "Recommendation"
 
@@ -45,7 +49,7 @@ msgstr "Repository List"
 msgid "Repository Name: {0}"
 msgstr "Repository Name: {0}"
 
-#: src/containers/Repos/index.tsx:77
+#: src/containers/Repos/index.tsx:87
 msgid "Repository Search"
 msgstr "Repository Search"
 
@@ -78,10 +82,6 @@ msgstr "Total number of matching repos: {totalCount}"
 msgid "Watchers: {watchers}"
 msgstr "Watchers: {watchers}"
 
-#: src/containers/Repos/index.tsx:70
-msgid "You Are Awesome"
-msgstr "You Are Awesome"
-
 #: src/pages/_offline.tsx:7
 msgid "You are Offline!"
 msgstr "You are Offline!"

src/translations/hi.po

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/containers/Repos/index.tsx:78
+msgid "<0>You Are Awesome</0>"
+msgstr "<0>आप अद्भुत हैं</0>"
+
 #: src/features/info/components/RepoInfo/index.tsx:20
 msgid "Back to Search"
 msgstr "खोज में वापस"
@@ -21,15 +25,15 @@ msgstr "खोज में वापस"
 msgid "Forks: {forks}"
 msgstr "फोर्क्स: {forks}"
 
-#: src/containers/Repos/index.tsx:80
+#: src/containers/Repos/index.tsx:90
 msgid "Get details of repositories"
 msgstr "रिपॉज़िटरी का विवरण प्राप्त करें"
 
 #: src/features/info/components/EmptyResult/index.tsx:8
 msgid "No records found"
 msgstr "कोई रिकॉर्ड नहीं मिला"
 
-#: src/containers/Repos/index.tsx:64
+#: src/containers/Repos/index.tsx:72
 msgid "Recommendation"
 msgstr "सिफारिश"
 
@@ -45,7 +49,7 @@ msgstr "रिपॉज़िटरी सूची"
 msgid "Repository Name: {0}"
 msgstr "रिपॉज़िटरी का नाम: {0}"
 
-#: src/containers/Repos/index.tsx:77
+#: src/containers/Repos/index.tsx:87
 msgid "Repository Search"
 msgstr "रिपॉज़िटरी खोज"
 
@@ -78,10 +82,6 @@ msgstr "मिलती रिपॉज़िटरी की कुल सं
 msgid "Watchers: {watchers}"
 msgstr "नजरदार: {watchers}"
 
-#: src/containers/Repos/index.tsx:70
-msgid "You Are Awesome"
-msgstr "आप अद्भुत हैं"
-
 #: src/pages/_offline.tsx:7
 msgid "You are Offline!"
 msgstr "आप ऑफ़लाइन हैं!"