Merge pull request SharePoint#8174 from dereklh7/Revert-6-13-Design

Validation: Added Missing Alt Text

Author: andrewconnell

docs/spfx/viva/design/design-intro.md

@@ -1,11 +1,11 @@
 ---
 title: Design guidance for Viva Connections cards
 description: Design guidance for Viva Connections cards
-ms.date: 12/28/2021
+ms.date: 06/27/2022
 ms.prod: sharepoint
 ms.localizationpriority: high
 ---
-# Designing Viva Connections custom cards for your dashboard
+# Design guidance for Viva Connections cards
 
 Developers can extend [Microsoft Viva Connections](https://www.microsoft.com/microsoft-viva) for building engaging experiences with the widely adopted SharePoint Framework (SPFx). Viva Connections is your gateway to a modern employee experience where you can build and integrate apps that shape culture and foster connections to help employees thrive. With SPFx, you have multiple ways to extend – using the same out-of-the-box or custom SPFx web parts, SPFx extensions (for example header, footer), and specific components for optimized mobile experiences.
 
@@ -30,7 +30,7 @@ The cards are designed to enable quick task completion by interacting with a car
 
 ## Resources
 
-- [Sample Adaptive Cards for Viva Connections](http://aka.ms/adaptivecards/samples)
+- [Sample Adaptive Cards for Viva Connections](https://aka.ms/adaptivecards/samples)
 - [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)
 - [Fluent Theme designer](https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html)
 - [AC Designer](https://adaptivecards.io/designer/)

docs/spfx/viva/design/designing-card.md

@@ -1,7 +1,7 @@
 ---
 title: Dashboard cards design guidance
 description: Design guidance for the Viva Connections custom cards
-ms.date: 12/28/2021
+ms.date: 06/13/2022
 ms.prod: sharepoint
 ms.localizationpriority: high
 ---
@@ -17,13 +17,13 @@ Cards are used to link resources, surface information, and power direct interact
 
 **Bring cards to life with relevant and dynamically refreshable data:** Company stock price, due dates for training or projects, task assignment updates, and remaining vacation days are some examples.
 
-:::image type="content" source="../../../images/viva-design/img-card-design2.gif" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img-card-design2.gif" alt-text="Moving image that shows process of clocking in for a shift.":::
 
 ## Anatomy of cards
 
 Each dashboard card has the following elements:
 
-:::image type="content" source="../../../images/viva-design/img_card_base.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_base.jpg" alt-text="Diagram showing the card container and card elements, showing the Time off and paid time off available options.":::
 
 1. **Container**: All card content sits within the container.
 
@@ -39,7 +39,7 @@ Each dashboard card has the following elements:
 
 When adding the title and heading, ensure the text does not truncate and can fit in the card width on both desktop and mobile in both card sizes (more information about sizes is given below) and all languages used. Truncated text can hide key information that might be necessary for the end user to complete the task. For the title, in most cases, a length of 10-12 characters should fit the card width well.
 
-:::image type="content" source="../../../images/viva-design/img_card_truncation.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_truncation.jpg" alt-text="Diagram that shows the submit time of and Time off options, with the Time off option being the recommended option.":::
 
 ### Layouts and sizes
 
@@ -55,19 +55,19 @@ All layouts come in two sizes: medium or large. Card size will determine how the
 
 Use when the heading is sufficient to communicate the key information in the card.
 
-:::image type="content" source="../../../images/viva-design/img_card_heading.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_heading.jpg" alt-text="Diagram of the Time Off task and shows the Heading relationship between the two tasks.":::
 
 #### Heading + Description​​​​​​​
 
 Use when the description can add informational value to the heading and can make it easier to understand the purpose of the card. Avoid repeating information already communicated in the heading.
 
-:::image type="content" source="../../../images/viva-design/img_card_description.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_description.jpg" alt-text="Diagram of the two Time Off tasks and showing the Heading and Description for Medium and Large tasks.":::
 
 ### Heading + Image​​​​​​​
 
 Images draw viewer's eye, so use images carefully either to create recognition of a familiar app or website, or increase overall visual prominence of the card on the dashboard. The image should meaningfully connect to the heading and/or title.
 
-:::image type="content" source="../../../images/viva-design/img_card_image.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_image.jpg" alt-text="Screenshot of the medium and large icons showing how an image appears for the medium card layout versus how it appears for the large card layout.":::
 
 ## Interaction
 
@@ -77,7 +77,7 @@ There are three possible ways to interact with a card:
 - Primary button
 - Secondary button
 
-:::image type="content" source="../../../images/viva-design/img_card_interactions.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_interactions.jpg" alt-text="Screenshot of the card, primary button, and secondary button interactions.":::
 
 Each of these interactions can be customized. Use these to perform an instant action, send a request to server, open a quick view (add link), link to a Teams app, open an external website and so on.
 
@@ -99,28 +99,28 @@ Here are the best practices for designing card interactions:
 
 ​​​​​​​Here are some example cards for how these layouts can be used
 
-:::image type="content" source="../../../images/viva-design/img_card_collections.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_collections.jpg" alt-text="Screenshot showing various example cards, including cards for Shifts, Tasks, COVID 19, and Tutorials.":::
 
 
 ## Platforms and modes
 
 Dashboard cards are supported on iOS, Android, and Web. However there are slight differences the styling between different platforms – fonts (Segoe UI for desktop, Roboto for Android, SF Display Pro for iOS), colors, sizes, and spacing is slightly tweaked to better suit the respective platform and make the cards look consistent with the overall experience of that platform.
 
-:::image type="content" source="../../../images/viva-design/img_card_platforms.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_platforms.jpg" alt-text="Screenshot showing how the same card appears on web, i O S, and Android platforms.":::
 
 Dashboard cards also support both light and dark mode theme. Ensure that colors you use work for both modes – text should be legible, and buttons and icons should be clearly recognizable against the background. To meet accessibility criteria, text should have a color ratio of 4.5:1 against the button background, and non-text components like icon should have a color ratio of 3:1 against the background. [Use this tool to check color contrast](https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html).
 
-:::image type="content" source="../../../images/viva-design/img_card_modes.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_modes.jpg" alt-text="Screenshot that shows how the same card appears in light mode versus how it appears in dark mode.":::
 
 ### Displaying your app in the toolbox
 
 New cards are added to that dashboard using the following toolbox.
 
-:::image type="content" source="../../../images/viva-design/img_card_toolbox.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_toolbox.jpg" alt-text="Screenshot of the Relecloud screen showing the Dashboard, which displays various tools.":::
 
 To display your custom app in the dashboard picker, you will need the following:
 
-:::image type="content" source="../../../images/viva-design/img_card_toolbox2.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_toolbox2.jpg" alt-text="Screenshot of the dashboard with a focus on the icon, title, and descriptive text for each tool in the dashboard.":::
 
 **1. Icon:** Unique visual representation of this app. Your custom icon maximum size is 24 px by 24 px and should preferably in PNG or SVG format. SVG icons scale better across different screen resolutions. It is preferable to use a monochromatic icon, but you can use color icons if you want to represent your unique brand with the icons. Either way, make sure the icon has a transparent background, and it looks good both on light and dark theme. [​​​​​​​Learn about SharePoint themes](/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview). The same icon is to be used for the dashboard card (see above).
 
@@ -132,7 +132,7 @@ To display your custom app in the dashboard picker, you will need the following:
 
 When the app is clicked, the card is displayed on the dashboard. The card can be edited using the settings panel on the right.
 
-:::image type="content" source="../../../images/viva-design/img_card_settings.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_card_settings.jpg" alt-text="Screenshot of the Rerecloud application showing an edit pane that allows the user to edit the title, heading, and description of a card.":::
 
 Here are some best practices for offering customization settings:
 

docs/spfx/viva/design/designing-quick-view.md

@@ -1,7 +1,7 @@
 ---
 title: Quick view design guidance
 description: Design guidance for the Viva Connections quick views
-ms.date: 12/28/2021
+ms.date: 06/13/2022
 ms.prod: sharepoint
 ms.localizationpriority: high
 ---
@@ -13,7 +13,7 @@ Create quick views to provide a bit more detailed information (for example: a de
 
 Here are a few examples of quick views:
 
-:::image type="content" source="../../../images/viva-design/img_quickviews.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_quickviews.jpg" alt-text="Screenshot of various examples of quick views.":::
 
 > [!TIP]
 > Sample adaptive card designs for the quick views are available from [GitHub](https://github.com/pnp/AdaptiveCards-Templates)
@@ -25,7 +25,7 @@ The Quick View experience works across different platforms and form-factors base
 
 ## Layout
 
-:::image type="content" source="../../../images/viva-design/img_quickview_layout.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_quickview_layout.jpg" alt-text="Screenshot of a card with a focus on the header and content area, which includes containers, elements, and inputs.":::
 
 1. Header
    1. Dismiss quick view
@@ -62,13 +62,13 @@ Avoid adding too many navigation levels within the Quick view. It's best to keep
 
 While you can open several children quick views from the parent quick view, we recommend not to navigate more than one level down.
 
-:::image type="content" source="../../../images/viva-design/img_quickview_backstack.gif" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_quickview_backstack.gif" alt-text="Moving image of accessing the registration form task which leads to the registration F A Q card.":::
 
 ### Quick views vs Web views
 
 Despite being visually similar, they are two different surfaces for different use cases.
 
-:::image type="content" source="../../../images/viva-design/img_quickview_webview.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_quickview_webview.jpg" alt-text="Screenshot of the registration form card and of a web browser tab of Microsoft dot com.":::
 
 #### Quick view
 
@@ -86,13 +86,13 @@ Any web page opened on mobile is going to be rendered within a web view, while i
 
 Quick views will follow SharePoint default and custom company-created themes.
 
-:::image type="content" source="../../../images/viva-design/img_quickview_web_theme.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_quickview_web_theme.jpg" alt-text="Screenshot that shows how a card viewed on webpages appears in light mode and dark mode.":::
 
 ### Mobile
 
 Currently dark themes are not supported for quick views on iOS and Android mobile.
 
-:::image type="content" source="../../../images/viva-design/img_quickview_ios_theme.jpg" alt-text="Card container and elements":::
+:::image type="content" source="../../../images/viva-design/img_quickview_ios_theme.jpg" alt-text="Screenshot that shows how a card viewed on mobile appears in light mode and dark mode.":::
 
 ### Behavior for links and Single sign-on
 For some cards, you will use links to URLs. Depending on the ___location of the content, links to URLs may display content in Microsoft Teams or elsewhere and Single sign-on (SSO) behavior can differ. Get more information about how links to URLs and SSO behave depending on the ___location of the content you are linking to. [Learn more](/viva/connections/create-dashboard.md#how-urls-and-single-sign-on-works)

docs/spfx/viva/design/quick-view-samples.md

@@ -1,6 +1,7 @@
 ---
 title: Viva Connections Adaptive Card Extension Quick View samples
-ms.date: 2/10/2022
+description: Provides Viva Connections Adaptive Card extension Quick View samples and outlines various GitHub samples for Quick View templates.
+ms.date: 06/13/2022
 ms.prod: sharepoint
 ms.localizationpriority: high
 ---
@@ -50,39 +51,39 @@ Design for presenting inventory details from warehouse.
 
 * Sample at [GitHub](https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/inventory)
 
-:::image type="content" source="../../../images/viva-design/samples/inventory.png" alt-text="Inventory":::
+:::image type="content" source="../../../images/viva-design/samples/inventory.png" alt-text="Screenshot of a sample inventory details card from a warehouse, showing Distribution center number 73's top selling items.":::
 
 ## Payslip
 
 Design for showing payslip details in adaptive card format.
 
 * Sample at [GitHub](https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/payslip)
 
-:::image type="content" source="../../../images/viva-design/samples/payslip.png" alt-text="Payslip":::
+:::image type="content" source="../../../images/viva-design/samples/payslip.png" alt-text="Screenshot of payslip details populating in an adaptive card format.":::
 
 ## Simple list with praise information
 
 Design for showing simple list of people in praise scenario.
 
 * Sample at [GitHub](https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/simple-list)
 
-:::image type="content" source="../../../images/viva-design/samples/praise.png" alt-text="Praise":::
+:::image type="content" source="../../../images/viva-design/samples/praise.png" alt-text="Screenshot of a card reading Send praise to your colleagues.":::
 
 ## Team calendar
 
 Design for showing calendar format and upcoming team events.
 
 * Sample at [GitHub](https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/team-calendar)
 
-:::image type="content" source="../../../images/viva-design/samples/teamcalendar.png" alt-text="Praise":::
+:::image type="content" source="../../../images/viva-design/samples/teamcalendar.png" alt-text="Screenshot of the sample team calendar, showing upcoming team events for October 2021.":::
 
 ## Timeline events
 
 Design for showing a timeline with upcoming events.
 
 * Sample at [GitHub](https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/timeline-holidays)
 
-:::image type="content" source="../../../images/viva-design/samples/holidays.png" alt-text="Holidays":::
+:::image type="content" source="../../../images/viva-design/samples/holidays.png" alt-text="Screenshot of a sample timeline event card, showing the Thanksgiving and Christmas Eve events in 2021.":::
 
 ## Vacation / time off
 
@@ -98,7 +99,7 @@ Design for booking vaccination booster appointment with images and a submission
 
 * Sample at [GitHub](https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/vaccination-booster)
 
-:::image type="content" source="../../../images/viva-design/samples/vaccination.png" alt-text="Vaccination":::
+:::image type="content" source="../../../images/viva-design/samples/vaccination.png" alt-text="Screenshot of the Living Well Health Center and Pharmacy providing information on scheduling a free COVID-19 booster appointment.":::
 
 ## Visual list with cafeteria menu scenario