gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): heading structure on landing page (#52015)

Browse Source
This commit is contained in:
Bruce Blaser
2023-10-19 14:09:03 -07:00
committed by GitHub
parent 3b98667f88
commit eeaa05fb6b
4 changed files with 46 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/landing/components/as-seen-in.tsx
+2 -2
View File
@@ -12,12 +12,12 @@ const AsSeenIn = (): JSX.Element => {
className='as-seen-in text-center'
data-playwright-test-label='landing-as-seen-in-container'
>
<p
<h2
className='big-heading'
data-playwright-test-label='landing-as-seen-in-text'
>
{t('landing.as-seen-in')}
</p>
</h2>
<AsSeenInText fill='light' />
</Container>
);
client/src/components/landing/components/faq.tsx
+2 -2
View File
@@ -24,14 +24,14 @@ const Faq = (): JSX.Element => {
data-playwright-test-label='landing-page-faq'
key={i}
>
<p className='faq-question'>{faq.question}</p>
<h3 className='faq-question'>{faq.question}</h3>
{faq.answer.map((answer, i) => (
<p key={i}>{answer}</p>
))}
<Spacer size='small' />
</div>
))}
<h3>{t('learn.read-this.p12')}</h3>
<h2 className='landing-page-happy'>{t('learn.read-this.p12')}</h2>
<Spacer size='medium' />
<BigCallToAction />
<Spacer size='large' />
client/src/components/landing/components/testimonials.tsx
+21 -15
View File
@@ -36,18 +36,20 @@ const Testimonials = (): JSX.Element => {
<div className='testimonials-footer'>
<div className='testimonial-meta'>
<p data-playwright-test-label='testimonials-endorser-location'>
<h3 data-playwright-test-label='testimonials-endorser-location'>
{' '}
<Trans>landing.testimonials.shawn.location</Trans>
</p>
</h3>
<p data-playwright-test-label='testimonials-endorser-occupation'>
<Trans>landing.testimonials.shawn.occupation</Trans>
</p>
</div>
<div className='testimony'>
<p data-playwright-test-label='testimonials-endorser-testimony'>
<Trans>landing.testimonials.shawn.testimony</Trans>
</p>
<blockquote>
<p data-playwright-test-label='testimonials-endorser-testimony'>
<Trans>landing.testimonials.shawn.testimony</Trans>
</p>
</blockquote>
</div>
</div>
</div>
@@ -69,18 +71,20 @@ const Testimonials = (): JSX.Element => {
<div className='testimonials-footer'>
<div className='testimonial-meta'>
<p data-playwright-test-label='testimonials-endorser-location'>
<h3 data-playwright-test-label='testimonials-endorser-location'>
{' '}
<Trans>landing.testimonials.sarah.location</Trans>
</p>
</h3>
<p data-playwright-test-label='testimonials-endorser-occupation'>
<Trans>landing.testimonials.sarah.occupation</Trans>
</p>
</div>
<div className='testimony'>
<p data-playwright-test-label='testimonials-endorser-testimony'>
<Trans>landing.testimonials.sarah.testimony</Trans>
</p>
<blockquote>
<p data-playwright-test-label='testimonials-endorser-testimony'>
<Trans>landing.testimonials.sarah.testimony</Trans>
</p>
</blockquote>
</div>
</div>
</div>
@@ -102,18 +106,20 @@ const Testimonials = (): JSX.Element => {
<div className='testimonials-footer'>
<div className='testimonial-meta'>
<p data-playwright-test-label='testimonials-endorser-location'>
<h3 data-playwright-test-label='testimonials-endorser-location'>
{' '}
<Trans>landing.testimonials.emma.location</Trans>
</p>
</h3>
<p data-playwright-test-label='testimonials-endorser-occupation'>
<Trans>landing.testimonials.emma.occupation</Trans>
</p>
</div>
<div className='testimony'>
<p data-playwright-test-label='testimonials-endorser-testimony'>
<Trans>landing.testimonials.emma.testimony</Trans>
</p>
<blockquote>
<p data-playwright-test-label='testimonials-endorser-testimony'>
<Trans>landing.testimonials.emma.testimony</Trans>
</p>
</blockquote>
</div>
</div>
</div>
client/src/components/landing/landing.css
+21
View File
@@ -30,6 +30,12 @@
font-family: var(--font-family-sans-serif);
}
.landing-page .landing-page-happy {
font-family: var(--font-family-monospace);
font-size: 1.1rem;
margin-top: 0;
}
figcaption.caption {
margin: 10px 0 0;
font-weight: 600;
@@ -45,6 +51,7 @@ figcaption.caption {
.as-seen-in .big-heading {
color: var(--gray-15);
margin-top: 0;
}
.landing-page .big-heading {
@@ -70,6 +77,8 @@ figcaption.caption {
.faq-question {
font-weight: bold;
font-size: 1.25rem;
font-family: var(--font-family-sans-serif);
margin-bottom: 1.2rem;
}
@media (min-width: 370px) {
@@ -141,6 +150,13 @@ figcaption.caption {
padding: 10px 0 30px;
}
.testimonial-meta h3 {
font-family: var(--font-family-sans-serif);
font-size: 1.3rem;
font-weight: normal;
margin-bottom: 0;
}
.testimonial-meta p,
.testimonial-meta strong {
font-size: 1.2rem;
@@ -160,6 +176,11 @@ figcaption.caption {
justify-content: center;
}
.testimony blockquote {
padding: 0;
border: 0;
}
.landing-top,
.as-seen-in,
.certification-section,