Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lighthouse score improvements #934

Merged
merged 7 commits into from
Mar 21, 2023
Merged

Lighthouse score improvements #934

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
33ba1ba
Fix npm start scripts
codemonkey800 Mar 8, 2023
b08836b
Enable prod source maps
codemonkey800 Mar 8, 2023
73cb567
Fix sdsStage prop being passed to DOM element
codemonkey800 Mar 8, 2023
2bebb16
Fix list error
codemonkey800 Mar 8, 2023
34a7f38
Add aria-label to buttons / links
codemonkey800 Mar 8, 2023
cefe3ba
Fix heading order
codemonkey800 Mar 8, 2023
c3b7d12
Update snapshots
codemonkey800 Mar 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ module.exports = {
...previewOptions,
i18n: isPreview ? undefined : i18n,

productionBrowserSourceMaps: true,
basePath: process.env.BASE_PATH || '',
pageExtensions: ['ts', 'tsx'],

Expand Down
4 changes: 2 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/CategoryChip/CategoryChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ function BaseCategoryChip(
setOpen(true);
}}
type="button"
aria-label={`info-${category ?? ''}`}
>
<InfoOutlinedIcon className="w-3 h-3" />
</button>
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/components/CollectionPage/CollectionLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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>
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/CollectionPage/CollectionPluginList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]',
Expand All @@ -45,7 +45,7 @@ export function CollectionPluginList() {
)}
>
{plugin.display_name || plugin.name}
</h3>
</h2>
<span
className={clsx(
'text-[9px] screen-495:text-[11px]',
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/Footer/__snapshots__/Footer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/Layout/__snapshots__/Layout.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/MetadataList/MetadataList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function MetadataList({
tooltip={null}
>
{/* List title */}
<h4
<p
className={clsx(
// Font
'font-bold whitespace-nowrap',
Expand All @@ -68,7 +68,7 @@ export function MetadataList({
)}
>
{label}:
</h4>
</p>

{/* List values */}
<ul
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/PluginPage/MetadataList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -54,7 +54,7 @@ function MetadataListItem({ inline, title, values }: MetadataListItemProps) {
)}
>
{title}:
</h4>
</p>

<ul
className={clsx(
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/PluginPage/PluginTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -118,7 +118,7 @@ export function PluginTabs({ containerRef }: Props) {
))
}
/>
</ul>
</div>

<SkeletonLoader
className="h-[600px] mb-sds-xxl"
Expand Down
21 changes: 16 additions & 5 deletions frontend/src/components/PluginPage/SupportInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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',
Expand All @@ -271,7 +276,7 @@ function CodeLinks() {
const metadata = usePluginMetadata();

return (
<Links links={[metadata.sourceCode]}>
<Links ariaLabel="plugin-code-links" links={[metadata.sourceCode]}>
<Code />
</Links>
);
Expand All @@ -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>
);
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/SearchPage/PluginComplexFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/SearchPage/PluginSearchResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -244,7 +244,7 @@ export function PluginSearchResult({
)
}
/>
</h4>
</h3>

{isNpe2Enabled && (
<span
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -362,7 +362,7 @@ export function PluginSearchResult({
))
}
/>
</ul>
</div>
</article>
);
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/SearchPage/PluginSearchResultList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/components/SearchPage/__snapshots__/PluginComplexFilter.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did we remove this part?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we've been getting errors on the home page saying that we can't pass the sdsStage prop to native DOM elements, so this is fixed in this commit: 73cb567

As a result, some other props aren't being passed like label, but that's fine because we don't want to pass those props to the <button> element anyway

sdsstage="default"
tabindex="0"
type="button"
>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/SignupForm/SignupForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/SignupForm/__snapshots__/SignupForm.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down