Skip to content
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

Add storybook a11y testing #142 #1450

Merged
merged 22 commits into from
Jul 14, 2021
Merged

Add storybook a11y testing #142 #1450

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
50600b6
Add storybook storyshots puppeteer addon
akegan Jun 30, 2021
35297ca
Get yarn:a11y test up and running locally
akegan Jul 2, 2021
7951469
Fix alt text-related issues
akegan Jul 2, 2021
484835a
Try running a11y tests on circleCI
akegan Jul 3, 2021
5b7a9a3
Make sure static storybook build is gitignored
akegan Jul 3, 2021
0a9136a
Actually add a11y tests to circleCI pipeline
akegan Jul 3, 2021
4ce6730
Disable nested interactive rule for Tab-like Nav
akegan Jul 7, 2021
5413fe4
Move storyshots-puppeteer and puppeteer into dev dependencies
akegan Jul 7, 2021
73502d2
Add unmet peer dependency of preact
akegan Jul 7, 2021
061eaf2
Fix failing jest tests
akegan Jul 7, 2021
2c7cb5e
Try node docker image with browsers
akegan Jul 8, 2021
e083707
Use non-legacy docker image
akegan Jul 8, 2021
3aefec2
Fix code style issues with Prettier
lint-action Jul 8, 2021
53c3f81
Fix a11y issue with dropzone story
akegan Jul 8, 2021
df701ea
Merge branch 'add-storybook-a11y-testing-#142' of https://github.com/…
akegan Jul 8, 2021
b64be61
Add changes to changelog
akegan Jul 8, 2021
90268eb
Fix code style issues with Prettier
lint-action Jul 8, 2021
e5da44d
Merge branch 'dev' into add-storybook-a11y-testing-#142
akegan Jul 14, 2021
6a756c4
Merge remote-tracking branch 'remotes/upstream/dev' into add-storyboo…
seanmalbert Jul 14, 2021
579a10c
adds description prop to ImageCard for alt text
seanmalbert Jul 14, 2021
e9e1ab9
updates ImageCard tests
seanmalbert Jul 14, 2021
378ceb9
Fix code style issues with Prettier
lint-action Jul 14, 2021
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
8 changes: 8 additions & 0 deletions ui-components/src/blocks/ImageCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,11 @@ export const withListing = () => (
listing={listing}
/>
)

export const withDescriptionAsAlt = () => (
<ImageCard
imageUrl="/images/listing.jpg"
title="Hello World"
description="An image of the building"
/>
)
5 changes: 4 additions & 1 deletion ui-components/src/blocks/ImageCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface ImageCardProps {
title: string
href?: string
listing?: Listing
description?: string
}

const ImageCard = (props: ImageCardProps) => {
Expand All @@ -26,7 +27,9 @@ const ImageCard = (props: ImageCardProps) => {
const image = (
<div className="image-card__wrapper">
<figure className="image-card">
{props.imageUrl && <img src={props.imageUrl} alt={"A picture of the building"} />}
{props.imageUrl && (
<img src={props.imageUrl} alt={props.description || "An picture of the building"} />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

oops @seanmalbert I just had this PR open again because I was demoing it to the rest of our team, and I noticed that this default has a typo in it 😕

)}

<figcaption className="image-card__figcaption">
<h2 className="image-card__title">{props.title}</h2>
Expand Down