diff --git a/README.md b/README.md index 3e4971266d6..c8bca2dc41c 100644 --- a/README.md +++ b/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) \ No newline at end of file diff --git a/change-beta/@azure-communication-react-cb20b999-32ec-4af8-84bd-4a9970dfca38.json b/change-beta/@azure-communication-react-cb20b999-32ec-4af8-84bd-4a9970dfca38.json new file mode 100644 index 00000000000..de95483c275 --- /dev/null +++ b/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": "2684369+JamesBurnside@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/change/@azure-communication-react-cb20b999-32ec-4af8-84bd-4a9970dfca38.json b/change/@azure-communication-react-cb20b999-32ec-4af8-84bd-4a9970dfca38.json new file mode 100644 index 00000000000..de95483c275 --- /dev/null +++ b/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": "2684369+JamesBurnside@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/storybook/public/images/captions_Desktop.png b/packages/storybook/public/images/captions_Desktop.png new file mode 100644 index 00000000000..3d64dff3ec2 Binary files /dev/null and b/packages/storybook/public/images/captions_Desktop.png differ diff --git a/packages/storybook/public/images/captions_language_Desktop.png b/packages/storybook/public/images/captions_language_Desktop.png new file mode 100644 index 00000000000..97805fc5e58 Binary files /dev/null and b/packages/storybook/public/images/captions_language_Desktop.png differ diff --git a/packages/storybook/stories/Accessibility.stories.mdx b/packages/storybook/stories/Accessibility.stories.mdx index f8201dd510e..a7354c09b46 100644 --- a/packages/storybook/stories/Accessibility.stories.mdx +++ b/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'; + + example of captions on web desktop + + + +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. + + + + example of choosing a language on web desktop + + diff --git a/packages/storybook/stories/Stateful Client/SettingUpReactHooks.stories.mdx b/packages/storybook/stories/Stateful Client/SettingUpReactHooks.stories.mdx index 9a8e837d884..69df7b098aa 100644 --- a/packages/storybook/stories/Stateful Client/SettingUpReactHooks.stories.mdx +++ b/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)