Skip to content

Commit

Permalink
feat(Header, Cards, Hero, CoverHero): improve a11y (#1292)
Browse files Browse the repository at this point in the history 
Issues:
- [WEB-2087](https://jira.tid.es/browse/WEB-2087)
- [WEB-2107](https://jira.tid.es/browse/WEB-2107)
  • Loading branch information
@marcoskolodny
marcoskolodny authored Nov 26, 2024
1 parent c4a0749 commit cdcf2fc
Show file tree
Hide file tree
Showing 30 changed files with 1,485 additions and 575 deletions.
17 changes: 17 additions & 0 deletions src/__stories__/cover-hero-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import usingVrImg from './images/using-vr.jpg';
import beachImg from './images/beach.jpg';
import beachVideo from './videos/beach.mp4';

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

export default {
Expand All @@ -30,7 +31,9 @@ type Args = {
headlineType: TagType;
headline: string;
pretitle: string;
pretitleAs: HeadingType;
title: string;
titleAs: HeadingType;
description: string;
extra: boolean;
sideExtra: boolean;
Expand All @@ -56,7 +59,9 @@ export const Default: StoryComponent<Args> = ({
headlineType,
headline,
pretitle,
pretitleAs,
title,
titleAs,
description,
extra,
sideExtra,
Expand Down Expand Up @@ -92,7 +97,9 @@ export const Default: StoryComponent<Args> = ({
dataAttributes={{testid: 'cover-hero'}}
headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
pretitle={pretitle}
pretitleAs={pretitleAs}
title={title}
titleAs={titleAs}
description={description}
extra={extra ? <Placeholder /> : undefined}
sideExtra={sideExtra ? <Placeholder /> : undefined}
Expand All @@ -118,7 +125,9 @@ Default.args = {
headlineType: 'promo',
headline: 'Hero',
pretitle: 'Pretitle',
pretitleAs: 'span',
title: 'Title',
titleAs: 'h1',
description: 'This is a long description with a long text to see how this works',
extra: false,
sideExtra: false,
Expand Down Expand Up @@ -197,6 +206,14 @@ Default.argTypes = {
},
},
},
pretitleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
titleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
};

export const CoverHeroInSlideshow: StoryComponent = () => (
Expand Down
17 changes: 17 additions & 0 deletions src/__stories__/data-card-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
import {Placeholder} from '../placeholder';
import avatarImg from './images/avatar.jpg';

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

Expand All @@ -29,7 +30,9 @@ type DataCardArgs = {
headlineType: TagType;
headline: string;
pretitle: string;
pretitleAs: HeadingType;
title: string;
titleAs: HeadingType;
subtitle: string;
description: string;
ariaLabel: string;
Expand All @@ -47,7 +50,9 @@ export const Default: StoryComponent<DataCardArgs> = ({
headline,
headlineType,
pretitle,
pretitleAs,
title,
titleAs,
subtitle,
description,
ariaLabel,
Expand Down Expand Up @@ -99,7 +104,9 @@ export const Default: StoryComponent<DataCardArgs> = ({
asset={assetElement}
headline={headline && <Tag type={headlineType}>{headline}</Tag>}
pretitle={pretitle}
pretitleAs={pretitleAs}
title={title}
titleAs={titleAs}
subtitle={subtitle}
description={description}
extra={extra ? <Placeholder /> : undefined}
Expand Down Expand Up @@ -142,7 +149,9 @@ Default.args = {
headlineType: 'promo',
headline: 'Priority',
pretitle: 'Pretitle',
pretitleAs: 'span',
title: 'Title',
titleAs: 'h3',
subtitle: 'Subtitle',
description: 'This is a description for the card',
extra: false,
Expand Down Expand Up @@ -177,6 +186,14 @@ Default.argTypes = {
},
},
},
pretitleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
titleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
};

export const Group: StoryComponent = () => {
Expand Down
17 changes: 17 additions & 0 deletions src/__stories__/display-data-card-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
import {Placeholder} from '../placeholder';
import avatarImg from './images/avatar.jpg';

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

Expand All @@ -32,7 +33,9 @@ type DisplayDataCardArgs = {
headlineType: TagType;
headline: string;
pretitle: string;
pretitleAs: HeadingType;
title: string;
titleAs: HeadingType;
description: string;
extra: boolean;
closable: boolean;
Expand All @@ -57,7 +60,9 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
headline,
headlineType,
pretitle,
pretitleAs,
title,
titleAs,
description,
extra,
actions = 'button',
Expand Down Expand Up @@ -141,7 +146,9 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
asset={assetElement}
headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
pretitle={pretitle}
pretitleAs={pretitleAs}
title={title}
titleAs={titleAs}
description={description}
aspectRatio={aspectRatioValue as AspectRatio}
extra={extra ? <Placeholder /> : undefined}
Expand All @@ -158,7 +165,9 @@ Default.args = {
headlineType: 'promo',
headline: 'Priority',
pretitle: 'Pretitle',
pretitleAs: 'span',
title: 'Title',
titleAs: 'h3',
description: 'This is a description for the card',
extra: false,
actions: 'button',
Expand Down Expand Up @@ -201,6 +210,14 @@ Default.argTypes = {
},
},
},
pretitleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
titleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
};

export const Group: StoryComponent = () => {
Expand Down
17 changes: 17 additions & 0 deletions src/__stories__/display-media-card-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import avatarImg from './images/avatar.jpg';
import beachVideo from './videos/beach.mp4';
import beachImg from './images/beach.jpg';

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

export default {
Expand All @@ -39,7 +40,9 @@ type DisplayMediaCardArgs = {
background: 'image' | 'video';
headline: string;
pretitle: string;
pretitleAs: HeadingType;
title: string;
titleAs: HeadingType;
description: string;
extra: boolean;
closable: boolean;
Expand All @@ -65,7 +68,9 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
headlineType,
background,
pretitle,
pretitleAs,
title,
titleAs,
description,
extra,
actions = 'button',
Expand Down Expand Up @@ -153,7 +158,9 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
asset={assetElement}
headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
pretitle={pretitle}
pretitleAs={pretitleAs}
title={title}
titleAs={titleAs}
description={description}
{...interactiveActions}
aria-label="Display media card label"
Expand All @@ -174,7 +181,9 @@ Default.args = {
background: 'image',
headline: 'Priority',
pretitle: 'Pretitle',
pretitleAs: 'span',
title: 'Title',
titleAs: 'h3',
description: 'This is a description for the card',
extra: false,
actions: 'button',
Expand Down Expand Up @@ -215,6 +224,14 @@ Default.argTypes = {
options: ['1:1', '16:9', '7:10', '9:10', 'auto'],
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'},
},
};
Default.parameters = {fullScreen: true};

Expand Down
17 changes: 17 additions & 0 deletions src/__stories__/hero-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import usingVrImg from './images/using-vr.jpg';
import beachImg from './images/beach.jpg';
import beachVideo from './videos/beach.mp4';

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

Expand All @@ -19,7 +20,9 @@ type HeroArgs = {
headlineType: TagType;
headline: string;
pretitle: string;
pretitleAs: HeadingType;
title: string;
titleAs: HeadingType;
description: string;
extra: boolean;
actions: 'button' | 'link' | 'button and link';
Expand All @@ -36,7 +39,9 @@ export const Default: StoryComponent<HeroArgs> = ({
headline,
headlineType,
pretitle,
pretitleAs,
title,
titleAs,
description,
actions,
desktopMediaPosition,
Expand Down Expand Up @@ -65,7 +70,9 @@ export const Default: StoryComponent<HeroArgs> = ({
media={mediaComponent}
headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
pretitle={pretitle}
pretitleAs={pretitleAs}
title={title}
titleAs={titleAs}
description={description}
extra={extra ? <Placeholder /> : undefined}
button={button}
Expand All @@ -85,7 +92,9 @@ Default.args = {
headlineType: 'promo',
headline: 'Hero',
pretitle: 'Pretitle',
pretitleAs: 'span',
title: 'Title',
titleAs: 'h1',
description: 'This is a long description with a long text to see how this works',
extra: false,
actions: 'button and link',
Expand Down Expand Up @@ -128,4 +137,12 @@ Default.argTypes = {
},
},
},
pretitleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
titleAs: {
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
};
17 changes: 17 additions & 0 deletions src/__stories__/media-card-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import tennisImg from './images/tennis.jpg';
import beachVideo from './videos/beach.mp4';
import avatarImg from './images/avatar.jpg';

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

export default {
Expand All @@ -36,7 +37,9 @@ type Args = {
headlineType: TagType;
headline: string;
pretitle: string;
pretitleAs: HeadingType;
title: string;
titleAs: HeadingType;
subtitle: string;
description: string;
extra: boolean;
Expand All @@ -50,7 +53,9 @@ export const Default: StoryComponent<Args> = ({
headline,
headlineType,
pretitle,
pretitleAs,
title,
titleAs,
subtitle,
description,
actions = 'button',
Expand Down Expand Up @@ -99,7 +104,9 @@ export const Default: StoryComponent<Args> = ({
dataAttributes={{testid: 'media-card'}}
headline={headline && <Tag type={headlineType}>{headline}</Tag>}
pretitle={pretitle}
pretitleAs={pretitleAs}
title={title}
titleAs={titleAs}
subtitle={subtitle}
description={description}
asset={assetElement}
Expand Down Expand Up @@ -153,7 +160,9 @@ Default.args = {
headlineType: 'promo',
headline: 'Priority',
pretitle: 'Pretitle',
pretitleAs: 'span',
title: 'Title',
titleAs: 'h3',
subtitle: 'Subtitle',
description: 'This is a description for the card',
extra: false,
Expand All @@ -179,6 +188,14 @@ Default.argTypes = {
options: ['button', 'link', 'button and link', 'onPress', 'href', 'to', 'none'],
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'},
},
};

export const Group: StoryComponent = () => {
Expand Down
Loading

1 comment on commit cdcf2fc

@github-actions
Copy link

Choose a reason for hiding this comment

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

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-g22s2yuk3-flows-projects-65bb050e.vercel.app

Built with commit cdcf2fc.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.