docs: Improve the "accessible" example of loading dots (Workday#2673)

The Soap400 color for the `LoadingDots` component does not meet WCAG guidelines for non-text contrast while used on light background colors. For this example, I used a darker background color that allows Soap400 to meet the minimum 3:1 contrast ratio. I also added better screen reader support with the `AriaLiveRegion` component that both lets users know about the loading status, and when loading has completed.

[category:Documentation]

Release Note:
Accessible `LoadingDots` example has been updated, by changing background to a darker color that allows `soap400` to meet the minimum 3:1 contrast ratio and adding better screen reader support with the `AriaLiveRegion` component.

Co-authored-by: @RayRedGoose <[email protected]>
Co-authored-by: @NicholasBoll <[email protected]>

modules/react/loading-dots/stories/LoadingDots.stories.mdx

@@ -29,7 +29,19 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={RTL} />
 
-### Accessible Example
+### Adding screen reader support to loading animations
+
+Sometimes, letting users know when content has finished loading is just as important as asking users
+to "please wait" while content is loading. The disappearance of an animation is information that
+might need description. In this example, we are using `AriaLiveRegion` and `AccessibleHide`
+components included in Canvas to describe both the appearance and disappearance of `LoadingDots`.
+
+- When idle, render an empty live region
+- When loading, render `LoadingDots` inside the live region,
+- When complete, render `AccessibleHide` inside the live region expressing "Complete!"
+- We can assign a name to `AriaLiveRegion` component by passing in `aria-label="Loading"`
+- We can declare `LoadingDots` a labeled graphic by passing `role="img"` and
+  `aria-label="Please wait..."` into the component
 
 <ExampleCodeBlock code={Accessible} />
 

modules/react/loading-dots/stories/examples/Accessible.tsx

@@ -1,6 +1,44 @@
 import React from 'react';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
+import {base, system} from '@workday/canvas-tokens-web';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+
+const loadingStyles = createStyles({
+  backgroundColor: base.licorice300,
+  padding: system.space.x3,
+});
 
 export const Accessible = () => {
-  return <LoadingDots aria-live="polite" aria-label="Loading Users" />;
+  const [loadingState, setLoadingState] = React.useState('idle');
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (loadingState === 'loading') {
+        setLoadingState('success');
+      }
+    }, 4000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [loadingState]);
+
+  const handleLoad = () => {
+    setLoadingState('loading');
+  };
+
+  return (
+    <Flex gap={cssVar(system.space.x4)}>
+      <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
+      <AriaLiveRegion aria-label="Loading">
+        {loadingState === 'loading' && (
+          <LoadingDots className={loadingStyles} role="img" aria-label="Please wait..." />
+        )}
+        {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
+      </AriaLiveRegion>
+    </Flex>
+  );
 };