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

feat(Cards): improve accessibility #1139

Merged
merged 9 commits into from
Jun 10, 2024
Merged

feat(Cards): improve accessibility #1139

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
adc7799
update display cards
marcoskolodny Jun 4, 2024
2b6fa78
fix aria label logic
marcoskolodny Jun 4, 2024
8669e28
refactor code
marcoskolodny Jun 4, 2024
d523ac5
update all cards
marcoskolodny Jun 4, 2024
1e601e2
resolve conflicts
marcoskolodny Jun 4, 2024
52b41be
update DataCard story controls
marcoskolodny Jun 4, 2024
83468fe
update stories controls
marcoskolodny Jun 5, 2024
708484d
remove log
marcoskolodny Jun 10, 2024
14f022c
replace box with div for extra
marcoskolodny Jun 10, 2024
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
41 changes: 22 additions & 19 deletions src/__stories__/data-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,9 @@ type DataCardArgs = {
title: string;
subtitle: string;
description: string;
ariaLabel: string;
withExtra: boolean;
actions: 'button' | 'link' | 'button and link' | 'on press';
actions: 'button' | 'link' | 'button and link' | 'onPress' | 'href' | 'to' | 'none';
closable: boolean;
withTopAction: boolean;
aspectRatio: AspectRatio;
Expand All @@ -49,6 +50,7 @@ export const Default: StoryComponent<DataCardArgs> = ({
title,
subtitle,
description,
ariaLabel,
withExtra,
actions = 'button',
closable,
Expand All @@ -66,22 +68,22 @@ export const Default: StoryComponent<DataCardArgs> = ({
icon = <Circle size={40} backgroundImage={avatarImg} />;
}

const button = actions.includes('button') ? (
<ButtonPrimary small fake>
Action
</ButtonPrimary>
) : undefined;

const buttonLink = actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined;

const onPress = actions.includes('press') ? () => {} : undefined;

const interactiveActions = onPress
? {onPress}
: {
button,
buttonLink,
};
const interactiveActions = {
button: actions.includes('button') ? (
<ButtonPrimary small fake>
Action
</ButtonPrimary>
) : undefined,
buttonLink: actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined,
onPress: actions === 'onPress' ? () => {} : undefined,
to: actions === 'to' ? '#' : undefined,
href: actions === 'href' ? 'https://example.org' : undefined,
} as
| {button?: JSX.Element; buttonLink?: JSX.Element}
| {onPress: () => void}
| {to: string}
| {href: string}
| {[key: string]: never};

const aspectRatioValue = fixedAspectRatioValues.includes(aspectRatio)
? aspectRatio.replace(' ', ':')
Expand All @@ -100,7 +102,7 @@ export const Default: StoryComponent<DataCardArgs> = ({
{...interactiveActions}
aspectRatio={aspectRatioValue as AspectRatio}
dataAttributes={{testid: 'data-card'}}
aria-label="Data card label"
aria-label={ariaLabel}
actions={
withTopAction
? [
Expand Down Expand Up @@ -141,6 +143,7 @@ Default.args = {
description: 'This is a description for the card',
withExtra: false,
actions: 'button',
ariaLabel: '',
closable: false,
withTopAction: false,
aspectRatio: 'auto',
Expand All @@ -155,7 +158,7 @@ Default.argTypes = {
control: {type: 'select'},
},
actions: {
options: ['button', 'link', 'button and link', 'on press', 'none'],
options: ['button', 'link', 'button and link', 'onPress', 'href', 'to', 'none'],
control: {type: 'select'},
},
aspectRatio: {
Expand Down
64 changes: 40 additions & 24 deletions src/__stories__/display-data-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,15 @@ type DisplayDataCardArgs = {
withExtra: boolean;
closable: boolean;
withTopAction: boolean;
actions: 'button' | 'link' | 'button and link' | 'button and secondary button';
actions:
| 'button'
| 'link'
| 'button and link'
| 'button and secondary button'
| 'onPress'
| 'href'
| 'to'
| 'none';
isInverse: boolean;
aspectRatio: AspectRatio;
};
Expand Down Expand Up @@ -73,28 +81,27 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
icon = <Image src={avatarImg} width={40} height={40} />;
}

const button = actions.includes('button') ? (
<ButtonPrimary small fake>
Action
</ButtonPrimary>
) : undefined;

const buttonLink = actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined;
const secondaryButton = actions.includes('secondary') ? (
<ButtonSecondary small fake>
Action 2
</ButtonSecondary>
) : undefined;

const onPress = actions.includes('press') ? () => {} : undefined;

const interactiveActions = onPress
? {onPress}
: {
button,
buttonLink,
secondaryButton,
};
const interactiveActions = {
button: actions.includes('button') ? (
<ButtonPrimary small fake>
Action
</ButtonPrimary>
) : undefined,
secondaryButton: actions.includes('secondary') ? (
<ButtonSecondary small fake>
Action 2
</ButtonSecondary>
) : undefined,
buttonLink: actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined,
onPress: actions === 'onPress' ? () => {} : undefined,
to: actions === 'to' ? '#' : undefined,
href: actions === 'href' ? 'https://example.org' : undefined,
} as
| {button?: JSX.Element; buttonLink?: JSX.Element; secondaryButton?: JSX.Element}
| {onPress: () => void}
| {to: string}
| {href: string}
| {[key: string]: never};

const aspectRatioValue = fixedAspectRatioValues.includes(aspectRatio)
? aspectRatio.replace(' ', ':')
Expand Down Expand Up @@ -166,7 +173,16 @@ Default.argTypes = {
control: {type: 'select'},
},
actions: {
options: ['button', 'link', 'button and link', 'button and secondary button', 'on press'],
options: [
'button',
'link',
'button and link',
'button and secondary button',
'onPress',
'href',
'to',
'none',
],
control: {type: 'select'},
},
aspectRatio: {
Expand Down
64 changes: 40 additions & 24 deletions src/__stories__/display-media-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,15 @@ type DisplayMediaCardArgs = {
withExtra: boolean;
closable: boolean;
withTopAction: boolean;
actions: 'button' | 'link' | 'button and link' | 'button and secondary button' | 'onPress';
actions:
| 'button'
| 'link'
| 'button and link'
| 'button and secondary button'
| 'onPress'
| 'href'
| 'to'
| 'none';
width: string;
aspectRatio: '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
isEmptySource: boolean;
Expand Down Expand Up @@ -79,28 +87,27 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
icon = <Circle size={40} backgroundImage={avatarImg} />;
}

const button = actions.includes('button') ? (
<ButtonPrimary small fake>
Action
</ButtonPrimary>
) : undefined;

const buttonLink = actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined;
const secondaryButton = actions.includes('secondary') ? (
<ButtonSecondary small fake>
Action 2
</ButtonSecondary>
) : undefined;

const onPress = actions.includes('press') ? () => {} : undefined;

const interactiveActions = onPress
? {onPress}
: {
button,
buttonLink,
secondaryButton,
};
const interactiveActions = {
button: actions.includes('button') ? (
<ButtonPrimary small fake>
Action
</ButtonPrimary>
) : undefined,
secondaryButton: actions.includes('secondary') ? (
<ButtonSecondary small fake>
Action 2
</ButtonSecondary>
) : undefined,
buttonLink: actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined,
onPress: actions === 'onPress' ? () => {} : undefined,
to: actions === 'to' ? '#' : undefined,
href: actions === 'href' ? 'https://example.org' : undefined,
} as
| {button?: JSX.Element; buttonLink?: JSX.Element; secondaryButton?: JSX.Element}
| {onPress: () => void}
| {to: string}
| {href: string}
| {[key: string]: never};

const backgroundProps =
background === 'image'
Expand Down Expand Up @@ -184,7 +191,16 @@ Default.argTypes = {
control: {type: 'select'},
},
actions: {
options: ['button', 'link', 'button and link', 'button and secondary button', 'on press'],
options: [
'button',
'link',
'button and link',
'button and secondary button',
'onPress',
'href',
'to',
'none',
],
control: {type: 'select'},
},
background: {
Expand Down
37 changes: 18 additions & 19 deletions src/__stories__/media-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ type Args = {
subtitle: string;
description: string;
withExtra: boolean;
actions: 'button' | 'link' | 'button and link' | 'on press' | 'none';
actions: 'button' | 'link' | 'button and link' | 'onPress' | 'href' | 'to' | 'none';
closable: boolean;
withTopAction: boolean;
isEmptySource: boolean;
Expand Down Expand Up @@ -72,24 +72,23 @@ export const Default: StoryComponent<Args> = ({
icon = <Circle size={40} backgroundImage={avatarImg} />;
}

const button = actions.includes('button') ? (
<ButtonPrimary small href="https://google.com">
Action
</ButtonPrimary>
) : undefined;
const interactiveActions = {
button: actions.includes('button') ? (
<ButtonPrimary small fake>
Action
</ButtonPrimary>
) : undefined,

const buttonLink = actions.includes('link') ? (
<ButtonLink href="https://google.com">Link</ButtonLink>
) : undefined;

const onPress = actions.includes('press') ? () => {} : undefined;

const interactiveActions = onPress
? {onPress}
: {
button,
buttonLink,
};
buttonLink: actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined,
onPress: actions === 'onPress' ? () => {} : undefined,
to: actions === 'to' ? '#' : undefined,
href: actions === 'href' ? 'https://example.org' : undefined,
} as
| {button?: JSX.Element; buttonLink?: JSX.Element; secondaryButton?: JSX.Element}
| {onPress: () => void}
| {to: string}
| {href: string}
| {[key: string]: never};

return (
<MediaCard
Expand Down Expand Up @@ -173,7 +172,7 @@ Default.argTypes = {
control: {type: 'select'},
},
actions: {
options: ['button', 'link', 'button and link', 'on press', 'none'],
options: ['button', 'link', 'button and link', 'onPress', 'href', 'to', 'none'],
control: {type: 'select'},
},
};
Expand Down
37 changes: 18 additions & 19 deletions src/__stories__/naked-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ type Args = {
subtitle: string;
description: string;
withExtra: boolean;
actions: 'button' | 'link' | 'button and link' | 'on press' | 'none';
actions: 'button' | 'link' | 'button and link' | 'onPress' | 'href' | 'to' | 'none';
closable: boolean;
withTopAction: boolean;
isEmptySource: boolean;
Expand Down Expand Up @@ -77,24 +77,23 @@ export const Default: StoryComponent<Args> = ({
icon = <Circle size={40} backgroundImage={avatarImg} />;
}

const button = actions.includes('button') ? (
<ButtonPrimary small href="https://google.com">
Action
</ButtonPrimary>
) : undefined;
const interactiveActions = {
button: actions.includes('button') ? (
<ButtonPrimary small fake>
Action
</ButtonPrimary>
) : undefined,

const buttonLink = actions.includes('link') ? (
<ButtonLink href="https://google.com">Link</ButtonLink>
) : undefined;

const onPress = actions.includes('press') ? () => {} : undefined;

const interactiveActions = onPress
? {onPress}
: {
button,
buttonLink,
};
buttonLink: actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined,
onPress: actions === 'onPress' ? () => {} : undefined,
to: actions === 'to' ? '#' : undefined,
href: actions === 'href' ? 'https://example.org' : undefined,
} as
| {button?: JSX.Element; buttonLink?: JSX.Element; secondaryButton?: JSX.Element}
| {onPress: () => void}
| {to: string}
| {href: string}
| {[key: string]: never};

return (
<ResponsiveLayout>
Expand Down Expand Up @@ -180,7 +179,7 @@ Default.argTypes = {
control: {type: 'select'},
},
actions: {
options: ['button', 'link', 'button and link', 'on press', 'none'],
options: ['button', 'link', 'button and link', 'onPress', 'href', 'to', 'none'],
control: {type: 'select'},
},
};
Expand Down
4 changes: 2 additions & 2 deletions src/__stories__/poster-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
variant,
};

const touchableProps = {
const interactiveProps = {
onPress: actions === 'onPress' ? () => {} : undefined,
to: actions === 'to' ? '#' : undefined,
href: actions === 'href' ? 'https://example.org' : undefined,
Expand All @@ -152,7 +152,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
width={width}
height={height}
aspectRatio={aspectRatio}
{...touchableProps}
{...interactiveProps}
/>
</Box>
</ResponsiveLayout>
Expand Down
Loading
Loading