chore: Use FieldHint instead of FieldDescription on create modals (RocketChat#36909)

Author: dougfabris

apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateChannelModal.tsx

@@ -11,7 +11,6 @@ import {
 	FieldRow,
 	FieldError,
 	FieldHint,
-	FieldDescription,
 	Accordion,
 	AccordionItem,
 	ModalHeader,
@@ -315,7 +314,7 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
 										)}
 									/>
 								</FieldRow>
-								<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, encrypted })}</FieldDescription>
+								<FieldHint id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, encrypted })}</FieldHint>
 							</Field>
 							<Field>
 								<FieldRow>

apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateTeamModal.tsx

@@ -10,7 +10,6 @@ import {
 	FieldLabel,
 	FieldRow,
 	FieldError,
-	FieldDescription,
 	FieldHint,
 	Accordion,
 	AccordionItem,
@@ -241,9 +240,9 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 								)}
 							/>
 						</FieldRow>
-						<FieldDescription id={`${privateId}-hint`}>
+						<FieldHint id={`${privateId}-hint`}>
 							{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}
-						</FieldDescription>
+						</FieldHint>
 					</Field>
 				</FieldGroup>
 				<Accordion>
@@ -270,7 +269,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 										)}
 									/>
 								</FieldRow>
-								<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, encrypted })}</FieldDescription>
+								<FieldHint id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, encrypted })}</FieldHint>
 							</Field>
 							<Field>
 								<FieldRow>
@@ -290,9 +289,9 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 										)}
 									/>
 								</FieldRow>
-								<FieldDescription id={`${readOnlyId}-hint`}>
+								<FieldHint id={`${readOnlyId}-hint`}>
 									{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')}
-								</FieldDescription>
+								</FieldHint>
 							</Field>
 							<Field>
 								<FieldRow>
@@ -311,7 +310,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 										)}
 									/>
 								</FieldRow>
-								{broadcast && <FieldDescription id={`${broadcastId}-hint`}>{t('Teams_New_Broadcast_Description')}</FieldDescription>}
+								{broadcast && <FieldHint id={`${broadcastId}-hint`}>{t('Teams_New_Broadcast_Description')}</FieldHint>}
 							</Field>
 						</FieldGroup>
 					</AccordionItem>

apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.spec.tsx

@@ -1,8 +1,28 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
 import CreateChannelModal from './CreateChannelModal';
+import * as stories from './CreateChannelModal.stories';
 import { testCreateChannelModal } from '../../../NavBarV2/NavBarPagesGroup/actions/testCreateChannelModal';
 
 jest.mock('../../../lib/utils/goToRoomById', () => ({
 	goToRoomById: jest.fn(),
 }));
 
 testCreateChannelModal(CreateChannelModal);
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />, { wrapper: mockAppRoot().build() });
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import CreateChanelModal from './CreateChannelModal';
+import CreateChannelModalV2 from '../../../NavBarV2/NavBarPagesGroup/actions/CreateChannelModal';
+
+export default {
+	title: 'views/sidebar/CreateChanelModal',
+	component: CreateChanelModal,
+} satisfies Meta<typeof CreateChanelModal>;
+
+export const Default: StoryFn<typeof CreateChanelModal> = (args) => <CreateChanelModal {...args} />;
+export const DefaultVersion2: StoryFn<typeof CreateChannelModalV2> = (args) => <CreateChannelModalV2 {...args} />;

apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx

@@ -12,7 +12,6 @@ import {
 	FieldRow,
 	FieldError,
 	FieldHint,
-	FieldDescription,
 	Accordion,
 	AccordionItem,
 	ModalHeader,
@@ -311,7 +310,7 @@ const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload }: CreateCh
 										)}
 									/>
 								</FieldRow>
-								<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, encrypted })}</FieldDescription>
+								<FieldHint id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, encrypted })}</FieldHint>
 							</Field>
 							<Field>
 								<FieldRow>