From 37fa6551b0e0674775c083eb8e8c39a58ac4d9a6 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 20 Mar 2023 17:41:46 -0700 Subject: [PATCH] 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 --- frontend/next.config.js | 1 + frontend/package.json | 4 ++-- .../components/CategoryChip/CategoryChip.tsx | 1 + .../CollectionPage/CollectionLinks.tsx | 8 ++++--- .../CollectionPage/CollectionPluginList.tsx | 4 ++-- frontend/src/components/Footer/Footer.tsx | 6 +++++- .../Footer/__snapshots__/Footer.test.tsx.snap | 1 + .../Layout/__snapshots__/Layout.test.tsx.snap | 5 +++-- .../components/MetadataList/MetadataList.tsx | 4 ++-- .../src/components/Pagination/Pagination.tsx | 1 + .../__snapshots__/Pagination.test.tsx.snap | 2 ++ .../components/PluginPage/MetadataList.tsx | 4 ++-- .../src/components/PluginPage/PluginTabs.tsx | 4 ++-- .../src/components/PluginPage/SupportInfo.tsx | 21 ++++++++++++++----- .../SearchPage/PluginComplexFilter.tsx | 4 ++-- .../SearchPage/PluginSearchResult.tsx | 10 ++++----- .../SearchPage/PluginSearchResultList.tsx | 4 ++-- .../PluginComplexFilter.test.tsx.snap | 2 -- .../src/components/SignupForm/SignupForm.tsx | 4 ++-- .../__snapshots__/SignupForm.test.tsx.snap | 4 ++-- 20 files changed, 58 insertions(+), 36 deletions(-) diff --git a/frontend/next.config.js b/frontend/next.config.js index 3609005f3..8f68cd85e 100644 --- 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 index 4f86ac709..fedf82efe 100644 --- 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 index 6bee10e48..12f98a2be 100644 --- 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 ?? ''}`} > diff --git a/frontend/src/components/CollectionPage/CollectionLinks.tsx b/frontend/src/components/CollectionPage/CollectionLinks.tsx index 66970b8a3..4241c3e50 100644 --- 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] { const { t } = useTranslation(['collections']); switch (key) { @@ -66,7 +68,7 @@ function CollectionLink({ linkKey }: CollectionLinkProps) { disableInteractive leaveDelay={0} > - + @@ -83,7 +85,7 @@ export function CollectionLinks() { return (
{filteredLinks.map((key) => ( - + ))}
); diff --git a/frontend/src/components/CollectionPage/CollectionPluginList.tsx b/frontend/src/components/CollectionPage/CollectionPluginList.tsx index 4bbb811a4..fce25e779 100644 --- 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}`} > -

{plugin.display_name || plugin.name} -

+ - + should match snapshot 1`] = ` class="border-r-[1px] border-black" /> should match snapshot 1`] = `
-

Sign up to receive updates -

+
should match snapshot 1`] = ` class="border-r-[1px] border-black" /> {/* List title */} -

{label}: -

+

{/* List values */}
    {type === 'left' ? : } diff --git a/frontend/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/frontend/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap index 792ed7352..d58b456ac 100644 --- 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[` should match snapshot 1`] = ` class="flex items-center justify-center select-none" >
!link.value); @@ -256,7 +257,11 @@ function Links({ children, links }: LinksProps) { } > - + {hasEmptyLinks ? cloneElement(children, { color: '#999999', @@ -271,7 +276,7 @@ function CodeLinks() { const metadata = usePluginMetadata(); return ( - + ); @@ -281,7 +286,10 @@ function WebsiteLinks() { const metadata = usePluginMetadata(); return ( - + ); @@ -291,7 +299,10 @@ function SupportLinks() { const metadata = usePluginMetadata(); return ( - + ); diff --git a/frontend/src/components/SearchPage/PluginComplexFilter.tsx b/frontend/src/components/SearchPage/PluginComplexFilter.tsx index 1c3243ef8..45b96c6ba 100644 --- 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 (