Update docs from forked PRs; Update README.md, Fix minor typo in stor…

…ybook doc, Closed Captions added to Accessibility doc (#3716)

Underlying PRs:
* #3641
* #3079
* #3617

Co-authored-by: Mikhail Bakalov <[email protected]>
Co-authored-by: Tay <[email protected]>
Co-authored-by: d3kum1d0r1y4100 <[email protected]>

README.md

@@ -8,44 +8,47 @@
 [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)
 [![CI build status](https://github.com/Azure/communication-ui-library/workflows/CI/badge.svg?branch=main)](https://github.com/Azure/communication-ui-library/actions/workflows/ci.yml?query=branch%3Amain)
 
-Azure Communication Services UI Library is a collection of JavaScript libraries that can be used to easily build fast, responsive communication web applications.
+The Azure Communication Services UI Library is a collection of JavaScript libraries designed to help you easily build fast, responsive communication web applications.
 
-We have interactive storybook pages in our storybook 📖 to try out features and examples to get your development kick started 🚀.
+Explore interactive storybook pages in our documentation 📖 to try out features and examples, and kickstart your development journey 🚀.
 
 ## Getting Started
 
-If you're wondering where to get started, here are a few scenarios to help you get going:
-
-* "What is Azure Communication Services?"
-  * Take a look at our conceptual documentation on [Azure Communication Services](https://docs.microsoft.com/azure/communication-services/overview), [Client-Server Architecture](https://docs.microsoft.com/azure/communication-services/concepts/client-and-server-architecture), [Authentication](https://docs.microsoft.com/azure/communication-services/concepts/authentication), [Calling](https://docs.microsoft.com/azure/communication-services/concepts/voice-video-calling/about-call-types) and [Chat](https://docs.microsoft.com/azure/communication-services/concepts/chat/concepts?branch=pr-en-us-152137).
-* "I want to see what this library can do!"
-  * Check out our [Storybook](https://azure.github.io/communication-ui-library) and [Sample Apps](#samples)
-* "I want to write my own communication application"
-  * We recommend checking out our [comprehensive documentation](https://azure.github.io/communication-ui-library/?path=/story/overview--page) first to make the best decision for your application.
-* "I want more information on the packages available to use"
-  * Check out our [npm packages](#npm-packages) on offer
-* "I want to submit a fix for a package in this repo"
-  * Check out our [making a contribution](<./docs/contributing-guide/1. getting-set-up.md>) guide
+If you're wondering where to start, here are a few scenarios to guide you:
+
+- **What is Azure Communication Services?**
+  - Dive into our conceptual documentation on [Azure Communication Services](https://docs.microsoft.com/azure/communication-services/overview), [Client-Server Architecture](https://docs.microsoft.com/azure/communication-services/concepts/client-and-server-architecture), [Authentication](https://docs.microsoft.com/azure/communication-services/concepts/authentication), [Calling](https://docs.microsoft.com/azure/communication-services/concepts/voice-video-calling/about-call-types), and [Chat](https://docs.microsoft.com/azure/communication-services/concepts/chat/concepts?branch=pr-en-us-152137).
+
+- **I want to see what this library can do!**
+  - Explore our [Storybook](https://azure.github.io/communication-ui-library) and [Sample Apps](#samples).
+
+- **I want to write my own communication application**
+  - Start with our [comprehensive documentation](https://azure.github.io/communication-ui-library/?path=/story/overview--page) to make the best choices for your application.
+
+- **I want more information on the available npm packages**
+  - Check out our [npm packages](#npm-packages) on offer.
+
+- **I want to contribute and submit a fix for a package in this repo**
+  - Refer to our [contributing guide](./docs/contributing-guide/1.%20getting-set-up.md) for the steps to get started.
 
 ## NPM Packages
 
 ### @azure/communication-react
 
-A React library providing UI components and  making it simple for you to build modern communication apps using [Azure Communication Services](https://azure.microsoft.com/services/communication-services/).
+This React library provides UI components, simplifying the development of modern communication apps using [Azure Communication Services](https://azure.microsoft.com/services/communication-services/).
 
 ## Samples
 
-
-Check out [Storybook](https://azure.github.io/communication-ui-library) to try out the UI Library today!
+Explore [Storybook](https://azure.github.io/communication-ui-library) to try out the UI Library today!
 
 ## Contributing to the Packages or Samples
 
-Join us by making a contribution. To get you started check out our [making a contribution](<./docs/contributing-guide/1. getting-set-up.md>) guide.
+Join us in contributing to this open source library. Get started by checking out our [contributing guide](./docs/contributing-guide/1.%20getting-set-up.md).
 
 We look forward to building an amazing open source library with you!
 
 ## Further Reading
 
-* [Repo Documentation](./docs/README.md)
-* [Conceptual Documentation](https://azure.github.io/communication-ui-library/?path=/story/overview--page)
-* [Quick-start Documentation](https://azure.github.io/communication-ui-library/?path=/story/quickstarts-composites--page)
+- [Repository Documentation](./docs/README.md)
+- [Conceptual Documentation](https://azure.github.io/communication-ui-library/?path=/story/overview--page)
+- [Quick-start Documentation](https://azure.github.io/communication-ui-library/?path=/story/quickstarts-composites--page)

change-beta/@azure-communication-react-cb20b999-32ec-4af8-84bd-4a9970dfca38.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "none",
+  "comment": "Doc improvements",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-cb20b999-32ec-4af8-84bd-4a9970dfca38.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "none",
+  "comment": "Doc improvements",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/storybook/stories/Accessibility.stories.mdx

@@ -1,4 +1,6 @@
+import { Stack } from '@fluentui/react';
 import { Meta } from '@storybook/addon-docs';
+import { overviewPageImagesStackStyle } from './constants';
 
 <Meta
   id="accessibility"
@@ -12,3 +14,31 @@ Accessibility by design is a principle across Microsoft products.
 UI Library follows this principle in making sure that all UI Components are fully accessible.
 The UI Library is fully compliant with Microsoft standards for accessibility.
 Learn more about how Microsoft develops with [accessibility by design](https://www.microsoft.com/accessibility).
+
+## Closed Captions
+
+<Stack tokens={{ childrenGap: '3rem' }} style={overviewPageImagesStackStyle}>
+  <Stack.Item align="center">
+    <img src="images/captions_Desktop.png" alt="example of captions on web desktop" />
+  </Stack.Item>
+</Stack>
+
+Closed captions are a powerful tool that enables developers to enhance the accessibility of their videos. With closed captions, developers can provide a textual representation of the audio content in their videos, making it easier for users who are deaf or hard of hearing to follow along. Here are main scenarios where Closed Captions are useful:
+
+**Accessibility:** In the workplace or consumer apps, Closed Captioning for meetings, conference calls, and training videos can make a dramatic difference. Scenarios when audio cannot be heard, either because of a noisy environment, such as an airport, or because of an environment that must be kept quiet, such as a hospital.
+
+**Inclusivity:** Closed Captioning was developed to aid hearing-impaired people but can also be useful in language proficiency as well.
+
+### Incorporating Closed Captions in your experience
+
+The UI Library helps Contoso become more accessible and inclusive by providing closed captions within the CallComposite experiences. Closed Captions are enabled by default and are automatically included within the CallComposite and CallWithChatComposite experiences.
+
+**Currently, Closed Captions are only available for Teams Interop and Teams CTE Calls. Captions can be enabled both in Mobile Web sessions and in Desktop Web sessions.**
+
+Users can enable captions in the menu and select the spoken language for the captions. Captions does not detect language automatically, so the spoken language selected needs to match the language that will be used in the call. Translation is not currently supported.
+
+<Stack tokens={{ childrenGap: '3rem' }} style={overviewPageImagesStackStyle}>
+  <Stack.Item align="center">
+    <img src="images/captions_language_Desktop.png" alt="example of choosing a language on web desktop" />
+  </Stack.Item>
+</Stack>

packages/storybook/stories/Stateful Client/SettingUpReactHooks.stories.mdx

@@ -39,7 +39,7 @@ ReactDOM.render(
 
 ### Calling
 
-For your Chat app, use the `CallClientProvider`, `CallAgentProvider` and `CallProvider` to give hooks access to the `CallClient`, `CallAgentClient` and `Call`.
+For your Calling app, use the `CallClientProvider`, `CallAgentProvider` and `CallProvider` to give hooks access to the `CallClient`, `CallAgentClient` and `Call`.
 `statefulCallClient`, `callAgent` and `call` instances need to be passed to the Provider when you wrap your app.
 For more information on creating them, see [Overview](./?path=/docs/statefulclient-overview--page)