Attempt to merge Lighthouse Fix branch from Nat (#758)

* Add a11y tests in cypress for methodology page

- update cypress to version 8.5
- add HTML lang the <head> element
- change process list headings to h4
- add alt tag to download image icon
- move <GovBanner> into <Header>
- add documentation around a11y testing

* Add cypress a11y tests for cejst page

- add alt icon for mapIntro page
- change legend to be a normal div
- add a class that mimics the h4 styles
- remove superfluous styles

* Add cypress a11y tests for contact and 404 page

* Update snapshots

* Move static text in footer to copy folder

* Add cypress a11y test to About page

- add required h1 tag
- updates snapshot

* Add site_url.xml and modify robots.txt file

- adds plugins for robots.txt and sitemap
- remove env.local and will add env.production
- modifiy all yml files (docker and GHA) to specify new env variables
- refactor env variables to either DATA_SOURCE, SITE_URL or PATH_PREFIX
- set defaults for env variables in gatsby-config
- remove timeline component
- will add blank index page
- update README on info on env variables

* Add plugin to allow custom env vars

- allows system env vars, ie, DATA_SOURCE on client-side application

* Update displayed URLs in GHA to new CDN (d29)

- also updates the blank index.html

* Correct spacing

* Set SITE_URL to new CDN for robots.txt

* Remove SITE_URL as this is set by GHA

* Update README around docker and env vars
This commit is contained in:
Vim 2021-10-04 08:43:33 -07:00 committed by GitHub
commit 72d80a5803
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 999 additions and 748 deletions

View file

@ -29,7 +29,7 @@ const DownloadPacket = () => {
<div className={styles.downloadBoxButtonContainer}>
<a data-cy={'download-link'} href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
<Button className={styles.downloadBoxButton} type="button">
<div><img src={downloadIcon} /> </div>
<div><img src={downloadIcon} alt={'download icon for download package'}/> </div>
<div className={styles.downloadPacketText}>
{intl.formatMessage(METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT)}
</div>

View file

@ -16,7 +16,8 @@ const J40Footer = () => {
const intl = useIntl();
const NAVLINKS = [
['Contact',
[
intl.formatMessage(COMMON_COPY.FOOTER.CONTACT),
<Address
key={'footeraddress'}
className={'j40-footer-address'}
@ -70,9 +71,9 @@ const J40Footer = () => {
// `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
// `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
<footer className={'j40-footer'}>
<div className="usa-footer__primary-section pb">
<div className="usa-footer__primary-section pb2">
<J40MainGridContainer>
<div className={'grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4'}>
<div className={'grid-row tablet-lg:grid-col4'}>
{NAVLINKS.map((links, i) => (
<div key={`linkSection-${i}`}
className="mobile-lg:grid-col-12 desktop:grid-col-4">
@ -95,7 +96,11 @@ const J40Footer = () => {
src={whitehouseIcon}
alt={intl.formatMessage(COMMON_COPY.FOOTER.LOGO_ALT)}/>
}
heading={<h5>{intl.formatMessage(COMMON_COPY.FOOTER.TITLE)}</h5>}
heading={
<div className={'j40-footer-ceq-font'}>
{intl.formatMessage(COMMON_COPY.FOOTER.TITLE)}
</div>
}
/>
</J40MainGridContainer>
</div>
@ -110,9 +115,9 @@ const NavSection = ({
}): React.ReactElement => {
const [primaryLinkOrHeading, ...secondaryLinks] = links;
return (
<section className={'usa-footer__primary-content'}>
<h4 className="padding-top-1 padding-bottom-0">{primaryLinkOrHeading}</h4>
<NavList className={'padding-bottom-4'} type="footerSecondary" items={secondaryLinks} />
<section>
<div className="j40-h4">{primaryLinkOrHeading}</div>
<NavList type="footerSecondary" items={secondaryLinks} />
</section>
);
};

View file

@ -74,10 +74,10 @@ const J40Header = () => {
return (
<>
<GovBanner/>
<Header
basic={true} role={'banner'}
className={'usa-header j40-header'}>
<GovBanner/>
<div className="usa-nav-container">
<div className="usa-navbar">
{/* Removing h1 from logo ease transition to USWDS tokens in headers */}

View file

@ -10,9 +10,9 @@ const MapLegend = () => {
<div className={styles.legendContainer}>
<div className={styles.colorSwatch} />
<div>
<h4>
<div className={'j40-h4'}>
{intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_LABEL)}
</h4>
</div>
<p className={'secondary'}>
{intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_DESCRIPT)}
</p>

View file

@ -5,9 +5,11 @@ exports[`rendering of the MapLegend checks if snapshots have changed 1`] = `
<div>
<div />
<div>
<h4>
<div
class="j40-h4"
>
Draft community of focus
</h4>
</div>
<p
class="secondary"
>

View file

@ -6,28 +6,26 @@ exports[`J40Footer renders correctly 1`] = `
class="j40-footer"
>
<div
class="usa-footer__primary-section pb"
class="usa-footer__primary-section pb2"
>
<div
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div
class="grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4"
class="grid-row tablet-lg:grid-col4"
>
<div
class="mobile-lg:grid-col-12 desktop:grid-col-4"
>
<section
class="usa-footer__primary-content"
>
<h4
class="padding-top-1 padding-bottom-0"
<section>
<div
class="j40-h4"
>
Contact
</h4>
</div>
<ul
class="usa-list usa-list--unstyled padding-bottom-4"
class="usa-list usa-list--unstyled"
>
<li
class="usa-footer__secondary-link"
@ -67,16 +65,14 @@ exports[`J40Footer renders correctly 1`] = `
<div
class="mobile-lg:grid-col-12 desktop:grid-col-4"
>
<section
class="usa-footer__primary-content"
>
<h4
class="padding-top-1 padding-bottom-0"
<section>
<div
class="j40-h4"
>
More information
</h4>
</div>
<ul
class="usa-list usa-list--unstyled padding-bottom-4"
class="usa-list usa-list--unstyled"
>
<li
class="usa-footer__secondary-link"
@ -118,16 +114,14 @@ exports[`J40Footer renders correctly 1`] = `
<div
class="mobile-lg:grid-col-12 desktop:grid-col-4"
>
<section
class="usa-footer__primary-content"
>
<h4
class="padding-top-1 padding-bottom-0"
<section>
<div
class="j40-h4"
>
Have a question about government services?
</h4>
</div>
<ul
class="usa-list usa-list--unstyled padding-bottom-4"
class="usa-list usa-list--unstyled"
>
<li
class="usa-footer__secondary-link"
@ -168,9 +162,11 @@ exports[`J40Footer renders correctly 1`] = `
<div
class="mobile-lg:grid-col-auto"
>
<h5>
<div
class="j40-footer-ceq-font"
>
Council on Environmental Quality
</h5>
</div>
</div>
</div>
</div>

View file

@ -13,6 +13,7 @@ exports[`simulate app starting up, no click on map should match the snapshot of
</header>
<div>
<img
alt="icon showing a lightbulb"
src="test-file-stub"
/>
<div>

View file

@ -27,12 +27,12 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
<li
class="usa-process-list__item"
>
<h4
<h3
class="usa-process-list__heading"
data-testid="processListHeading"
>
Gather datasets
</h4>
</h3>
<p>
</p>
@ -78,12 +78,12 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
<li
class="usa-process-list__item"
>
<h4
<h3
class="usa-process-list__heading"
data-testid="processListHeading"
>
Determine communites of focus
</h4>
</h3>
<p>
</p>

View file

@ -14,7 +14,9 @@ const Layout = ({children, location, title}: ILayoutProps) => {
// @ts-ignore
return (
<>
<Helmet title={title} defer={false}>
<Helmet defer={false}>
<html lang="en"/>
<title>{title}</title>
<script async
type="text/javascript"
id="_fed_an_ua_tag"

View file

@ -15,7 +15,7 @@ const MapIntroduction = () => {
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.TITLE)}
</header>
<div className={styles.mapIntroText}>
<img className={styles.mapIntroLightbulb} src={lightbulbIcon} />
<img className={styles.mapIntroLightbulb} src={lightbulbIcon} alt={'icon showing a lightbulb'}/>
<div className={styles.didYouKnowBox}>
<div className={styles.didYouKnow}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.DID_YOU_KNOW)}

View file

@ -33,7 +33,7 @@ const ScoreStepsList = () => {
{/* Step 1 */}
<ProcessListItem>
<ProcessListHeading type="h4">
<ProcessListHeading type="h3">
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_HEADING)}
</ProcessListHeading>
<p>{' '}</p>
@ -70,7 +70,7 @@ const ScoreStepsList = () => {
{/* Step 2 */}
<ProcessListItem>
<ProcessListHeading type="h4">
<ProcessListHeading type="h3">
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_HEADING)}
</ProcessListHeading>