Add Inputs config documentation to the HostConfig page

AdaptiveCards/authoring-cards/input-validation.md

@@ -29,6 +29,14 @@ An `errorMessage` property is available on all input types to specify what error
 >
 > Min and max properties (including maxLength) on some platforms may be enforced directly by the control. For example, a min property on Input.Date may be enforced by not allowing users to select a date before the minimum in a date picker. In that case, the error message may not be shown.
 
+## Labels
+
+Another property added in schema version 1.3 for all input elements is the `label` string property. Using the `label` property is the recommended way of tagging inputs in an Adaptive Card, vis-a-vis the `placeholder` property. It is a simple and concise way of labelling inputs for card authors and has the following benefits:
+* Validation indicators: as mentioned above inputs can be now marked as required, labels for required inputs will have a visual indicator next to them. This visual indicator is defined in the `HostConfig` and by default is rendered as an asterisk `*`.
+* Accessibility: by having a connection between labels and inputs, renderer libraries can set the necessary properties to allow users using assistive technologies (screen readers) to be able to interact correctly with inputs inside adaptive cards.
+    * Labels vs Placeholders: as Katie Sherwin explains in the article [Placeholders in form fields are harmful](https://www.nngroup.com/articles/form-design-placeholders/) using placeholders has many negative consequences such as straining users' short term memory, making it harder for users to verify their inputs before submitting, providing difficulties for users to read them as, usually, placeholder text has poor color contrast against it's background or screen readers not reading the placeholder text at all, just to name a few.
+    * TextBlock and RichTextBlock: while using other card elements as labels may seem as a good solution it presents the issue of not being able to enforce proximity between inputs and labels, on the other hand by using the `label` property, we can ensure that both visual elements are rendered next to each other which helps users who need screen magnifiers.
+
 ## Fields to be validated and submitted
 
 Inputs will be validated when the user clicks on an Action.Submit action in the card. Those inputs which will be validated and submitted for a given Action.Submit action are:
@@ -46,5 +54,4 @@ If those inputs pass validation, the values in their fields will be passed back
 
  - It is not recommended to create inputs with validation properties that may not always be visible due to interaction with Action.ToggleVisibility. Error messages and visual indications that the input is invalid will not be shown if the input is not currently visible, which may cause confusion for users as to why their submit is blocked.
 
- - Behavior of input validation for hosts using popup show cards using the 	`"actions":"showCard":"actionMode":"popup"` value in their host config is not well defined. Popup show cards may be deprecated in a future release.
-
+ - Behavior of input validation for hosts using popup show cards using the 	`"actions":"showCard":"actionMode":"popup"` value in their host config is not well defined. Popup show cards may be deprecated in a future release.

AdaptiveCards/rendering-cards/host-config.md

@@ -24,6 +24,10 @@ See a sample [HostConfig.json](https://github.com/Microsoft/AdaptiveCards/blob/m
    * [`ForegroundColorsConfig`](#schema-foregroundcolorsconfig) - Controls various font colors
    * [`ImageSetConfig`](#schema-imagesetconfig) - Controls how `ImageSet`s are displayed
    * [`ImageSizesConfig`](#schema-imagesizesconfig) - Controls `Image` sizes
+   * [`InputsConfig`](#schema-inputsconfig) - Controls how labels and error messages are displayed 
+      * [`LabelConfig`](#schema-labelconfig) - Controls how labels are displayed
+         * [`InputLabelConfig`](#schema-inputlabelconfig) - Controls how required or optional labels are displayed
+      * [`ErrorMessageConfig`](#schema-errormessageconfig) - Controls how error messages are displayed
    * [`MediaConfig`](#schema-mediaconfig) - Controls the display and behavior of `Media` elements
    * [`SeparatorConfig`](#schema-separatorconfig) - Controls how separators are displayed
    * [`ShowCardConfig`](#schema-showcardconfig) - Controls behavior and styling of `Action.ShowCard`
@@ -160,6 +164,50 @@ Controls `Image` sizes
 |**medium**|`integer`| No, default: `120`|Medium image size value|1.0
 |**large**|`integer`| No, default: `180`|Large image size value|1.0
 
+<a name="schema-inputsconfig"></a>
+## InputsConfig
+
+Controls how labels and error messages are displayed 
+
+|Property|Type|Required|Description|Version|
+|--------|----|--------|-----------|-------|
+|**label**|`LabelConfig`| No |Controls how labels are displayed|1.3|
+|**errorMessage**|`ErrorMessageConfig`| No|Controls how error messages are displayed |1.3|
+
+<a name="schema-labelconfig"></a>
+### LabelConfig
+
+Controls how labels are displayed
+
+|Property|Type|Required|Description|Version|
+|--------|----|--------|-----------|-------|
+|**requiredInputs**|`InputLabelConfig`| No |Controls how labels for required inputs are displayed|1.3|
+|**optionalInputs**|`InputLabelConfig`| No|Controls how labels for optional inputs are displayed |1.3|
+|**spacing**|`string`| No, default: `"default"` |[Spacing](#schema-spacingsconfig) between the label and the input|1.3|
+
+<a name="schema-inputlabelconfig"></a>
+#### InputLabelConfig
+
+Controls how required or optional labels are displayed
+
+|Property|Type|Required|Description|Version|
+|--------|----|--------|-----------|-------|
+|**color**|`string`|No, default: `"default"`| Font [color](#schema-foregroundcolorsconfig) of the label (the suffix is always rendered in `attention` color) |1.3|
+|**isSubtle**|`bool`| No, default: `false`| Defines whether to use the `subtle` foreground color |1.3|
+|**size**|`string`| No, default: `"default"` | Font [size](#schema-fontsizesconfig) of the label to be displayed |1.3|
+|**suffix**|`string`| No, default: `"*"` | Suffix to be displayed at the end of the label for required inputs. If none is defined, an asterisk `*` is appended to the label |1.3|
+|**weight**|`string`| No, default: `"default"` | Font [weight](#schema-fontweightsconfig) of the label |1.3|
+
+<a name="schema-errormessageconfig"></a>
+### ErrorMessageConfig
+
+Controls how error messages are displayed. Error messages are always displayed with the `attention` color.
+
+|Property|Type|Required|Description|Version|
+|--------|----|--------|-----------|-------|
+|**spacing**|`string`| No, default: `"default"` |[Spacing](#schema-spacingsconfig) between the input and the error message|1.3|
+|**size**|`string`| No, default: `"default"` | Font [size](#schema-fontsizesconfig) of the error message  |1.3|
+|**weight**|`string`| No, default: `"default"` | Font [weight](#schema-fontweightsconfig) of the error message |1.3|
 
 <a name="schema-mediaconfig"></a>
 ## MediaConfig