publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make the accessibility checkers happy (#129)

Browse source 
* Make the accessibility checkers happy
* Include a lang specification in the `<html>` tag.
* reorder `<h#>` header tags.
The `<Aside` to from `<h1>`, `<h2>` to be `<h2>`, `<h3>`. This is because trusswork's `<Footer>` uses and `<h4>` and the accessibility checkers complain it was skipping from `<h2>` -> `<h4>`
* Change `<aria-details>` to `<aria-label>` for milestone list
* Update J40Header.tsx 80 column line
This commit is contained in:
TomNUSDS 2021-06-14 19:35:35 -07:00 • committed by GitHub
parent 760edb4feb
commit 9155326775
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/J40Aside.tsx
View file

@ -12,22 +12,22 @@ const J40Aside = () => {
aria-labelledby="right-sidebar" aria-labelledby="right-sidebar"
className={'j40-aside desktop:grid-col-3 usa-prose usa-section'} className={'j40-aside desktop:grid-col-3 usa-prose usa-section'}
id="right-sidebar"> id="right-sidebar">
<h1>Get Involved</h1> <h2>Get Involved</h2>
<h2><img <h3><img
className={'flex-align-self-center width-4 j40-aside-icon'} className={'flex-align-self-center width-4 j40-aside-icon'}
src={chatIcon} alt={'chat icon'}/> src={chatIcon} alt={'chat icon'}/>
Send Feedback</h2> Send Feedback</h3>
<p className={'usa-prose site-prose'}>Have ideas about how to <p className={'usa-prose site-prose'}>Have ideas about how to
acknowledge the on-the-ground experiences of your community? acknowledge the on-the-ground experiences of your community?
</p> </p>
Email: <a href="mailto: justice40open@usds.gov"> Email: <a href="mailto: justice40open@usds.gov">
justice40open@usds.gov</a> justice40open@usds.gov</a>
<p>&nbsp;</p> <p>&nbsp;</p>
<h2> <h3>
<img <img
className={'flex-align-self-center width-4 j40-aside-icon'} className={'flex-align-self-center width-4 j40-aside-icon'}
src={githubIcon} alt={'github icon'}/> src={githubIcon} alt={'github icon'}/>
Join the open source community</h2> Join the open source community</h3>
<p> <p>
Justice40’s code is open source, which means it is available for Justice40’s code is open source, which means it is available for
the public to view and contribute. Anyone can view and the public to view and contribute. Anyone can view and

5
client/src/components/J40Header.tsx
View file

@ -57,7 +57,7 @@ const J40Header = () => {
return ( return (
<> <>
<Helmet> <Helmet htmlAttributes={{lang: intl.locale}}>
<meta charSet="utf-8"/> <meta charSet="utf-8"/>
<title>{title}</title> <title>{title}</title>
</Helmet> </Helmet>
@ -67,7 +67,8 @@ const J40Header = () => {
className={'j40-sitealert'}> className={'j40-sitealert'}>
<b>Welcome to Justice40&apos;s Temporary Home</b> While Justice40 gets <b>Welcome to Justice40&apos;s Temporary Home</b> While Justice40 gets
up and running, we are using GitHub Pages as a temporary website up and running, we are using GitHub Pages as a temporary website
host. To learn more about GitHub Pages, click <a href="https://pages.github.com/">here</a>. host. To learn more about GitHub Pages, click
<a href="https://pages.github.com/">here</a>.
</SiteAlert> </SiteAlert>
<Header <Header
basic={true} role={'banner'} basic={true} role={'banner'}

7
client/src/pages/index.tsx
View file

@ -35,7 +35,7 @@ const IndexPage = ({location}: IndexPageProps) => {
]; ];
return (<Layout location={location}> return (<Layout location={location}>
<h2>About Justice40</h2> <h1>About Justice40</h1>
<p> <p>
In an effort to address historical environmental injustices, In an effort to address historical environmental injustices,
President Biden created the Justice40 Initiative on January President Biden created the Justice40 Initiative on January
@ -71,7 +71,7 @@ const IndexPage = ({location}: IndexPageProps) => {
Abroad.</a> Abroad.</a>
</p> </p>
<h3>Areas of Focus</h3> <h2>Areas of Focus</h2>
<div className={'grid-row grid-gap'}> <div className={'grid-row grid-gap'}>
<div className={'j40-two-column-confine'}> <div className={'j40-two-column-confine'}>
<ul className={'usa-icon-list j40-two-column'}> <ul className={'usa-icon-list j40-two-column'}>
@ -97,7 +97,7 @@ const IndexPage = ({location}: IndexPageProps) => {
</div> </div>
<h3>A Transparent, Community-First Approach</h3> <h2>A Transparent, Community-First Approach</h2>
<p> <p>
Successful initiatives are guided by direct input from the Successful initiatives are guided by direct input from the
@ -136,6 +136,7 @@ const IndexPage = ({location}: IndexPageProps) => {
being built and the processes for stakeholder and public being built and the processes for stakeholder and public
engagement. engagement.
</p> </p>
</Layout> </Layout>
); );
}; };

31
client/src/pages/timeline.tsx
View file

@ -10,8 +10,8 @@ interface TimelinePageProps {
const TimelinePage = ({location}: TimelinePageProps) => { const TimelinePage = ({location}: TimelinePageProps) => {
return (<Layout location={location}> return (<Layout location={location}>
<h2>Timeline</h2> <h1>Timeline</h1>
<h3>Throughout the Process</h3> <h2>Throughout the Process</h2>
<div className="grid-col"> <div className="grid-col">
<div className="grid-row grid-gap-lg"> <div className="grid-row grid-gap-lg">
<div className="grid-col-1"> <div className="grid-col-1">
@ -30,34 +30,27 @@ const TimelinePage = ({location}: TimelinePageProps) => {
</div> </div>
</div> </div>
<h3>Milestones</h3> <h2>Milestones</h2>
<ol className={'usa-process-list'}> <ol className={'usa-process-list'}>
<li <li
className={'j40-usa-process-list__item--complete ' + className={'j40-usa-process-list__item--complete ' +
'usa-process-list__item padding-bottom-4 '} 'usa-process-list__item padding-bottom-4 '}
aria-details={'milestone 1 done'}> aria-label={'milestone 1 done'}>
<h4 <h4 className={'usa-process-list__heading'}>Milestone 1</h4>
className={'usa-process-list__heading'}
>Milestone 1</h4>
<p className={'margin-top-05'}> <p className={'margin-top-05'}>
Publish data principles on this site by June 2021.</p> Publish data principles on this site by June 2021.</p>
</li> </li>
<li <li
className={'usa-process-list__item padding-bottom-4'} className={'usa-process-list__item padding-bottom-4'}
aria-details={'milestone 2 next'}> aria-label={'milestone 2 next'}>
<h4 <h4 className={'usa-process-list__heading'}>Milestone 2</h4>
className={'usa-process-list__heading'} <p>Make the first version of a screening tool
>Milestone 2</h4> available by July 2021.</p>
<p>Make the first version of a screening tool available
by
July 2021.</p>
</li> </li>
<li <li
className={'usa-process-list__item padding-bottom-4'} className={'usa-process-list__item padding-bottom-4'}
aria-details={'milestone 3'}> aria-label={'milestone 3'}>
<h4 <h4 className={'usa-process-list__heading'}>Milestone 3</h4>
className={'usa-process-list__heading'}
>Milestone 3</h4>
<p>Create a public scorecard to ensure accountability of <p>Create a public scorecard to ensure accountability of
investments by February 2022.</p> investments by February 2022.</p>
</li> </li>

25
client/src/styles/global.scss
View file

@ -66,7 +66,7 @@ $j40-max-width: 80ex;
} }
} }
.j40-header, .j40-primary-nav, .j40-header > li > a{ .j40-header, .j40-primary-nav, .j40-header > li > a {
background-color: #112f4e; /* todo: move color to theme */ background-color: #112f4e; /* todo: move color to theme */
color: white !important; color: white !important;
z-index: 5; z-index: 5;
@ -112,19 +112,14 @@ $j40-max-width: 80ex;
padding-right: 1em; padding-right: 1em;
padding-left: 1em; padding-left: 1em;
h1 { h2 {
font-weight: 100; font-weight: 100;
font-size: 2em; font-size: 2em;
} }
h2 {
font-weight: 100;
font-size: 1.4em;
}
h3 { h3 {
font-weight: 100; font-weight: 100;
font-size: 1.3em; font-size: 1.4em;
} }
.j40-aside-icon { .j40-aside-icon {
@ -148,11 +143,18 @@ $j40-max-width: 80ex;
} }
// spacing top & bottom around main content // spacing top & bottom around main content
@include at-media("mobile-lg") { .j40-main-content {
.j40-main-content { @include at-media("mobile-lg") {
margin-bottom: 2rem; margin-bottom: 2rem;
margin-top: 2.5rem; margin-top: 2.5rem;
} }
h1 {
font-size: 2.13rem;
}
h2 {
font-size: 1.46rem;
}
} }
// This should really be part of uswds and use $theme-step-indicator-segment-color-complete // This should really be part of uswds and use $theme-step-indicator-segment-color-complete
@ -174,6 +176,7 @@ $j40-max-width: 80ex;
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
} }
p, div { p, div {
max-width: $j40-max-width; max-width: $j40-max-width;
} }
@ -183,8 +186,10 @@ $j40-max-width: 80ex;
p { p {
margin: 0; margin: 0;
} }
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
.usa-alert:before { .usa-alert:before {
margin-top: 12px !important; margin-top: 12px !important;
} }