Skip to content

Commit

Permalink
add aria-hidden to cards and update a11y for AdvancedDataCard
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcoskolodny
marcoskolodny committed Nov 22, 2024
1 parent 49e5adf commit 804dbff
Show file tree
Hide file tree
Showing 5 changed files with 248 additions and 43 deletions.
124 changes: 124 additions & 0 deletions src/__tests__/advanced-data-card-test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import * as React from 'react';
import {AdvancedDataCard} from '../community';
import {makeTheme} from './test-utils';
import {render, screen} from '@testing-library/react';
import ThemeContextProvider from '../theme-context-provider';
import Tag from '../tag';
import Stack from '../stack';
import {Text2} from '../text';

const titleFirst =
'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2Extra line 3Extra line 4';
const pretitleFirst =
'Pretitle Headline Title Subtitle Description Extra line 1Extra line 2Extra line 3Extra line 4';

test.each`
pretitleAs | titleAs | expectedLabel
${undefined} | ${undefined} | ${titleFirst}
${'h1'} | ${'h2'} | ${pretitleFirst}
${'h2'} | ${'h1'} | ${titleFirst}
`(
'AdvancedDataCard "href" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
async ({pretitleAs, titleAs, expectedLabel}) => {
render(
<ThemeContextProvider theme={makeTheme()}>
<AdvancedDataCard
href="https://example.org"
headline={<Tag type="promo">Headline</Tag>}
pretitle="Pretitle"
pretitleAs={pretitleAs}
titleAs={titleAs}
subtitle="Subtitle"
title="Title"
description="Description"
extra={[
<Stack space={4}>
<Text2 regular>Extra line 1</Text2>
<Text2 regular>Extra line 2</Text2>
</Stack>,
<Stack space={4}>
<Text2 regular>Extra line 3</Text2>
<Text2 regular>Extra line 4</Text2>
</Stack>,
]}
/>
</ThemeContextProvider>
);

await screen.findByRole('link', {name: expectedLabel});
}
);

test.each`
pretitleAs | titleAs | expectedLabel
${undefined} | ${undefined} | ${titleFirst}
${'h1'} | ${'h2'} | ${pretitleFirst}
${'h2'} | ${'h1'} | ${titleFirst}
`(
'AdvancedDataCard "to" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
async ({pretitleAs, titleAs, expectedLabel}) => {
render(
<ThemeContextProvider theme={makeTheme()}>
<AdvancedDataCard
to="/foo/bar"
headline={<Tag type="promo">Headline</Tag>}
pretitle="Pretitle"
pretitleAs={pretitleAs}
titleAs={titleAs}
subtitle="Subtitle"
title="Title"
description="Description"
extra={[
<Stack space={4}>
<Text2 regular>Extra line 1</Text2>
<Text2 regular>Extra line 2</Text2>
</Stack>,
<Stack space={4}>
<Text2 regular>Extra line 3</Text2>
<Text2 regular>Extra line 4</Text2>
</Stack>,
]}
/>
</ThemeContextProvider>
);

await screen.findByRole('link', {name: expectedLabel});
}
);

test.each`
pretitleAs | titleAs | expectedLabel
${undefined} | ${undefined} | ${titleFirst}
${'h1'} | ${'h2'} | ${pretitleFirst}
${'h2'} | ${'h1'} | ${titleFirst}
`(
'AdvancedDataCard "onPress" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
async ({pretitleAs, titleAs, expectedLabel}) => {
render(
<ThemeContextProvider theme={makeTheme()}>
<AdvancedDataCard
onPress={() => {}}
headline={<Tag type="promo">Headline</Tag>}
pretitle="Pretitle"
pretitleAs={pretitleAs}
titleAs={titleAs}
subtitle="Subtitle"
title="Title"
description="Description"
extra={[
<Stack space={4}>
<Text2 regular>Extra line 1</Text2>
<Text2 regular>Extra line 2</Text2>
</Stack>,
<Stack space={4}>
<Text2 regular>Extra line 3</Text2>
<Text2 regular>Extra line 4</Text2>
</Stack>,
]}
/>
</ThemeContextProvider>
);

await screen.findByRole('button', {name: expectedLabel});
}
);
14 changes: 7 additions & 7 deletions src/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import type {VideoElement, VideoSource} from './video';
import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
import type {ExclusifyUnion} from './utils/utility-types';

const useInnerText = () => {
export const useInnerText = (): {text: string; ref: (instance: HTMLElement | null) => void} => {
const [text, setText] = React.useState('');

const ref: React.LegacyRef<HTMLElement> = React.useCallback((node: HTMLElement) => {
Expand Down Expand Up @@ -638,7 +638,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
aria-label={isTouchable ? ariaLabel : undefined}
>
{isTouchable && <div className={styles.touchableMediaCardOverlay} />}
<div className={styles.mediaCard}>
<div className={styles.mediaCard} aria-hidden={isTouchable}>
<div style={applyCssVars({[mediaStyles.vars.mediaBorderRadius]: '0px'})}>
{media}
</div>
Expand Down Expand Up @@ -742,7 +742,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
className={styles.touchable}
aria-label={isTouchable ? ariaLabel : undefined}
>
<div className={styles.mediaCard}>
<div className={styles.mediaCard} aria-hidden={isTouchable}>
<div style={{position: 'relative'}}>
{isTouchable && (
<div
Expand Down Expand Up @@ -854,7 +854,7 @@ export const SmallNakedCard = React.forwardRef<HTMLDivElement, SmallNakedCardPro
className={styles.touchable}
aria-label={isTouchable ? ariaLabel : undefined}
>
<div className={styles.mediaCard}>
<div className={styles.mediaCard} aria-hidden={isTouchable}>
<div style={{position: 'relative'}}>
{isTouchable && (
<div
Expand Down Expand Up @@ -1014,7 +1014,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
aria-label={isTouchable ? ariaLabel : undefined}
>
{isTouchable && <div className={styles.touchableCardOverlay} />}
<div className={styles.dataCard}>
<div className={styles.dataCard} aria-hidden={isTouchable}>
<Inline space={0}>
<Stack space={16}>
{asset && (
Expand Down Expand Up @@ -1146,7 +1146,7 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
aria-label={isTouchable ? ariaLabel : undefined}
>
{isTouchable && <div className={overlayStyle} />}
<section className={styles.snapCard}>
<section className={styles.snapCard} aria-hidden={isTouchable}>
<div>
{asset && (
<div
Expand Down Expand Up @@ -1467,7 +1467,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
>
{isTouchable && <div className={overlayStyle} />}

<div className={styles.displayCardContainer}>
<div className={styles.displayCardContainer} aria-hidden={isTouchable}>
{(hasImage || hasVideo) && (
<ThemeVariant variant={isExternalInverse ? 'inverse' : 'default'}>
<div className={styles.displayCardBackground}>
Expand Down
17 changes: 17 additions & 0 deletions src/community/__stories__/advanced-data-card-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Image from '../../image';
import StackingGroup from '../../stacking-group';
import {Placeholder} from '../../placeholder';

import type {HeadingType} from '../../utils/types';
import type {TagType} from '../../tag';

export default {
Expand All @@ -17,7 +18,9 @@ type Args = {
headlineType: TagType;
headline: string;
pretitle: string;
pretitleAs: HeadingType;
title: string;
titleAs: HeadingType;
subtitle: string;
description: string;
stackingGroup: boolean;
Expand All @@ -33,7 +36,9 @@ export const Default: StoryComponent<Args> = ({
headlineType,
headline,
pretitle,
pretitleAs,
title,
titleAs,
subtitle,
description,
stackingGroup,
Expand Down Expand Up @@ -86,7 +91,9 @@ export const Default: StoryComponent<Args> = ({
}
headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
pretitle={pretitle}
pretitleAs={pretitleAs}
title={title}
titleAs={titleAs}
subtitle={subtitle}
description={description}
aria-label="aria label"
Expand All @@ -109,7 +116,9 @@ Default.args = {
headlineType: 'promo',
headline: 'headline',
pretitle: 'pretitle',
pretitleAs: 'span',
title: 'title',
titleAs: 'h3',
subtitle: 'subtitle',
description: 'description',
stackingGroup: true,
Expand Down Expand Up @@ -138,4 +147,12 @@ Default.argTypes = {
],
control: {type: 'select'},
},
pretitleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
titleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
};
5 changes: 5 additions & 0 deletions src/community/advanced-data-card.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,3 +264,8 @@ export const topActionsWithoutIcon = style({
},
},
});

export const flexColumn = style({
display: 'flex',
flexDirection: 'column',
});
Loading

0 comments on commit 804dbff

Please sign in to comment.