Add conformance and vr tests to react-progress (microsoft#25105)

* Add conformance and vr tests to react-progress

* Add Progress stories to vr tests

* remove private tag in package.json

* Update tests

* change files

* update package.json

* fix

* fix typo

* Update SPEC.md with ProgressField info

* update rtl styling and vr test

* cleanup

* Move aria props to root and update tests

* Update change/@fluentui-react-progress-0341ff0e-8632-492b-8459-66f2acc50ea6.json

Co-authored-by: Makoto Morimoto <[email protected]>

* Add test for max prop

* remove snapshot

Co-authored-by: Makoto Morimoto <[email protected]>

apps/vr-tests-react-components/package.json

@@ -35,6 +35,7 @@
     "@fluentui/react-persona": "^9.0.0",
     "@fluentui/react-popover": "^9.1.2",
     "@fluentui/react-positioning": "^9.2.0",
+    "@fluentui/react-progress": "9.0.0-alpha.0",
     "@fluentui/react-provider": "^9.1.3",
     "@fluentui/react-radio": "^9.0.7",
     "@fluentui/react-select": "9.0.0-beta.10",

apps/vr-tests-react-components/src/stories/Progress.stories.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Progress } from '@fluentui/react-progress';
+
+storiesOf('Progress converged', module)
+  .addStory('Indeterminate', () => <Progress />, {
+    includeDarkMode: true,
+    includeHighContrast: true,
+    includeRtl: true,
+  })
+  .addStory('Indeterminate with thickness large', () => <Progress thickness="large" />)
+  .addStory('Determinate', () => <Progress value={0.5} />, {
+    includeDarkMode: true,
+    includeHighContrast: true,
+    includeRtl: true,
+  })
+  .addStory('Determinate with thickness large', () => <Progress value={0.5} thickness="large" />);

change/@fluentui-react-progress-0341ff0e-8632-492b-8459-66f2acc50ea6.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Add vr and conformance tests.",
+  "packageName": "@fluentui/react-progress",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-progress/Spec.md

@@ -2,7 +2,7 @@
 
 ## Background
 
-The `Progress` component is used to display the current progress of an operation flow.
+The `Progress` component is used to display the current progress of an operation flow, or show that an operation is currently being executed.
 
 ## Prior Art
 
@@ -34,7 +34,7 @@ Basic example:
 import { Progress } from '@fluentui/react-progress';
 
 function App() {
-  return <Progress thickness="large" label="Loading" />;
+  return <Progress thickness="large" />;
 }
 ```
 
@@ -45,6 +45,28 @@ function App() {
 - Determinate Progress
   - The determinate form of the Progress component that incrementally loads from 0% to 100%
 
+#### Adding Label and Description with ProgressField
+
+There is a `ProgressField` component that adds a `label`, validation state(`success`, `warning`, `error`), and hint text to the `Progress`.
+You can use it like so:
+
+```jsx
+import * as React from 'react';
+import type { ProgressFieldProps } from '@fluentui/react-field';
+import { ProgressField } from '@fluentui/react-field';
+
+export const Default = (props: ProgressFieldProps) => (
+  <ProgressField
+    label="Example Progress field"
+    value={0.75}
+    validationState="success"
+    validationMessage="This is a success message"
+    hint="This is a hint message"
+    {...props}
+  />
+);
+```
+
 ### Shape
 
 The Progress is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point
@@ -53,28 +75,19 @@ The Progress is represented as a rounded rectangular area with an inner animated
 
 ### Slots
 
-- `root` - The root element of the Progress. The html element is a `div`
+- `root` - The root element of the Progress, which also serves as the track for the Progress bar. The html element is a `div`
 - `bar` - The div element that gets animated into a Progress bar. The html element is `div`
-- `track` - The div element that functions as the track for the Progress bar. The html element is `div`
-- `label` - The text shown above the Progress. The html element is a `span`
-- `description` - The text shown below the Progress. The html element is a `span`
 
 ### Props
 
-See API at [Progress.types.tsx](./src/components/Progress/Progress.types.ts).
+See API at [Progress.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-progress/src/components/Progress/Progress.types.ts).
 
 ## Structure
 
 ```html
 <div class="fui-Progress">
-  <!-- Label for Progress -->
-  <span className="fui-Progress__label">Loading...</span>
-  <!-- Track for Progress -->
-  <div class="fui-Progress__track" />
   <!-- Bar for Progress -->
   <div class="fui-Progess__bar" />
-  <!-- Label for Progress description -->
-  <span className="fui-Progress__description">Loading Text</span>
 </div>
 ```
 
@@ -88,7 +101,7 @@ See [MIGRATION.md](./MIGRATION.md).
 
 - **Display** - The Progress will use the following priority:
 
-  - Specifying the `percentComplete` from `0` to `1` will alter the Progress from indeterminate to determinate.
+  - Specifying the `value` prop will alter the Progress from `indeterminate` to `determinate`.
   - The component also has `rtl` support and will animate the progress bar from right to left if set.
 
 ### Interaction
@@ -103,3 +116,5 @@ The Progress is non-interactive.
 - **Touch** - Nothing
 
 ## Accessibility
+
+- The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.

packages/react-components/react-progress/src/components/Progress/Progress.test.tsx

@@ -19,10 +19,26 @@ describe('Progress', () => {
     },
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
-  it('renders a default state', () => {
-    const result = render(<Progress>Default Progress</Progress>);
-    expect(result.container).toMatchSnapshot();
+  it('has role progressbar', () => {
+    const result = render(<Progress />);
+    expect(result.getByRole('progressbar')).toBeDefined();
+  });
+  it('does not add aria attributes for indeterminate', () => {
+    const result = render(<Progress />);
+    expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toBeFalsy();
+    expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toBeFalsy();
+    expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toBeFalsy();
+  });
+  it('adds aria attributes for determinate', () => {
+    const result = render(<Progress value={0.52} />);
+    expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toEqual('0.52');
+    expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toEqual('0');
+    expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toEqual('1');
+  });
+  it('updates the max prop properly', () => {
+    const result = render(<Progress value={13} max={42} />);
+    expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toEqual('13');
+    expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toEqual('0');
+    expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toEqual('42');
   });
 });

packages/react-components/react-progress/src/components/Progress/useProgress.tsx

@@ -15,15 +15,17 @@ export const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLEl
   // Props
   const { thickness = 'medium', value, max = 1.0 } = props;
 
-  const root = getNativeElementProps('div', { ref, role: 'progressbar', ...props });
+  const root = getNativeElementProps('div', {
+    ref,
+    role: 'progressbar',
+    'aria-valuemin': value ? 0 : undefined,
+    'aria-valuemax': value ? max : undefined,
+    'aria-valuenow': value,
+    ...props,
+  });
 
   const bar = resolveShorthand(props.bar, {
     required: true,
-    defaultProps: {
-      'aria-valuemin': value ? 0 : undefined,
-      'aria-valuemax': value ? max : undefined,
-      'aria-valuenow': value,
-    },
   });
 
   const state: ProgressState = {

packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts

@@ -26,6 +26,14 @@ const indeterminateProgress = {
     left: '100%',
   },
 };
+const indeterminateProgressRTL = {
+  '100%': {
+    right: '-100%',
+  },
+  '0%': {
+    right: '100%',
+  },
+};
 
 /**
  * Styles for the root slot
@@ -86,7 +94,7 @@ const useBarStyles = makeStyles({
   },
 
   rtl: {
-    animationDirection: 'reverse',
+    animationName: indeterminateProgressRTL,
   },
 });