Merge branch 'release/23.01' of github.com:Microsoft/AdaptiveCards into release/23.01

Author: jwoo-msft

samples/v1.0/Elements/Container.SelectAction.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
 	"type": "AdaptiveCard",
-	"version": "1.0",
+	"version": "1.1",
 	"body": [
 		{
 			"type": "TextBlock",

samples/v1.0/Elements/Column.SelectAction.json renamed to samples/v1.1/Elements/Column.SelectAction.json

@@ -1,6 +1,6 @@
 {
 	"type": "AdaptiveCard",
-	"version": "1.0",
+	"version": "1.1",
 	"body": [
 		{
 			"type": "TextBlock",

samples/v1.0/Elements/ColumnSet.SelectAction.json renamed to samples/v1.1/Elements/ColumnSet.SelectAction.json

@@ -0,0 +1,52 @@
+{
+	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+	"type": "AdaptiveCard",
+	"version": "1.1",
+	"body": [
+		{
+			"type": "Container",
+			"items": [
+				{
+					"type": "TextBlock",
+					"text": "Cool link"
+				}
+			],
+			"selectAction": {
+				"type": "Action.OpenUrl",
+				"tooltip": "Go to a url",
+				"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+			}
+		},
+		{
+			"type": "Container",
+			"style": "emphasis",
+			"items": [
+				{
+					"type": "TextBlock",
+					"text": "Emphasis link"
+				}
+			],
+			"selectAction": {
+				"type": "Action.OpenUrl",
+				"tooltip": "Go to a different url",
+				"url": "https://msn.com"
+			}
+		},
+		{
+			"type": "Container",
+			"items": [
+				{
+					"type": "TextBlock",
+					"text": "Submit action"
+				}
+			],
+			"selectAction": {
+				"type": "Action.Submit",
+				"tooltip": "Submit action",
+				"data": {
+					"info": "My submit action data"
+				}
+			}
+		}
+	]
+}

samples/v1.1/Elements/Container.SelectAction.json

@@ -1,3 +1,8 @@
+:root {
+    --widget-margin: 16px;
+    --left-right-arrow-height: 38px;
+}
+
 .widget-outer-container {
     border: 1px solid rgba(0, 0, 0, 0.1);
     background: #2c2c2c;
@@ -15,7 +20,7 @@
     z-index: 1;
     display: flex;
     justify-content: space-around;
-    margin: 16px;
+    margin: var(--widget-margin);
     border-radius: 8px 8px 0px 0px;
 }
 
@@ -62,15 +67,15 @@
 
 .ac-adaptiveCard {
     border: 0px;
-    padding: 48px 16px 16px 16px !important;
+    padding: 48px var(--widget-margin) var(--widget-margin) var(--widget-margin) !important;
     margin: 0px !important;
     border-radius: 8px;
 }
 
 .ac-card-elements-wrapper {
     height: 100%;
-    margin: 0px -16px 0px -16px !important;
-    padding: 0px 16px 0px 16px !important;
+    margin: 0px calc(0px - var(--widget-margin)) 0px calc(0px - var(--widget-margin)) !important;
+    padding: 0px var(--widget-margin) 0px var(--widget-margin) !important;
 }
 
 .no-overflow {
@@ -331,15 +336,15 @@ a.ac-anchor:hover {
 }
 
 .ac-carousel-container {
-    padding: 0px 16px 16px 16px !important;
+    padding: 0px var(--widget-margin) var(--widget-margin) var(--widget-margin) !important;
 }
 
 .ac-carousel-container-vertical {
     display: flex;
 }
 
 .ac-carousel-card-level-container {
-    margin: 0px -16px -16px -16px !important;
+    margin: 0px calc(0px - var(--widget-margin)) calc(0px - var(--widget-margin)) calc(0px - var(--widget-margin)) !important;
 }
 
 .ac-container.ac-adaptiveCard .swiper-button-prev.ac-carousel-left,
@@ -367,8 +372,11 @@ a.ac-anchor:hover {
 .swiper-button-prev.ac-carousel-left,
 .swiper-button-next.ac-carousel-right {
     border-radius:3px;
-    height:38px;
+    height: var(--left-right-arrow-height);
     width:16px;
+    /* The arrows already have 'top: 50%' set
+    We need to subtract half of the bottom margin and half of the arrow height to center the arrows */
+    margin-top: calc(0px - ((var(--widget-margin) + var(--left-right-arrow-height)) / 2)) !important;
 }
 
 .swiper-button-prev.ac-carousel-up,

source/nodejs/adaptivecards-designer/src/containers/widget/widget-container-dark.css

@@ -1,14 +1,19 @@
+:root {
+    --widget-margin: 16px;
+    --left-right-arrow-height: 38px;
+}
+
 .ac-adaptiveCard {
     border: 0px;
-    padding: 48px 16px 16px 16px !important;
+    padding: 48px var(--widget-margin) var(--widget-margin) var(--widget-margin) !important;
     margin: 0px !important;
     border-radius: 8px;
 }
 
 .ac-card-elements-wrapper {
     height: 100%;
-    margin: 0px -16px 0px -16px !important;
-    padding: 0px 16px 0px 16px !important;
+    margin: 0px calc(0px - var(--widget-margin)) 0px calc(0px - var(--widget-margin)) !important;
+    padding: 0px var(--widget-margin) 0px var(--widget-margin) !important;
 }
 
 .no-overflow {
@@ -32,7 +37,7 @@
     z-index: 1;
     display: flex;
     justify-content: space-around;
-    margin: 16px;
+    margin: var(--widget-margin);
     border-radius: 8px 8px 0px 0px;
 }
 
@@ -332,15 +337,15 @@ a.ac-anchor:hover {
 }
 
 .ac-carousel-container {
-    padding: 0px 16px 16px 16px !important;
+    padding: 0px var(--widget-margin) var(--widget-margin) var(--widget-margin) !important;
 }
 
 .ac-carousel-container-vertical {
     display: flex;
 }
 
 .ac-carousel-card-level-container {
-    margin: 0px -16px -16px -16px !important;
+    margin: 0px calc(0px - var(--widget-margin)) calc(0px - var(--widget-margin)) calc(0px - var(--widget-margin)) !important;
 }
 
 .ac-container.ac-adaptiveCard .swiper-button-prev.ac-carousel-left,
@@ -368,8 +373,11 @@ a.ac-anchor:hover {
 .swiper-button-prev.ac-carousel-left,
 .swiper-button-next.ac-carousel-right {
     border-radius:3px;
-    height:38px;
+    height: var(--left-right-arrow-height);
     width:16px;
+    /* The arrows already have 'top: 50%' set
+    We need to subtract half of the bottom margin and half of the arrow height to center the arrows */
+    margin-top: calc(0px - ((var(--widget-margin) + var(--left-right-arrow-height)) / 2)) !important;
 }
 
 .swiper-button-prev.ac-carousel-up,

source/nodejs/adaptivecards-designer/src/containers/widget/widget-container-light.css

@@ -3399,6 +3399,9 @@ export class CarouselPeer extends ContainerPeer {
     // Question: What do we want the default value to be here?
     static readonly timerProperty = new CarouselTimerPropertyEditor(Adaptive.Versions.v1_6, "timer", "Timer", 5000);
     static readonly initialPageProperty = new NumberPropertyEditor(Adaptive.Versions.v1_6, "initialPageIndex", "Initial page", 0);
+    static readonly orientationProperty = new EnumPropertyEditor(Adaptive.Versions.v1_6, "carouselOrientation", "Orientation", Adaptive.Orientation);
+    static readonly heightInPixelsProperty = new NumberPropertyEditor(Adaptive.Versions.v1_6, "carouselHeight", "Height in pixels");
+    static readonly loopProperty = new BooleanPropertyEditor(Adaptive.Versions.v1_6, "carouselLoop", "Loop");
 
     protected internalAddCommands(context: DesignContext, commands: Array<PeerCommand>) {
         super.internalAddCommands(context, commands);
@@ -3436,7 +3439,10 @@ export class CarouselPeer extends ContainerPeer {
         propertySheet.add(
             defaultCategory,
             CarouselPeer.timerProperty,
-            CarouselPeer.initialPageProperty);
+            CarouselPeer.initialPageProperty,
+            CarouselPeer.orientationProperty,
+            CarouselPeer.heightInPixelsProperty,
+            CarouselPeer.loopProperty);
     }
 
     canDrop(peer: DesignerPeer) {

source/nodejs/adaptivecards-designer/src/designer-peers.ts

@@ -55,6 +55,7 @@ export class Toolbox {
                 this._collapsedTabContainer.appendChild(this._headerRootElement);
                 this.restoreState();
             }
+            this._expandCollapseButtonElement.setAttribute("aria-expanded", this._isExpanded.toString());
         }
     }
 
@@ -143,21 +144,27 @@ export class Toolbox {
 
                 e.preventDefault();
                 this._expandCollapseButtonElement.focus();
+                
+                // Add a delay so the focus event has completed
+                setTimeout(() => { this._expandCollapseButtonElement.setAttribute("aria-expanded", this._isExpanded.toString()); }, 1);
             }
 
             if (e.key === Constants.keys.escape) {
                 this.collapse();
 
                 e.preventDefault();
                 this._expandCollapseButtonElement.focus();
+                
+                // Add a delay so the focus event has completed
+                setTimeout(() => { this._expandCollapseButtonElement.setAttribute("aria-expanded", this._isExpanded.toString()); }, 1);
             }
         }
 
         this._expandCollapseButtonElement.onclick = (e) => {
             this.toggle();
+            this._expandCollapseButtonElement.setAttribute("aria-expanded", this._isExpanded.toString());
 
             e.preventDefault();
-
             return true;
         }
 
@@ -192,8 +199,6 @@ export class Toolbox {
             }
 
             this._expandCollapseButtonElement.title = "Show " + this.title;
-            this._expandCollapseButtonElement.setAttribute("aria-expanded", "false");
-
             this._isExpanded = false;
 
             this.toggled(saveState);
@@ -212,8 +217,6 @@ export class Toolbox {
             }
 
             this._expandCollapseButtonElement.title = "Hide " + this.title;
-            this._expandCollapseButtonElement.setAttribute("aria-expanded", "true");
-
             this._isExpanded = true;
 
             this.toggled();
@@ -268,6 +271,7 @@ export class Toolbox {
                     else {
                         this.collapse();
                     }
+                    this._expandCollapseButtonElement.setAttribute("aria-expanded", this._isExpanded.toString());
                 }
             }
             finally {

source/nodejs/adaptivecards-designer/src/tool-box.ts

@@ -59,6 +59,7 @@ export class ToolbarButton extends ToolbarElement {
     private _isEnabled: boolean = true;
     private _allowToggle: boolean = false;
     private _isToggled: boolean = false;
+    private _isLink: boolean = false;
 
     protected clicked() {
         if (this.isEnabled && this.onClick) {
@@ -105,6 +106,10 @@ export class ToolbarButton extends ToolbarElement {
         }
 
         this.renderedElement.title = this.toolTip ? this.toolTip : "";
+        
+        if (this._isLink) {
+            this.renderedElement.setAttribute("role", "link");
+        }
     }
 
     protected internalRender(): HTMLElement {
@@ -128,12 +133,14 @@ export class ToolbarButton extends ToolbarElement {
         id: string,
         caption: string,
         iconClass: string,
-        onClick: (sender: ToolbarButton) => void = null) {
+        onClick: (sender: ToolbarButton) => void = null,
+        isLink: boolean = false) {
         super(id);
 
         this.caption = caption;
         this.iconClass = iconClass;
         this.onClick = onClick;
+        this._isLink = isLink;
     }
 
     get allowToggle(): boolean {

source/nodejs/adaptivecards-designer/src/toolbar.ts

@@ -0,0 +1,46 @@
+---
+title: 📣 Community Call - April, 2022
+subtitle: Overview on Universal Actions + Messaging Extensions
+date: 2022-04-14
+featured_image: https://pnp.github.io/blog/adaptive-cards-community-call/adaptive-cards-community-call-april-2022/images/recording-adaptive-cards-april-call_hua50012fa682050558ff5eb743a07f983_295297_700x0_resize_q100_h2_box_3.webp
+github_username: JeanRoca
+twitter: jpthepm
+---
+
+The following topics are covered in this month’s community call. Overview on Universal Actions + Messaging Extensions (elevating user experiences with Universal Actions and Messaging Extensions on Teams and Outlook – walkthrough capabilities and value propositions) - Karan Thapar (Microsoft), Accessibility Updates (Accessibility work and SDK v1.6 release) – [J.P. Roca](http://twitter.com/jpthepm) (Microsoft), and 15 minutes live Q&A primarily focused on Universal Actions + Messaging Extensions. This call was hosted by [J.P. Roca](http://twitter.com/jpthepm) (Microsoft) \| @jpthepm. Recorded on April 14, 2022.
+
+### Watch the call here
+
+<iframe width="680" height="383" src="https://www.youtube.com/embed/6Z8U4bSicgk" title="Community Call April 2022 video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+### Agenda:
+- Universal Actions + Messaging Extensions - Karan Thapar (Microsoft) – [00:37](https://youtu.be/6Z8U4bSicgk?t=37)
+- Accessibility Updates - [J.P. Roca](http://twitter.com/jpthepm) (Microsoft) \| @jpthepm – [21:02](https://youtu.be/6Z8U4bSicgk?t=1262)
+- Q&A - J.P. Roca (Microsoft) \| @jpthepm & [Karan Thapar](https://www.linkedin.com/in/karanthapar91/) (Microsoft) –[22:04](https://youtu.be/6Z8U4bSicgk?t=1324)
+
+### Demo:
+**Elevate user experiences with Universal Actions and Messaging Extensions on Teams and Outlook** – Adaptive Cards enable you to take quick actions right from within Teams and Outlook. Hear the latest on Universal Actions, vacation approval scenarios with value propositions, contextual or role-based views on Teams, sequential workflows on Teams, messaging extensions, search (read-only) messaging extensions, action messaging extensions, link unfurling, success stories, and value, how to onboard and build resources and Q&A at the end.
+
+### Referenced in this call:
+* Documentation – [Universal Actions for Adaptive Cards](https://docs.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview?tabs=mobile)
+* Documentation – [Messaging extensions](https://docs.microsoft.com/microsoftteams/platform/messaging-extensions/what-are-messaging-extensions)
+* Documentation – [Link unfurling](https://docs.microsoft.com/microsoftteams/platform/messaging-extensions/how-to/link-unfurling)
+* Tool - [Microsoft Bot Framework](https://dev.botframework.com/) \| <https://dev.botframework.com/>
+* Demo – [Adaptive Cards Video Player Bot on Teams](https://youtu.be/-Y7_nNwC20w?t=28) - [Alexis Kinzelin](https://www.linkedin.com/in/alexis-kinzelin-214b6b20/) (Microsoft)
+* Tool - [Microsoft Graph Toolkit](https://docs.microsoft.com/graph/toolkit/overview)
+
+### Resources in General: 
+- Let us know the features you need    https://aka.ms/ACRoadmap
+- Schema Explorer - https://adaptivecards.io/explorer/Action.Execute.html
+- Designer - https://adaptivecards.io/designer/ 
+- Get started with Templating - https://aka.ms/ACTemplating
+- Browse the Adaptive Cards Code - https://aka.ms/ACRepo
+- Find tools, sample cards, and more - https://www.madewithcards.io
+- Contribution Guidelines – https://aka.ms/ACRepo 
+
+### Adaptive Cards feedback channels
+
+-   [Issues and feature requests](https://github.com/Microsoft/AdaptiveCards/issues)
+-   [Technical questions](https://stackoverflow.com/questions/tagged/adaptive-cards)
+
+The Adaptive Cards developer community call is on the 2nd Thursday of each month. We will provide you with the opportunity to learn about Adaptive Cards in general, how they could be a great tool in your applications and contribute to the evolution of the format and SDKs. Each month, we'll discuss new features we are bringing to the platform, our roadmap, and listen to your feedback and suggestions.