Fix 400%/320px reflow and title accessibility of survey (#6021)

* Ensure survey page is 400%/320px Reflow compliant

* Add aria-level attribute to survey title for improved accessibility

* Change files

Author: mgamis-msft

change/@azure-communication-react-6ad819a7-8aa1-4783-b100-96b8227cded7.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "End-call survey",
+  "comment": "Ensure survey page is 400%/320px Reflow compliant and add aria-level attribute to survey title for improved accessibility",
+  "packageName": "@azure/communication-react",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/pages/SurveyPage.tsx

@@ -69,7 +69,15 @@ export interface SurveyPageProps {
 export function SurveyPage(props: SurveyPageProps): JSX.Element {
   const handlers = useHandlers(Survey);
   return (
-    <Stack verticalFill verticalAlign="center" horizontalAlign="center" data-ui-id={props.dataUiId} aria-atomic>
+    <Stack
+      verticalFill
+      verticalAlign="center"
+      horizontalAlign="center"
+      data-ui-id={props.dataUiId}
+      aria-atomic
+      // Ensure the survey page resizes correctly in CallComposite when the viewport size changes
+      styles={{ root: { contain: 'inline-size' } }}
+    >
       <Stack className={mergeStyles(containerStyle)} tokens={containerItemGap}>
         <Survey
           {...handlers}

packages/react-composites/src/composites/CallComposite/styles/CallComposite.styles.ts

@@ -15,7 +15,7 @@ const mainScreenContainerStyle: IStyle = {
  */
 export const mainScreenContainerStyleDesktop = mergeStyles({
   ...mainScreenContainerStyle,
-  minWidth: '20rem', // max of min-width of composite pages (Call page) 400% zoom compliant size
+  minWidth: 'min(20rem, calc(100vw - 1rem))', // 400% zoom compliant, accounts for potential vertical scrollbar
   minHeight: '16rem' // max height of min-height of composite pages (Configuration page) 400% zoom compliant size
 });
 

packages/react-composites/src/composites/common/Survey.tsx

@@ -83,7 +83,7 @@ export const Survey = (props: {
       )}
       {!showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (
         <Stack verticalAlign="center" className={surveyContainerStyle(!!isMobile)}>
-          <Text className={questionTextStyle(theme)} role="heading">
+          <Text className={questionTextStyle(theme)} role="heading" aria-level={1}>
             {strings.surveyTitle}
           </Text>
           <SurveyContent