RocketChat · tassoevan · Aug 7, 2024 · Jul 12, 2024 · Aug 7, 2024 · Aug 7, 2024
diff --git a/packages/ui-video-conf/.jest/setup.ts b/packages/ui-video-conf/.jest/setup.ts
@@ -0,0 +1,3 @@
+import { toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
diff --git a/packages/ui-video-conf/.storybook/main.js b/packages/ui-video-conf/.storybook/main.js
@@ -1,7 +1,7 @@
 /** @type {import('@storybook/react/types').StorybookConfig} */
 module.exports = {
 	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-	addons: ['@storybook/addon-essentials'],
+	addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
 	framework: '@storybook/react',
 	features: {
 		postcss: false,

diff --git a/packages/ui-video-conf/.storybook/preview.js b/packages/ui-video-conf/.storybook/preview.js
@@ -1,5 +1,6 @@
 import '../../../apps/meteor/app/theme/client/main.css';
 import 'highlight.js/styles/github.css';
+import '@rocket.chat/icons/dist/rocketchat.css';
 
 export const parameters = {
 	actions: { argTypesRegex: '^on[A-Z].*' },

diff --git a/packages/ui-video-conf/jest.config.js b/packages/ui-video-conf/jest.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+	preset: 'ts-jest/presets/js-with-babel',
+	errorOnDeprecated: true,
+	testMatch: ['<rootDir>/src/**/*.spec.{ts,tsx}'],
+	testEnvironment: 'jsdom',
+	setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', '<rootDir>/.jest/setup.ts'],
+};
diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json
@@ -12,20 +12,24 @@
 		"@rocket.chat/styled": "~0.31.25",
 		"@rocket.chat/ui-avatar": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
+		"@storybook/addon-a11y": "^6.5.16",
 		"@storybook/addon-actions": "~6.5.16",
 		"@storybook/addon-docs": "~6.5.16",
 		"@storybook/addon-essentials": "~6.5.16",
 		"@storybook/builder-webpack4": "~6.5.16",
 		"@storybook/manager-webpack4": "~6.5.16",
 		"@storybook/react": "~6.5.16",
 		"@storybook/testing-library": "~0.0.13",
+		"@storybook/testing-react": "~1.3.0",
 		"@types/babel__core": "~7.20.3",
 		"@types/jest": "~29.5.12",
+		"@types/jest-axe": "^3.5.9",
 		"eslint": "~8.45.0",
 		"eslint-plugin-react": "~7.32.2",
 		"eslint-plugin-react-hooks": "~4.6.0",
 		"eslint-plugin-storybook": "~0.6.15",
 		"jest": "~29.7.0",
+		"jest-axe": "^9.0.0",
 		"react-docgen-typescript-plugin": "~1.0.5",
 		"ts-jest": "~29.1.1",
 		"typescript": "~5.3.3"

diff --git a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx
@@ -0,0 +1,21 @@
+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './VideoConfButton.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+describe('[VideoConfButton Rendering]', () => {
+	test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+		const tree = render(<Story />);
+		expect(tree.baseElement).toMatchSnapshot();
+	});
+
+	test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+		const { container } = render(<Story />);
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});
diff --git a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx
@@ -0,0 +1,10 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import VideoConfButton from './VideoConfButton';
+
+export default {
+	title: 'Components/VideoConfButton',
+	component: VideoConfButton,
+} as ComponentMeta<typeof VideoConfButton>;
+
+export const Default: ComponentStory<typeof VideoConfButton> = () => <VideoConfButton>Button</VideoConfButton>;
diff --git a/...ges/ui-video-conf/src/VideoConfButton.tsx → ...f/src/VideoConfButton/VideoConfButton.tsx b/...ges/ui-video-conf/src/VideoConfButton.tsx → ...f/src/VideoConfButton/VideoConfButton.tsx
diff --git a/packages/ui-video-conf/src/VideoConfButton/__snapshots__/VideoConfButton.spec.tsx.snap b/packages/ui-video-conf/src/VideoConfButton/__snapshots__/VideoConfButton.spec.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[VideoConfButton Rendering] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <button
+      class="rcx-box rcx-box--full rcx-button rcx-css-1qcz93u"
+      type="button"
+    >
+      <span
+        class="rcx-button--content"
+      >
+        Button
+      </span>
+    </button>
+  </div>
+</body>
+`;
diff --git a/packages/ui-video-conf/src/VideoConfButton/index.ts b/packages/ui-video-conf/src/VideoConfButton/index.ts
@@ -0,0 +1 @@
+export { default } from './VideoConfButton';
diff --git a/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx b/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx
@@ -0,0 +1,21 @@
+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './VideoConfController.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+describe('[VideoConfController Rendering]', () => {
+	test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+		const tree = render(<Story />);
+		expect(tree.baseElement).toMatchSnapshot();
+	});
+
+	test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+		const { container } = render(<Story />);
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});
diff --git a/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx b/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx
@@ -0,0 +1,14 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import VideoConfController from './VideoConfController';
+
+export default {
+	title: 'Components/VideoConfController',
+	component: VideoConfController,
+} as ComponentMeta<typeof VideoConfController>;
+
+export const Default: ComponentStory<typeof VideoConfController> = (args) => <VideoConfController {...args} />;
+Default.args = {
+	'icon': 'info',
+	'aria-label': 'info',
+};
diff --git a/...ui-video-conf/src/VideoConfController.tsx → ...deoConfController/VideoConfController.tsx b/...ui-video-conf/src/VideoConfController.tsx → ...deoConfController/VideoConfController.tsx
@@ -1,5 +1,4 @@
 import { IconButton } from '@rocket.chat/fuselage';
-import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
 import type { ReactElement, ButtonHTMLAttributes } from 'react';
 
@@ -11,21 +10,16 @@ type VideoConfControllerProps = {
 	small?: boolean;
 } & Omit<ButtonHTMLAttributes<HTMLElement>, 'ref' | 'is' | 'className' | 'size' | 'elevation'>;
 
-const VideoConfController = ({ icon, active, secondary, disabled, small = true, ...props }: VideoConfControllerProps): ReactElement => {
-	const id = useUniqueId();
-
-	return (
-		<IconButton
-			aria-live='assertive'
-			small={small}
-			icon={icon}
-			id={id}
-			info={active}
-			disabled={disabled}
-			secondary={secondary || active || disabled}
-			{...props}
-		/>
-	);
-};
+const VideoConfController = ({ icon, active, secondary, disabled, small = true, ...props }: VideoConfControllerProps): ReactElement => (
+	<IconButton
+		aria-live='assertive'
+		small={small}
+		icon={icon}
+		info={active}
+		disabled={disabled}
+		secondary={secondary || active || disabled}
+		{...props}
+	/>
+);
 
 export default VideoConfController;
diff --git a/...ges/ui-video-conf/src/VideoConfController/__snapshots__/VideoConfController.spec.tsx.snap b/...ges/ui-video-conf/src/VideoConfController/__snapshots__/VideoConfController.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[VideoConfController Rendering] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <button
+      aria-label="info"
+      aria-live="assertive"
+      class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button"
+      type="button"
+    >
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-css-4pvxx3"
+      >
+        
+      </i>
+    </button>
+  </div>
+</body>
+`;
diff --git a/packages/ui-video-conf/src/VideoConfController/index.ts b/packages/ui-video-conf/src/VideoConfController/index.ts
@@ -0,0 +1 @@
+export { default } from './VideoConfController';
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx
@@ -0,0 +1,21 @@
+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './VideoConfMessage.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+describe('[VideoConfMessage Rendering]', () => {
+	test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+		const tree = render(<Story />);
+		expect(tree.baseElement).toMatchSnapshot();
+	});
+
+	test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+		const { container } = render(<Story />);
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
@@ -2,7 +2,6 @@ import { MessageDivider, Message, Avatar, Box } from '@rocket.chat/fuselage';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import type { ReactElement } from 'react';
 
-import '@rocket.chat/icons/dist/rocketchat.css';
 import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.';
 import VideoConfMessageAction from './VideoConfMessageAction';
 import VideoConfMessageActions from './VideoConfMessageActions';
@@ -22,7 +21,7 @@ export default {
 				<MessageDivider>May, 24, 2020</MessageDivider>
 				<Message className='customclass'>
 					<Message.LeftContainer>
-						<Avatar url={avatarUrl} size='x36' />
+						<Avatar alt='' url={avatarUrl} size='x36' />
 					</Message.LeftContainer>
 					<Message.Container>
 						<Message.Header>
@@ -54,7 +53,7 @@ export const CallingDM: ComponentStory<typeof VideoConfMessage> = () => (
 				<VideoConfMessageText>Calling...</VideoConfMessageText>
 			</VideoConfMessageContent>
 			<VideoConfMessageActions>
-				<VideoConfMessageAction icon='info' />
+				<VideoConfMessageAction aria-label='info' icon='info' />
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>
@@ -72,7 +71,7 @@ export const CallEndedDM: ComponentStory<typeof VideoConfMessage> = () => (
 				<VideoConfMessageText>Call ended</VideoConfMessageText>
 			</VideoConfMessageContent>
 			<VideoConfMessageActions>
-				<VideoConfMessageAction icon='info' />
+				<VideoConfMessageAction aria-label='info' icon='info' />
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>
@@ -90,7 +89,7 @@ export const CallOngoing: ComponentStory<typeof VideoConfMessage> = () => (
 				<VideoConfMessageText>Call ongoing</VideoConfMessageText>
 			</VideoConfMessageContent>
 			<VideoConfMessageActions>
-				<VideoConfMessageAction icon='info' />
+				<VideoConfMessageAction aria-label='info' icon='info' />
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>
@@ -109,7 +108,7 @@ export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
 				<VideoConfMessageText>Call ended</VideoConfMessageText>
 			</VideoConfMessageContent>
 			<VideoConfMessageActions>
-				<VideoConfMessageAction icon='info' />
+				<VideoConfMessageAction aria-label='info' icon='info' />
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>

diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { AllHTMLAttributes, ReactElement } from 'react';
 
-const VideoConfMessage = ({ ...props }): ReactElement => (
+const VideoConfMessage = (props: Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>): ReactElement => (
 	<Box
 		mbs={4}
 		color='default'
@@ -10,7 +10,7 @@ const VideoConfMessage = ({ ...props }): ReactElement => (
 		borderWidth={1}
 		borderColor='extra-light'
 		borderRadius='x4'
-		className='rcx-videoconf-message-block'
+		rcx-videoconf-message-block
 		{...props}
 	/>
 );

diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx
@@ -2,6 +2,6 @@ import { IconButton } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement } from 'react';
 
 const VideoConfMessageAction = ({ icon = 'info', ...props }: ComponentProps<typeof IconButton>): ReactElement => (
-	<IconButton icon={icon} small {...props} />
+	<IconButton {...props} icon={icon} small />
 );
 export default VideoConfMessageAction;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageActions.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageActions.tsx
@@ -2,7 +2,7 @@ import { ButtonGroup } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement } from 'react';
 
 const VideoConfMessageActions = ({ children, ...props }: ComponentProps<typeof ButtonGroup>): ReactElement => (
-	<ButtonGroup align='end' {...props}>
+	<ButtonGroup {...props} align='end'>
 		{children}
 	</ButtonGroup>
 );

diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx
@@ -1,15 +1,10 @@
-import { Box, Button } from '@rocket.chat/fuselage';
-import type { AllHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { Button } from '@rocket.chat/fuselage';
+import type { AllHTMLAttributes, ReactElement } from 'react';
 
 const VideoConfMessageButton = ({
-	children,
 	primary,
 	...props
-}: { children: ReactNode; primary?: boolean } & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>): ReactElement => (
-	<Box mi={4}>
-		<Button small primary={primary} {...props}>
-			{children}
-		</Button>
-	</Box>
+}: { primary?: boolean } & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>): ReactElement => (
+	<Button {...props} mi={4} small primary={primary} />
 );
 export default VideoConfMessageButton;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageContent.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageContent.tsx
@@ -1,6 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { AllHTMLAttributes, ReactElement } from 'react';
 
-const VideoConfMessageContent = ({ ...props }): ReactElement => <Box display='flex' alignItems='center' {...props} />;
+const VideoConfMessageContent = (props: Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>): ReactElement => (
+	<Box display='flex' alignItems='center' {...props} />
+);
 
 export default VideoConfMessageContent;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx
@@ -1,9 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement, ReactNode } from 'react';
+import type { AllHTMLAttributes, ReactElement } from 'react';
 
 import VideoConfMessageRow from './VideoConfMessageRow';
 
-const VideoConfMessageFooter = ({ children, ...props }: { children: ReactNode }): ReactElement => (
+const VideoConfMessageFooter = ({ children, ...props }: Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>): ReactElement => (
 	<VideoConfMessageRow backgroundColor='tint' {...props}>
 		<Box mi='neg-x4' display='flex' alignItems='center'>
 			{children}

diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement, ReactNode } from 'react';
+import type { AllHTMLAttributes, ReactElement } from 'react';
 
-const VideoConfMessageFooterText = ({ children }: { children: ReactNode }): ReactElement => (
-	<Box fontScale='c1' mi={4}>
+const VideoConfMessageFooterText = ({ children, ...props }: Omit<AllHTMLAttributes<HTMLParagraphElement>, 'is'>): ReactElement => (
+	<Box {...props} is='p' fontScale='c1' mi={4}>
 		{children}
 	</Box>
 );

diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx
@@ -1,6 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 
-const VideoConfMessageRow = ({ ...props }): ReactElement => <Box p={16} display='flex' justifyContent='space-between' {...props} />;
+type VideoConfMessageRowProps = ComponentProps<typeof Box>;
+
+const VideoConfMessageRow = (props: VideoConfMessageRowProps): ReactElement => (
+	<Box p={16} display='flex' justifyContent='space-between' {...props} />
+);
 
 export default VideoConfMessageRow;