Calling sample - add radio group and text field labels in home page

samples/Calling/src/app/styles/DisplayNameField.styles.ts

@@ -4,9 +4,6 @@
 import { mergeStyles } from '@fluentui/react';
 
 export const TextFieldStyleProps = {
-  wrapper: {
-    height: '2.3rem'
-  },
   fieldGroup: {
     height: '2.3rem'
   }

samples/Calling/src/app/styles/HomeScreen.styles.ts

@@ -35,6 +35,9 @@ export const configContainerStackTokens: IStackTokens = {
 export const callContainerStackTokens: IStackTokens = {
   childrenGap: '0.75rem'
 };
+export const callOptionsGroupStyles = {
+  label: { padding: 0 }
+};
 export const headerStyle = mergeStyles({
   fontWeight: 600,
   fontSize: '1.25rem', // 20px

samples/Calling/src/app/views/DisplayNameField.tsx

@@ -15,6 +15,11 @@ interface DisplayNameFieldProps {
   validateName?(): void;
 }
 
+const TEXTFIELD_LABEL = 'Display name';
+const TEXTFIELD_ID = 'displayName';
+const TEXTFIELD_PLACEHOLDER = 'Enter a name';
+const TEXTFIELD_EMPTY_ERROR_MSG = 'Name cannot be empty';
+
 export const DisplayNameField = (props: DisplayNameFieldProps): JSX.Element => {
   const { setName, setEmptyWarning, isEmpty, defaultName, validateName } = props;
 
@@ -37,18 +42,19 @@ export const DisplayNameField = (props: DisplayNameFieldProps): JSX.Element => {
       autoComplete="off"
       defaultValue={defaultName}
       inputClassName={inputBoxTextStyle}
-      ariaLabel="Choose your name"
+      label={TEXTFIELD_LABEL}
+      required={true}
       className={inputBoxStyle}
       onChange={onNameTextChange}
-      id="displayName"
-      placeholder="Enter a name"
+      id={TEXTFIELD_ID}
+      placeholder={TEXTFIELD_PLACEHOLDER}
       onKeyDown={(ev) => {
         if (ev.which === ENTER_KEY) {
           validateName && validateName();
         }
       }}
       styles={TextFieldStyleProps}
-      errorMessage={isEmpty ? 'Name cannot be empty' : undefined}
+      errorMessage={isEmpty ? TEXTFIELD_EMPTY_ERROR_MSG : undefined}
     />
   );
 };

samples/Calling/src/app/views/HomeScreen.tsx

@@ -8,6 +8,7 @@ import {
   imgStyle,
   infoContainerStyle,
   callContainerStackTokens,
+  callOptionsGroupStyles,
   configContainerStyle,
   configContainerStackTokens,
   containerStyle,
@@ -30,6 +31,7 @@ export interface HomeScreenProps {
 export const HomeScreen = (props: HomeScreenProps): JSX.Element => {
   const imageProps = { src: heroSVG.toString() };
   const headerTitle = props.joiningExistingCall ? 'Join Call' : 'Start or join a call';
+  const callOptionsGroupLabel = 'Select a call option';
   const buttonText = 'Next';
   const callOptions: IChoiceGroupOption[] = [
     { key: 'ACSCall', text: 'Start a call' },
@@ -64,6 +66,8 @@ export const HomeScreen = (props: HomeScreenProps): JSX.Element => {
           <Stack tokens={callContainerStackTokens}>
             {!props.joiningExistingCall && (
               <ChoiceGroup
+                styles={callOptionsGroupStyles}
+                label={callOptionsGroupLabel}
                 defaultSelectedKey="ACSCall"
                 options={callOptions}
                 required={true}