Skip to content

FAQ a11y sign off updates #358

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

FAQ a11y sign off updates #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4c7a96e
FAQ a11y sign off updates
JoshBowdenConcepts Jul 21, 2023
8bfe039
FAQ a11y updates
JoshBowdenConcepts Jul 21, 2023
9b74566
Updated Tests
JoshBowdenConcepts Jul 21, 2023
6425e59
github-actions[bot] Regenerated snapshots
JoshBowdenConcepts Jul 21, 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
360 changes: 194 additions & 166 deletions apps/docs/content/components/FAQ/react.mdx
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/docs/scripts/components-with-animation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export const supportedComponents = [
'Image',
'Label',
'River',
'Stack',
'SectionIntro',
'Stack',
'Testimonial',
'Text',
'Animate',
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/Accordion/Accordion.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ details[open] .Accordion__summary--expanded::after {
details[open] > .Accordion__content {
padding-left: var(--base-size-40);
padding-bottom: var(--base-size-24);
margin-top: calc(var(--base-size-16) * -1); /* for 8px gap between question and answer */
Copy link
Contributor Author

Choose a reason for hiding this comment

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

(sev 2) When the accordion controls are expanded using the keyboard, the focus indicator overlaps the first line of text in the panel decreasing readability.

This needed to be removed to support this a11y issue

margin-top: 0;
animation: fade-in 0.5s;
}
.Accordion__content-item {
Expand Down
8 changes: 5 additions & 3 deletions packages/react/src/Accordion/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {forwardRef} from 'react'
import clsx from 'clsx'
import {useId} from '@reach/auto-id'

import {Heading, Text} from '../'
import type {BaseProps} from '../component-helpers'
Expand Down Expand Up @@ -57,11 +58,12 @@ type AccordionHeadingProps = BaseProps<HTMLHeadingElement> & {
}

export const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(
({children, className, as = 'h4', ...rest}, ref) => {
({children, className, as = 'h4', id, ...rest}, ref) => {
const ariaId = useId()
return (
<summary className={clsx(styles.Accordion__summary, className)} ref={ref} {...rest}>
<summary aria-labelledby={ariaId} className={clsx(styles.Accordion__summary, className)} ref={ref} {...rest}>
<span aria-hidden="true" className={styles['Accordion__summary--collapsed']}></span>
<Heading as={as} className={styles['Accordion__summary-heading']}>
<Heading id={ariaId} as={as} className={styles['Accordion__summary-heading']}>
{children}
</Heading>
<span aria-hidden="true" className={styles['Accordion__summary--expanded']}></span>
Expand Down
46 changes: 25 additions & 21 deletions packages/react/src/FAQ/FAQ.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ export const AllClosed: StoryFn<typeof FAQ> = () => {
return (
<Container>
<FAQ>
<FAQ.Heading>Frequently asked&nbsp;questions</FAQ.Heading>
<>
<FAQ.Heading id="all-closed-faq">Frequently asked&nbsp;questions</FAQ.Heading>
<FAQ.Group aria-labelledby="all-closed-faq">
{fixtureData.map(({question, answer}) => {
return (
<FAQ.Item key={question} open={false}>
Expand All @@ -110,7 +110,7 @@ export const AllClosed: StoryFn<typeof FAQ> = () => {
</FAQ.Item>
)
})}
</>
</FAQ.Group>
</FAQ>
</Container>
)
Expand All @@ -120,8 +120,8 @@ export const AllOpen: StoryFn<typeof FAQ> = () => {
return (
<Container>
<FAQ>
<FAQ.Heading>Frequently asked&nbsp;questions</FAQ.Heading>
<>
<FAQ.Heading id="all-open-faq">Frequently asked&nbsp;questions</FAQ.Heading>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Could we apply this inside the component using a unique id? I suspect users may forget to do this otherwise so we could do it for them internally

Copy link
Contributor Author

Choose a reason for hiding this comment

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

How would you feel about making these props required and leaving information in the documentation? We could do this dynamically but it would require a second loop of the children to first grab the id if a user specifies one and then set the id on the group. Of course, if they didn't supply one then this second loop wouldn't be needed but I was thinking we would want to support them passing their own id if they wanted to access that component using an id query.

<FAQ.Group aria-labelledby="all-open-faq">
{fixtureData.map(({question, answer}) => {
return (
<FAQ.Item key={question} open={true}>
Expand All @@ -130,7 +130,7 @@ export const AllOpen: StoryFn<typeof FAQ> = () => {
</FAQ.Item>
)
})}
</>
</FAQ.Group>
</FAQ>
</Container>
)
Expand All @@ -145,8 +145,10 @@ export const HeadingLeftAligned: StoryFn<typeof FAQ> = () => {
return (
<Container>
<FAQ>
<FAQ.Heading align="start">Frequently asked&nbsp;questions</FAQ.Heading>
<>
<FAQ.Heading id="heading-left-aligned" align="start">
Frequently asked&nbsp;questions
</FAQ.Heading>
<FAQ.Group aria-labelledby="heading-left-aligned">
{fixtureData.map(({question, answer}) => {
return (
<FAQ.Item key={question}>
Expand All @@ -155,7 +157,7 @@ export const HeadingLeftAligned: StoryFn<typeof FAQ> = () => {
</FAQ.Item>
)
})}
</>
</FAQ.Group>
</FAQ>
</Container>
)
Expand All @@ -166,8 +168,8 @@ export const Groups: StoryFn<typeof FAQ> = () => {
<Container>
<FAQ>
<FAQ.Heading size="large">Frequently asked&nbsp;questions</FAQ.Heading>
<FAQ.Subheading>Group heading</FAQ.Subheading>
<>
<FAQ.Subheading id="group">Group heading</FAQ.Subheading>
<FAQ.Group aria-labelledby="group">
{fixtureData.map(({question, answer}) => {
return (
<FAQ.Item key={question}>
Expand All @@ -176,7 +178,7 @@ export const Groups: StoryFn<typeof FAQ> = () => {
</FAQ.Item>
)
})}
</>
</FAQ.Group>
</FAQ>
</Container>
)
Expand Down Expand Up @@ -291,15 +293,17 @@ export const DynamicDataExample: StoryFn<typeof FAQ> = () => {
return (
<Container>
<FAQ>
<FAQ.Heading>Frequently asked questions</FAQ.Heading>
{faqs.map((item, index) => {
return (
<FAQ.Item key={index}>
<FAQ.Question>{item.title}</FAQ.Question>
<FAQ.Answer>{item.content}</FAQ.Answer>
</FAQ.Item>
)
})}
<FAQ.Heading id="dynamic">Frequently asked questions</FAQ.Heading>
<FAQ.Group aria-labelledby="dynamic">
{faqs.map((item, index) => {
return (
<FAQ.Item key={index}>
<FAQ.Question>{item.title}</FAQ.Question>
<FAQ.Answer>{item.content}</FAQ.Answer>
</FAQ.Item>
)
})}
</FAQ.Group>
</FAQ>
</Container>
)
Expand Down
6 changes: 6 additions & 0 deletions packages/react/src/FAQ/FAQ.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
margin: 0 auto;
}

.FAQ__group {
list-style: none;
margin: 0;
padding: 0;
}

.FAQ__heading {
/*Visual appearance as a h3*/
font-weight: var(--brand-heading-weight-700);
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/FAQ/FAQ.module.css.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
declare const styles: {
readonly "FAQ": string;
readonly "FAQ__group": string;
readonly "FAQ__heading": string;
readonly "FAQ__subheading": string;
readonly "FAQ__heading--start": string;
Expand Down
146 changes: 75 additions & 71 deletions packages/react/src/FAQ/FAQ.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,76 +11,80 @@ export default {
export const Default = () => (
<FAQ>
<FAQ.Heading align="center">Frequently asked&nbsp;questions</FAQ.Heading>
<FAQ.Subheading align="start">Subscriptions and payments</FAQ.Subheading>
<FAQ.Item>
<FAQ.Question>What&apos;s included in the GitHub for Startups offer?</FAQ.Question>
<FAQ.Answer>
<p>
All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
here
</InlineLink>
.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question>Who is eligible to apply?</FAQ.Question>
<FAQ.Answer>
<p>Startups who meet the following criteria are eligible to apply for the program:</p>
<ol>
<li>
<Text size="300" variant="muted">
Must be associated with a current GitHub for Startups partner.
</Text>
</li>
<li>
<Text size="300" variant="muted">
Self-funded or funded (Seed-Series A)
</Text>
</li>
<li>
<Text size="300" variant="muted">
Not a current GitHub Enterprise customer
</Text>
</li>
<li>
<Text size="300" variant="muted">
Must not have previously received credits for GitHub Enterprise
</Text>
</li>
</ol>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question>What if my startup is not eligible? Are there other resources for me?</FAQ.Question>
<FAQ.Answer>
<p>
If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
feel to sign up for a trial
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
here
</InlineLink>
.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question>How can my organization become a GitHub for Startups partner?</FAQ.Question>
<FAQ.Answer>
<p>
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
program.
</p>
<p>
{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Apply here
</InlineLink>
.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Subheading id="faq-subscriptions-and-payments" align="start">
Subscriptions and payments
</FAQ.Subheading>
<FAQ.Group aria-labelledby="faq-subscriptions-and-payments">
<FAQ.Item>
<FAQ.Question>What&apos;s included in the GitHub for Startups offer?</FAQ.Question>
<FAQ.Answer>
<p>
All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
off year two.{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Learn more about the features and capabilities of GitHub Enterprise here
</InlineLink>
.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question>Who is eligible to apply?</FAQ.Question>
<FAQ.Answer>
<p>Startups who meet the following criteria are eligible to apply for the program:</p>
<ol>
<li>
<Text size="300" variant="muted">
Must be associated with a current GitHub for Startups partner.
</Text>
</li>
<li>
<Text size="300" variant="muted">
Self-funded or funded (Seed-Series A)
</Text>
</li>
<li>
<Text size="300" variant="muted">
Not a current GitHub Enterprise customer
</Text>
</li>
<li>
<Text size="300" variant="muted">
Must not have previously received credits for GitHub Enterprise
</Text>
</li>
</ol>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question>What if my startup is not eligible? Are there other resources for me?</FAQ.Question>
<FAQ.Answer>
<p>
If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
feel to{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
sign up for a trial here
</InlineLink>
.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question>How can my organization become a GitHub for Startups partner?</FAQ.Question>
<FAQ.Answer>
<p>
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
program.
</p>
<p>
{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Apply here
</InlineLink>
.
</p>
</FAQ.Answer>
</FAQ.Item>
</FAQ.Group>
</FAQ>
)
Loading