Lighthouse score improvements (#934)

* Fix npm start scripts * Enable prod source maps * Fix sdsStage prop being passed to DOM element * Fix list error * Add aria-label to buttons / links * Fix heading order * Update snapshots
chanzuckerberg · Mar 21, 2023 · 37fa655 · 37fa655
1 parent 659d91b
commit 37fa655
Show file tree

Hide file tree

Showing 20 changed files with 58 additions and 36 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -49,6 +49,7 @@ module.exports = {
   ...previewOptions,
   i18n: isPreview ? undefined : i18n,
 
+  productionBrowserSourceMaps: true,
   basePath: process.env.BASE_PATH || '',
   pageExtensions: ['ts', 'tsx'],
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -55,8 +55,8 @@
     "preview:dev:build": "PREVIEW=src/fixtures/plugin.json PREVIEW_PULL_REQUEST=https://github.com/chanzuckerberg/napari-demo/pull/5 yarn preview:build",
     "// Runs frontend in production. Requires running `yarn build` first.": "",
     "start": "next start -p 8080",
-    "start:prod": "API_URL='https://api.napari-hub.org' yarn dev",
-    "start:staging": "API_URL='https://api.staging.napari-hub.org' yarn dev",
+    "start:prod": "API_URL='https://api.napari-hub.org' yarn start",
+    "start:staging": "API_URL='https://api.staging.napari-hub.org' yarn start",
     "// Runs unit / integration tests": "",
     "test": "jest -c jest/test.config.js",
     "// Runs unit / integration tests in watch mode": "",

diff --git a/frontend/src/components/CategoryChip/CategoryChip.tsx b/frontend/src/components/CategoryChip/CategoryChip.tsx
@@ -118,6 +118,7 @@ function BaseCategoryChip(
           setOpen(true);
         }}
         type="button"
+        aria-label={`info-${category ?? ''}`}
       >
         <InfoOutlinedIcon className="w-3 h-3" />
       </button>

diff --git a/frontend/src/components/CollectionPage/CollectionLinks.tsx b/frontend/src/components/CollectionPage/CollectionLinks.tsx
@@ -1,15 +1,17 @@
 import clsx from 'clsx';
 import { useTranslation } from 'next-i18next';
+import { ComponentType } from 'react';
 import { GitHub, OrcID, Twitter, Website } from 'src/components/icons';
 import { Link } from 'src/components/Link';
 import { Tooltip } from 'src/components/Tooltip';
 import { CollectionLinks as CollectionLinksType } from 'src/types/collections';
 
+import { IconColorProps } from '../icons/icons.type';
 import { useCollection } from './context';
 
 type LinkKey = keyof CollectionLinksType;
 
-function useLinkData(key: LinkKey) {
+function useLinkData(key: LinkKey): [string, ComponentType<IconColorProps>] {
   const { t } = useTranslation(['collections']);
 
   switch (key) {
@@ -66,7 +68,7 @@ function CollectionLink({ linkKey }: CollectionLinkProps) {
       disableInteractive
       leaveDelay={0}
     >
-      <Link href={link}>
+      <Link aria-label={tooltip} href={link}>
         <Icon className="w-5 h-5" />
       </Link>
     </Tooltip>
@@ -83,7 +85,7 @@ export function CollectionLinks() {
   return (
     <div className="flex space-x-sds-xl mt-sds-xl">
       {filteredLinks.map((key) => (
-        <CollectionLink linkKey={key} />
+        <CollectionLink key={key} linkKey={key} />
       ))}
     </div>
   );

diff --git a/frontend/src/components/CollectionPage/CollectionPluginList.tsx b/frontend/src/components/CollectionPage/CollectionPluginList.tsx
@@ -36,7 +36,7 @@ export function CollectionPluginList() {
               )}
               href={`/plugins/${plugin.name}`}
             >
-              <h3
+              <h2
                 className={clsx(
                   'leading-[161%] screen-495:leading-[132%] ',
                   'font-semibold text-[14px] screen-495:text-[17px]',
@@ -45,7 +45,7 @@ export function CollectionPluginList() {
                 )}
               >
                 {plugin.display_name || plugin.name}
-              </h3>
+              </h2>
               <span
                 className={clsx(
                   'text-[9px] screen-495:text-[11px]',

diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
@@ -125,7 +125,11 @@ export function Footer() {
 
         <div className="border-r-[1px] border-black" />
 
-        <Link href="https://chanzuckerberg.com" className="ml-sds-xxs">
+        <Link
+          href="https://chanzuckerberg.com"
+          className="ml-sds-xxs"
+          aria-label="czi-link"
+        >
           <CZI
             className="w-[3.3125rem] h-[1.625rem] screen-495:w-[4.625rem] screen-495:h-[2.375rem]"
             variant="large"

diff --git a/frontend/src/components/Footer/__snapshots__/Footer.test.tsx.snap b/frontend/src/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -200,6 +200,7 @@ exports[`<Footer /> should match snapshot 1`] = `
         class="border-r-[1px] border-black"
       />
       <a
+        aria-label="czi-link"
         class="ml-sds-xxs"
         href="https://chanzuckerberg.com"
         rel="noreferrer"

diff --git a/frontend/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/frontend/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -155,11 +155,11 @@ exports[`<Layout /> should match snapshot 1`] = `
       <div
         class="col-span-2 screen-495:col-span-3 screen-1425:col-start-2"
       >
-        <h3
+        <h2
           class="text-lg font-semibold mb-sds-xxs screen-495:mb-sds-l"
         >
           Sign up to receive updates
-        </h3>
+        </h2>
         <form
           class="grid grid-cols-2 screen-875:grid-cols-napari-3 screen-495:gap-x-12 gap-y-sds-l"
           novalidate=""
@@ -397,6 +397,7 @@ exports[`<Layout /> should match snapshot 1`] = `
           class="border-r-[1px] border-black"
         />
         <a
+          aria-label="czi-link"
           class="ml-sds-xxs"
           href="https://chanzuckerberg.com"
           rel="noreferrer"

diff --git a/frontend/src/components/MetadataList/MetadataList.tsx b/frontend/src/components/MetadataList/MetadataList.tsx
@@ -58,7 +58,7 @@ export function MetadataList({
           tooltip={null}
         >
           {/* List title */}
-          <h4
+          <p
             className={clsx(
               // Font
               'font-bold whitespace-nowrap',
@@ -68,7 +68,7 @@ export function MetadataList({
             )}
           >
             {label}:
-          </h4>
+          </p>
 
           {/* List values */}
           <ul

diff --git a/frontend/src/components/Pagination/Pagination.tsx b/frontend/src/components/Pagination/Pagination.tsx
@@ -52,6 +52,7 @@ export function Pagination({
         disabled={isDisabled}
         onClick={type === 'left' ? onPrevPage : onNextPage}
         type="button"
+        aria-label={`pagination-${type}`}
       >
         {type === 'left' ? <ChevronLeft /> : <ChevronRight />}
       </button>

diff --git a/frontend/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/frontend/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<Pagination /> should match snapshot 1`] = `
     class="flex items-center justify-center select-none"
   >
     <button
+      aria-label="pagination-left"
       class="pageButton focus-visible:bg-hub-gray-100 hover:bg-hub-gray-100 opacity-0 cursor-default mr-sds-s"
       data-testid="paginationLeft"
       disabled=""
@@ -46,6 +47,7 @@ exports[`<Pagination /> should match snapshot 1`] = `
       </span>
     </span>
     <button
+      aria-label="pagination-right"
       class="pageButton focus-visible:bg-hub-gray-100 hover:bg-hub-gray-100 ml-sds-xxs"
       data-testid="paginationRight"
       type="button"

diff --git a/frontend/src/components/PluginPage/MetadataList.tsx b/frontend/src/components/PluginPage/MetadataList.tsx
@@ -41,7 +41,7 @@ function MetadataListItem({ inline, title, values }: MetadataListItemProps) {
 
   return (
     <li className="mb-sds-l text-sm">
-      <h4
+      <p
         className={clsx(
           // Inline styles
           inline ? 'inline mr-sds-s' : 'block mb-sds-s',
@@ -54,7 +54,7 @@ function MetadataListItem({ inline, title, values }: MetadataListItemProps) {
         )}
       >
         {title}:
-      </h4>
+      </p>
 
       <ul
         className={clsx(

diff --git a/frontend/src/components/PluginPage/PluginTabs.tsx b/frontend/src/components/PluginPage/PluginTabs.tsx
@@ -91,7 +91,7 @@ export function PluginTabs({ containerRef }: Props) {
     tabContent = (
       <>
         {/* Plugin categories */}
-        <ul
+        <div
           className={clsx(
             'flex flex-col text-xs mt-sds-xl',
             'mb-sds-l screen-495:mb-sds-xl',
@@ -118,7 +118,7 @@ export function PluginTabs({ containerRef }: Props) {
                 ))
             }
           />
-        </ul>
+        </div>
 
         <SkeletonLoader
           className="h-[600px] mb-sds-xxl"

diff --git a/frontend/src/components/PluginPage/SupportInfo.tsx b/frontend/src/components/PluginPage/SupportInfo.tsx
@@ -209,11 +209,12 @@ interface LinkData {
 }
 
 interface LinksProps {
+  ariaLabel: string;
   links: LinkData[];
   children: ReactElement;
 }
 
-function Links({ children, links }: LinksProps) {
+function Links({ ariaLabel, children, links }: LinksProps) {
   const [open, setOpen] = useState(false);
   const hasEmptyLinks = links.every((link) => !link.value);
 
@@ -256,7 +257,11 @@ function Links({ children, links }: LinksProps) {
         </div>
       }
     >
-      <ButtonIcon onClick={openTooltip} disabled={hasEmptyLinks}>
+      <ButtonIcon
+        onClick={openTooltip}
+        disabled={hasEmptyLinks}
+        aria-label={ariaLabel}
+      >
         {hasEmptyLinks
           ? cloneElement<IconColorProps>(children, {
               color: '#999999',
@@ -271,7 +276,7 @@ function CodeLinks() {
   const metadata = usePluginMetadata();
 
   return (
-    <Links links={[metadata.sourceCode]}>
+    <Links ariaLabel="plugin-code-links" links={[metadata.sourceCode]}>
       <Code />
     </Links>
   );
@@ -281,7 +286,10 @@ function WebsiteLinks() {
   const metadata = usePluginMetadata();
 
   return (
-    <Links links={[metadata.projectSite, metadata.documentationSite]}>
+    <Links
+      ariaLabel="plugin-website-links"
+      links={[metadata.projectSite, metadata.documentationSite]}
+    >
       <Website />
     </Links>
   );
@@ -291,7 +299,10 @@ function SupportLinks() {
   const metadata = usePluginMetadata();
 
   return (
-    <Links links={[metadata.supportSite, metadata.reportIssues]}>
+    <Links
+      ariaLabel="plugin-support-links"
+      links={[metadata.supportSite, metadata.reportIssues]}
+    >
       <ProjectSupport className="ml-2" />
     </Links>
   );

diff --git a/frontend/src/components/SearchPage/PluginComplexFilter.tsx b/frontend/src/components/SearchPage/PluginComplexFilter.tsx
@@ -96,13 +96,13 @@ const StyledPopper = styled(Popper)`
 `;
 
 function InputDropdown(props: InputDropdownProps) {
-  const { label, sdsStage } = props;
+  const { label, sdsStage, ...rest } = props;
   const iconSizeClassName = 'w-4 h-4';
 
   return (
     <div className="border-b border-black">
       <Button
-        {...props}
+        {...rest}
         className="text-black w-full flex justify-between p-0 pb-2"
       >
         <span className="font-semibold text-sm">{label}</span>

diff --git a/frontend/src/components/SearchPage/PluginSearchResult.tsx b/frontend/src/components/SearchPage/PluginSearchResult.tsx
@@ -228,7 +228,7 @@ export function PluginSearchResult({
           {/* Wrapper div to group plugin name and summary  */}
           <div>
             {/* Plugin name */}
-            <h4
+            <h3
               className="font-bold text-lg"
               data-testid="searchResultDisplayName"
             >
@@ -244,7 +244,7 @@ export function PluginSearchResult({
                   )
                 }
               />
-            </h4>
+            </h3>
 
             {isNpe2Enabled && (
               <span
@@ -319,7 +319,7 @@ export function PluginSearchResult({
                   key={`${item.label}-${item.value}`}
                   className="grid grid-cols-[auto,1fr]"
                 >
-                  <h5 className="inline whitespace-nowrap">{item.label}</h5>
+                  <h4 className="inline whitespace-nowrap">{item.label}</h4>
                   <span
                     className={clsx(
                       'ml-sds-xxs',
@@ -335,7 +335,7 @@ export function PluginSearchResult({
         </ul>
 
         {/* Plugin categories */}
-        <ul
+        <div
           className={clsx(
             'mt-sds-xl text-xs',
             'flex flex-col gap-sds-s',
@@ -362,7 +362,7 @@ export function PluginSearchResult({
                 ))
             }
           />
-        </ul>
+        </div>
       </article>
     );
   }

diff --git a/frontend/src/components/SearchPage/PluginSearchResultList.tsx b/frontend/src/components/SearchPage/PluginSearchResultList.tsx
@@ -78,12 +78,12 @@ function SearchResultItems() {
 export function PluginSearchResultList() {
   return (
     <section className="col-span-2 screen-1425:col-span-3 space-y-sds-xl ">
-      <h3 className={clsx('flex items-center font-bold text-xl')}>
+      <h2 className={clsx('flex items-center font-bold text-xl')}>
         <I18n
           i18nKey="homePage:browsePlugins"
           components={{ count: <SearchResultCount /> }}
         />
-      </h3>
+      </h2>
 
       <ColumnLayout
         classes={{

diff --git a/frontend/src/components/SearchPage/__snapshots__/PluginComplexFilter.test.tsx.snap b/frontend/src/components/SearchPage/__snapshots__/PluginComplexFilter.test.tsx.snap
@@ -15,8 +15,6 @@ exports[`<PluginComplexFilter /> should match snapshot 1`] = `
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium text-black w-full flex justify-between p-0 pb-2 css-1kjmhix-MuiButtonBase-root-MuiButton-root"
           data-testid="button"
-          label="pluginData:labels.operatingSystem"
-          sdsstage="default"
           tabindex="0"
           type="button"
         >

diff --git a/frontend/src/components/SignupForm/SignupForm.tsx b/frontend/src/components/SignupForm/SignupForm.tsx
@@ -118,9 +118,9 @@ export function SignupForm({ onSubmit, variant = 'default' }: Props) {
       <div id={FORM_CONTAINER_ID} className="hidden" />
 
       <div className="col-span-2 screen-495:col-span-3 screen-1425:col-start-2">
-        <h3 className="text-lg font-semibold mb-sds-xxs screen-495:mb-sds-l">
+        <h2 className="text-lg font-semibold mb-sds-xxs screen-495:mb-sds-l">
           {t('footer:signUp.title')}
-        </h3>
+        </h2>
 
         {isSubmitted ? (
           <p>{t('footer:signUp.success')}</p>

diff --git a/frontend/src/components/SignupForm/__snapshots__/SignupForm.test.tsx.snap b/frontend/src/components/SignupForm/__snapshots__/SignupForm.test.tsx.snap
@@ -12,11 +12,11 @@ exports[`<SignupForm /> should match snapshot 1`] = `
     <div
       class="col-span-2 screen-495:col-span-3 screen-1425:col-start-2"
     >
-      <h3
+      <h2
         class="text-lg font-semibold mb-sds-xxs screen-495:mb-sds-l"
       >
         Sign up to receive updates
-      </h3>
+      </h2>
       <form
         class="grid grid-cols-2 screen-875:grid-cols-napari-3 screen-495:gap-x-12 gap-y-sds-l"
         novalidate=""