add storybook page

Author: dmceachernmsft

packages/storybook8/stories/Components/Accessibility/AccessibilityProvider.story.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import {
+  AccessibilityComponentRef,
+  AccessibilityProvider as AccessibilityProviderComponent,
+  ParticipantList,
+  useAccessibility
+} from '@azure/communication-react';
+import { Stack, Panel, DefaultButton } from '@fluentui/react';
+import React, { useRef, useState } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const AccessibilityProviderStory = (props: any): JSX.Element => {
+  return (
+    <AccessibilityProviderComponent>
+      <Children></Children>
+    </AccessibilityProviderComponent>
+  );
+};
+
+const Children = (): JSX.Element => {
+  const [showPane, setShowPane] = useState(false);
+  const accessibility = useAccessibility();
+  const componentRef = useRef<AccessibilityComponentRef>(null);
+  const mockParticipants = [
+    { displayName: 'Tom', isRemovable: true, userId: 'acs:test:1234' },
+    { displayName: 'Jerry', isRemovable: true, userId: 'acs:test:1234' }
+  ];
+  return (
+    <Stack
+      styles={{ root: { width: '100%', height: '100%', padding: '3rem' } }}
+      horizontalAlign="center"
+      verticalAlign="center"
+    >
+      <DefaultButton
+        componentRef={componentRef}
+        iconProps={{ iconName: 'Panel Right Add' }}
+        onClick={() => setShowPane(!showPane)}
+      >
+        {'Participants'}
+      </DefaultButton>
+      <Panel
+        onDismiss={() => {
+          setShowPane(false);
+          accessibility?.componentRef?.focus();
+        }}
+        isOpen={showPane}
+        headerText="AccessibilityProvider Example"
+      >
+        <ParticipantList participants={mockParticipants}></ParticipantList>
+      </Panel>
+    </Stack>
+  );
+};
+
+export const AccessibilityProvider = AccessibilityProviderStory.bind({});

packages/storybook8/stories/Components/Accessibility/Docs.mdx

@@ -0,0 +1,31 @@
+import { AccessibilityProvider } from '@azure/communication-react';
+import * as AccessibilityStories from './index.stories';
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+<Meta of={AccessibilityStories} />
+
+# AccessibilityProvider
+
+The AccessibilityProvider component is used to provide accessibility features to the components within its context. It allows you to customize the accessibility behavior of the components in your application.
+It is important to note that the AccessibilityProvider component should be used at the root of your application or at a higher level in the component tree to ensure that all child components can access the accessibility features.
+
+<Canvas of={AccessibilityStories.AccessibilityProvider} />
+
+## Usage
+
+To use the provider you need to make sure that your application is wrapped in the AccessibilityProvider component. This can be done by wrapping your application in the provider in your main entry file or at a higher level in your component tree.
+
+```tsx
+import { AccessibilityProvider } from '@azure/communication-react';
+import { App } from './App';
+
+const Main = () => (
+  <AccessibilityProvider>
+    <App />
+  </AccessibilityProvider>
+);
+```
+
+Then when you are wanting to make sure that you are
+
+<ArgTypes of={AccessibilityProvider} />

packages/storybook8/stories/Components/Accessibility/index.stories.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { AccessibilityProvider } from '@azure/communication-react';
+import { Meta } from '@storybook/react';
+
+export { AccessibilityProvider } from './AccessibilityProvider.story';
+
+const meta: Meta = {
+  title: 'Components/AccessibilityProvider',
+  component: AccessibilityProvider,
+  argTypes: {
+    children: { control: undefined, table: { disable: true } }
+  }
+};
+
+export default meta;