mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-22 09:41:26 -08:00
Make the accessibility checkers happy (#129)
* 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
GitHub
parent
760edb4feb
commit
9155326775
5 changed files with 39 additions and 39 deletions
|
|
@ -12,22 +12,22 @@ const J40Aside = () => {
|
|||
aria-labelledby="right-sidebar"
|
||||
className={'j40-aside desktop:grid-col-3 usa-prose usa-section'}
|
||||
id="right-sidebar">
|
||||
<h1>Get Involved</h1>
|
||||
<h2><img
|
||||
<h2>Get Involved</h2>
|
||||
<h3><img
|
||||
className={'flex-align-self-center width-4 j40-aside-icon'}
|
||||
src={chatIcon} alt={'chat icon'}/>
|
||||
Send Feedback</h2>
|
||||
Send Feedback</h3>
|
||||
<p className={'usa-prose site-prose'}>Have ideas about how to
|
||||
acknowledge the on-the-ground experiences of your community?
|
||||
</p>
|
||||
Email: <a href="mailto: justice40open@usds.gov">
|
||||
justice40open@usds.gov</a>
|
||||
<p> </p>
|
||||
<h2>
|
||||
<h3>
|
||||
<img
|
||||
className={'flex-align-self-center width-4 j40-aside-icon'}
|
||||
src={githubIcon} alt={'github icon'}/>
|
||||
Join the open source community</h2>
|
||||
Join the open source community</h3>
|
||||
<p>
|
||||
Justice40’s code is open source, which means it is available for
|
||||
the public to view and contribute. Anyone can view and
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const J40Header = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<Helmet htmlAttributes={{lang: intl.locale}}>
|
||||
<meta charSet="utf-8"/>
|
||||
<title>{title}</title>
|
||||
</Helmet>
|
||||
|
|
@ -67,7 +67,8 @@ const J40Header = () => {
|
|||
className={'j40-sitealert'}>
|
||||
<b>Welcome to Justice40's Temporary Home</b> While Justice40 gets
|
||||
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>
|
||||
<Header
|
||||
basic={true} role={'banner'}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
];
|
||||
|
||||
return (<Layout location={location}>
|
||||
<h2>About Justice40</h2>
|
||||
<h1>About Justice40</h1>
|
||||
<p>
|
||||
In an effort to address historical environmental injustices,
|
||||
President Biden created the Justice40 Initiative on January
|
||||
|
|
@ -71,7 +71,7 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
Abroad.</a>
|
||||
</p>
|
||||
|
||||
<h3>Areas of Focus</h3>
|
||||
<h2>Areas of Focus</h2>
|
||||
<div className={'grid-row grid-gap'}>
|
||||
<div className={'j40-two-column-confine'}>
|
||||
<ul className={'usa-icon-list j40-two-column'}>
|
||||
|
|
@ -97,7 +97,7 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
</div>
|
||||
|
||||
|
||||
<h3>A Transparent, Community-First Approach</h3>
|
||||
<h2>A Transparent, Community-First Approach</h2>
|
||||
|
||||
<p>
|
||||
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
|
||||
engagement.
|
||||
</p>
|
||||
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ interface TimelinePageProps {
|
|||
|
||||
const TimelinePage = ({location}: TimelinePageProps) => {
|
||||
return (<Layout location={location}>
|
||||
<h2>Timeline</h2>
|
||||
<h3>Throughout the Process</h3>
|
||||
<h1>Timeline</h1>
|
||||
<h2>Throughout the Process</h2>
|
||||
<div className="grid-col">
|
||||
<div className="grid-row grid-gap-lg">
|
||||
<div className="grid-col-1">
|
||||
|
|
@ -30,34 +30,27 @@ const TimelinePage = ({location}: TimelinePageProps) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Milestones</h3>
|
||||
<h2>Milestones</h2>
|
||||
<ol className={'usa-process-list'}>
|
||||
<li
|
||||
className={'j40-usa-process-list__item--complete ' +
|
||||
'usa-process-list__item padding-bottom-4 '}
|
||||
aria-details={'milestone 1 done'}>
|
||||
<h4
|
||||
className={'usa-process-list__heading'}
|
||||
>Milestone 1</h4>
|
||||
aria-label={'milestone 1 done'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 1</h4>
|
||||
<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
|
||||
className={'usa-process-list__item padding-bottom-4'}
|
||||
aria-details={'milestone 2 next'}>
|
||||
<h4
|
||||
className={'usa-process-list__heading'}
|
||||
>Milestone 2</h4>
|
||||
<p>Make the first version of a screening tool available
|
||||
by
|
||||
July 2021.</p>
|
||||
aria-label={'milestone 2 next'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 2</h4>
|
||||
<p>Make the first version of a screening tool
|
||||
available by July 2021.</p>
|
||||
</li>
|
||||
<li
|
||||
className={'usa-process-list__item padding-bottom-4'}
|
||||
aria-details={'milestone 3'}>
|
||||
<h4
|
||||
className={'usa-process-list__heading'}
|
||||
>Milestone 3</h4>
|
||||
aria-label={'milestone 3'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 3</h4>
|
||||
<p>Create a public scorecard to ensure accountability of
|
||||
investments by February 2022.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
color: white !important;
|
||||
z-index: 5;
|
||||
|
|
@ -112,19 +112,14 @@ $j40-max-width: 80ex;
|
|||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
|
||||
h1 {
|
||||
h2 {
|
||||
font-weight: 100;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 100;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 100;
|
||||
font-size: 1.3em;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.j40-aside-icon {
|
||||
|
|
@ -148,11 +143,18 @@ $j40-max-width: 80ex;
|
|||
}
|
||||
|
||||
// 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-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
|
||||
|
|
@ -174,6 +176,7 @@ $j40-max-width: 80ex;
|
|||
h1, h2, h3, h4 {
|
||||
font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
|
||||
}
|
||||
|
||||
p, div {
|
||||
max-width: $j40-max-width;
|
||||
}
|
||||
|
|
@ -183,8 +186,10 @@ $j40-max-width: 80ex;
|
|||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.usa-alert:before {
|
||||
margin-top: 12px !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue