Skip to content

Commit 0e07d60

Browse files
author
Kubit
committed
Drawer accesibility without title
1 parent da9beff commit 0e07d60

File tree

6 files changed

+577
-1
lines changed

6 files changed

+577
-1
lines changed

‎src/components/drawer/drawerStandAlone.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ const DrawerStandAloneComponent = (
3434

3535
return (
3636
<Popover
37-
aria-labelledby={titleIdFinal}
37+
aria-label={!props.title?.content ? `${props.popover?.['aria-label']}` : undefined}
38+
aria-labelledby={props.title?.content ? titleIdFinal : undefined}
3839
aria-modal={props.open}
3940
clickOverlayClose={!blocked}
4041
dataTestId={`${props.dataTestId}Popover`}

‎src/components/drawer/stories/controlledArgtypes.ts

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import { CATEGORY_CONTROL } from '@/constants/categoryControl';
2+
import { IThemeObjectVariants } from '@/designSystem/themesObject';
3+
import { ArgTypesReturn } from '@/types';
4+
5+
import { DrawerLevelPositionTypes } from '../types';
6+
7+
export const argtypes = (variants: IThemeObjectVariants, themeSelected: string): ArgTypesReturn => {
8+
return {
9+
theme: {
10+
table: {
11+
disable: true,
12+
},
13+
},
14+
variant: {
15+
control: { type: 'select' },
16+
type: { name: 'string', required: true },
17+
description: 'Drawer variant',
18+
options: Object.keys(variants[themeSelected].DrawerVariantType || {}),
19+
table: {
20+
type: {
21+
summary: 'string',
22+
},
23+
category: CATEGORY_CONTROL.MODIFIERS,
24+
},
25+
},
26+
open: {
27+
description: 'Manage open drawer',
28+
type: { name: 'boolean', required: true },
29+
control: { type: 'boolean' },
30+
table: {
31+
type: {
32+
summary: 'boolean',
33+
},
34+
defaultValue: { summary: false },
35+
category: CATEGORY_CONTROL.MODIFIERS,
36+
},
37+
},
38+
portalId: {
39+
description: 'Identifier of portal to render drawer',
40+
type: { name: 'string' },
41+
control: { type: 'text' },
42+
table: {
43+
type: {
44+
summary: 'string',
45+
},
46+
category: CATEGORY_CONTROL.CUSTOMIZATION,
47+
},
48+
},
49+
children: {
50+
description: 'Content',
51+
type: { name: 'string', required: true },
52+
control: { type: 'text' },
53+
table: {
54+
type: {
55+
summary: 'ReactNode',
56+
},
57+
category: CATEGORY_CONTROL.CONTENT,
58+
},
59+
},
60+
footer: {
61+
description: 'Footer of the Drawer',
62+
type: { name: 'object' },
63+
control: { type: 'object' },
64+
table: {
65+
type: {
66+
summary: 'DrawerFooterType',
67+
},
68+
category: CATEGORY_CONTROL.CONTENT,
69+
},
70+
},
71+
closeIcon: {
72+
description: 'Close icon',
73+
control: { type: 'object' },
74+
type: { name: 'object' },
75+
table: {
76+
type: {
77+
summary: 'IElementOrIcon',
78+
},
79+
category: CATEGORY_CONTROL.CONTENT,
80+
},
81+
},
82+
title: {
83+
description: 'Tile of the drawer',
84+
type: { name: 'object' },
85+
control: { type: 'object' },
86+
table: {
87+
type: {
88+
summary: 'DrawerTextType',
89+
},
90+
category: CATEGORY_CONTROL.CONTENT,
91+
},
92+
},
93+
level: {
94+
description: 'Select the right or left icon depends of the value',
95+
control: { type: 'select' },
96+
type: { name: 'string', required: true },
97+
options: Object.keys(DrawerLevelPositionTypes),
98+
table: {
99+
type: {
100+
summary: 'DrawerLevelPositionTypes',
101+
detail: Object.keys(DrawerLevelPositionTypes).join(', '),
102+
},
103+
category: CATEGORY_CONTROL.MODIFIERS,
104+
},
105+
},
106+
blocked: {
107+
description: 'Block drawer',
108+
type: { name: 'boolean' },
109+
control: { type: 'boolean' },
110+
table: {
111+
type: {
112+
summary: 'boolean',
113+
},
114+
defaultValue: { summary: false },
115+
category: CATEGORY_CONTROL.MODIFIERS,
116+
},
117+
},
118+
popover: {
119+
description: 'Object with popover properties',
120+
type: { name: 'object' },
121+
control: { type: 'object' },
122+
table: {
123+
type: {
124+
summary: 'DrawerPopoverType',
125+
},
126+
category: CATEGORY_CONTROL.MODIFIERS,
127+
},
128+
},
129+
dataTestId: {
130+
description: 'String used for testing',
131+
control: { type: 'text' },
132+
type: { name: 'string' },
133+
table: {
134+
type: {
135+
summary: 'string',
136+
},
137+
category: CATEGORY_CONTROL.TESTING,
138+
},
139+
},
140+
ctv: {
141+
description: 'Object used for update variant styles',
142+
type: { name: 'object' },
143+
control: { type: 'object' },
144+
table: {
145+
type: {
146+
summary: 'object',
147+
},
148+
category: CATEGORY_CONTROL.CUSTOMIZATION,
149+
},
150+
},
151+
extraCt: {
152+
description: 'Object used for update grid styles',
153+
type: { name: 'object' },
154+
control: { type: 'object' },
155+
table: {
156+
type: {
157+
summary: 'object',
158+
},
159+
category: CATEGORY_CONTROL.CUSTOMIZATION,
160+
},
161+
},
162+
};
163+
};

‎src/components/drawer/stories/drawerControlled.stories.tsx

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import React from 'react';
3+
4+
import { ICONS } from '@/assets';
5+
import { Button } from '@/components/button';
6+
import { FooterPositionType } from '@/components/footer';
7+
import { ReplaceContent } from '@/components/storybook/replaceContent/replaceContent';
8+
import { TextComponentType } from '@/components/text';
9+
import { STYLES_NAME } from '@/constants';
10+
import { ButtonSizeType, ButtonVariantType } from '@/designSystem/kubit/components/variants';
11+
import { themesObject, variantsObject } from '@/designSystem/themesObject';
12+
13+
import { DrawerControlled as Story } from '../index';
14+
import { DrawerLevelPositionTypes, DrawerTitleComponentType } from '../types';
15+
import { argtypes } from './controlledArgtypes';
16+
17+
const themeSelected = localStorage.getItem('themeSelected') || 'kubit';
18+
19+
const meta = {
20+
title: 'Components/Containment/Drawer/DrawerControlled',
21+
component: Story,
22+
tags: ['autodocs'],
23+
argTypes: argtypes(variantsObject, themeSelected),
24+
render: ({ ...args }) => <StoryWithHooks {...args} />,
25+
parameters: {
26+
layout: 'centered',
27+
githubUrl: 'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/drawer',
28+
figmaUrl:
29+
'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-22903&mode=dev',
30+
},
31+
} satisfies Meta<typeof Story>;
32+
33+
export default meta;
34+
35+
type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
36+
37+
const StoryWithHooks = args => {
38+
const [level, setLevel] = React.useState(args.level);
39+
40+
const [open, setOpen] = React.useState(false);
41+
42+
const onClickBackFirstLevel = () => {
43+
setLevel(DrawerLevelPositionTypes.FIRST_LEVEL);
44+
};
45+
46+
return (
47+
<>
48+
<Button
49+
size={ButtonSizeType.LARGE}
50+
variant={ButtonVariantType.PRIMARY}
51+
onClick={() => setOpen(!open)}
52+
>
53+
Open Drawer
54+
</Button>
55+
<Story {...args} level={level} open={open} onClickBackFirstLevel={onClickBackFirstLevel} />
56+
</>
57+
);
58+
};
59+
60+
export const DrawerControlled: Story = {
61+
args: {
62+
variant: Object.values(variantsObject[themeSelected].DrawerVariantType || {})[0] as string,
63+
title: {
64+
content: 'Drawer title',
65+
component: DrawerTitleComponentType.H3 as unknown as TextComponentType,
66+
['aria-label']: 'aria label title',
67+
},
68+
closeIcon: { icon: ICONS.ICON_CLOSE, altText: 'alt text icon', ['aria-label']: 'close icon' },
69+
level: DrawerLevelPositionTypes.FIRST_LEVEL,
70+
open: false,
71+
children: <ReplaceContent />,
72+
blocked: false,
73+
popover: {
74+
blockBack: true,
75+
},
76+
footer: {
77+
content: [
78+
<ReplaceContent key={0} data-position={FooterPositionType.LEFT} />,
79+
<ReplaceContent key={2} data-position={FooterPositionType.RIGHT} />,
80+
],
81+
},
82+
themeArgs: themesObject[themeSelected][STYLES_NAME.DRAWER],
83+
},
84+
};
85+
86+
export const DrawerControlledWithCtv: Story = {
87+
args: {
88+
variant: Object.values(variantsObject[themeSelected].DrawerVariantType || {})[0] as string,
89+
title: {
90+
content: 'Drawer title',
91+
component: DrawerTitleComponentType.H3 as unknown as TextComponentType,
92+
['aria-label']: 'aria label title',
93+
},
94+
closeIcon: { icon: ICONS.ICON_CLOSE, altText: 'alt text icon', ['aria-label']: 'close icon' },
95+
level: DrawerLevelPositionTypes.FIRST_LEVEL,
96+
open: false,
97+
children: <ReplaceContent />,
98+
blocked: false,
99+
popover: {
100+
blockBack: true,
101+
},
102+
footer: {
103+
content: [
104+
<ReplaceContent key={0} data-position={FooterPositionType.LEFT} />,
105+
<ReplaceContent key={2} data-position={FooterPositionType.RIGHT} />,
106+
],
107+
},
108+
ctv: {
109+
DESKTOP: {
110+
title: {
111+
color: 'red',
112+
},
113+
},
114+
TABLET: {
115+
title: {
116+
color: 'red',
117+
},
118+
},
119+
MOBILE: {
120+
title: {
121+
color: 'red',
122+
},
123+
},
124+
},
125+
},
126+
};

0 commit comments

Comments
 (0)