Added accessibility-color-contrast-checker sample

samples/accessibility-color-contrast-checker/README.md

@@ -0,0 +1,89 @@
+---
+page_type: sample
+languages:
+- powerapps-comma
+products:
+- power-apps
+- powerapps
+- canvas
+name: Accessibility color contrast checker
+description: "an app that allows maker to choose colors that fulfill WCAG 2.1 standard for color contrast ratio to improve accessibility"
+urlFragment: powerapps-accessibility-color-contrast-checker
+ms.date: 07/03/2022
+author: LuiseFreese
+ms.author: pnp
+level: advanced
+ms.prod: power-apps
+---
+
+## Idea
+
+Color contrast ratio is important for accessibility - here is a Power Apps canvas-app that allows makers to check in an app if the colors they want to use comply with the WCAG 2.1 success criteria for accessibility. For mor information read [How to build a color-contrast-ratio checker for improved accessibility in Power Apps](https://pnp.github.io/blog/post/how-to-create-a-color-contrast-ratio-checker-in-power-apps/).
+
+## Demo
+
+![contrast checker walkthrough](assets/contrastcheckv11.gif)
+
+## Applies to
+
+* [Microsoft Power Apps](https://docs.microsoft.com/powerapps/)
+
+## Compatibility
+
+![Power Apps Source File Pack and Unpack Utility 0.20](https://img.shields.io/badge/Packing%20Tool-0.20-green.svg)
+![Premium License](https://img.shields.io/badge/Premium%20License-Not%20Required-green.svg "Premium Power Apps license not required")
+![Experimental Features](https://img.shields.io/badge/Experimental%20Features-No-green.svg "Does not rely on experimental features")
+![On-Premises Connectors](https://img.shields.io/badge/On--Premises%20Connectors-No-green.svg "Does not use on-premise connectors")
+![Custom Connectors](https://img.shields.io/badge/Custom%20Connectors-Not%20Required-green.svg "Does not use custom connectors")
+
+## Authors
+
+Solution|Author(s)
+--------|---------
+Accessibility color contrast checker | [Luise Freese](https://github.com/luisefreese) ([@LuiseFreese](https://www.twitter.com/LuiseFreese) )
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.1| July 19, 2022| New features: display hex value of colors, input RGBA value with either sliders or input fields
+1.0|July 3, 2022 |Initial release
+
+## Minimal Path to Awesome
+
+* [Download](https://github.com/pnp/powerapps-samples/raw/main/samples/fluentui-for-teams-theme/solution/fluentui-for-teams-theme.msapp) the `.msapp` from the [`solution`](https://github.com/pnp/powerapps-samples/tree/main/samples/fluentui-for-teams-theme/solution) folder
+* Within **Power Apps Studio**, use the `.msapp` file using **File** > **Open** > **Browse** and select the `.msapp` file you just downloaded.
+* Save and Publish
+
+## Using the Source Code
+
+You can also use the [Power Apps CLI](https://docs.microsoft.com/powerapps/developer/data-platform/powerapps-cli) to pack the source code by following these steps::
+
+* Clone the repository to a local drive
+* Pack the source files back into `.msapp` file
+
+``` bash
+pac canvas pack --sources pathtosourcefolder --msapp pathtomsapp
+```
+
+* Make sure to replace `pathtosourcefolder` to point to the path to this sample's `sourcecode` folder, and `pathtomsapp` to point to the path of this solution's `.msapp` file (located under the `solution` folder)
+* Within **Power Apps Studio**, use the `.msapp` file using **File** > **Open** > **Browse** and select the `.msapp` file you just packed.
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+## Support
+
+While we don't support samples, if you encounter any issues while using this sample, you can [create a new issue](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=fluentui-custom-theme&authors=@fabiofranzini&title=fluentui-custom-theme%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=fluentui-custom-theme&authors=@fabiofranzini&title=fluentui-custom-theme%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=fluentui-custom-theme&authors=@fabiofranzini&title=fluentui-custom-theme%20-%20).
+
+## For more information
+
+* [Overview of creating apps in Power Apps](https://docs.microsoft.com/powerapps/maker/)
+* [Power Apps canvas apps documentation](https://docs.microsoft.com//powerapps/maker/canvas-apps/)
+
+<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-samples/samples/accessibility-color-contrast-checker" />

samples/accessibility-color-contrast-checker/assets/sample.json

@@ -0,0 +1,84 @@
+[
+    {
+      "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
+      "name": "pnp-powerapps-samples-accessibility-color-contrast-checker",
+      "version": "1.0.0.0",
+      "source": "pnp",
+      "creationDateTime": "2021-05-05T00:00:00.000Z",
+      "updateDateTime": "2021-05-05T00:00:00.000Z",
+      "title": "Color Contrast Ratio Checker",
+      "shortDescription": "an app that allows maker to choose colors that fulfill WCAG 2.1 standard for color contrast ratio to improve accessibility",
+      "longDescription": [
+        "an app that allows maker to choose colors that fulfill WCAG 2.1 standard for color contrast ratio to improve accessibility"
+      ],
+      "url": "https://github.com/pnp/powerapps-samples/tree/main/samples/accessibility-color-contrast-checker",
+      "products": [
+        "Power Apps",
+        "Power Platform"
+      ],
+      "tags": [
+        "ACCESSIBILITY", "CANVAS"
+      ],
+      "categories": [
+        "POWERAPPS"
+      ],
+      "metadata": [
+        {
+          "key": "POWERAPPS-MANIFEST-VERSION",
+          "value": "0.20"
+        },
+        {
+          "key": "POWERAPPS-TYPE",
+          "value": "Canvas"
+        },
+        {
+          "key": "POWERAPPS-EXPERIMENTAL",
+          "value": "No"
+        },
+        {
+          "key": "POWERAPPS-PREMIUM",
+          "value": "No"
+        },
+        {
+          "key": "POWERAPPS-ONPREM",
+          "value": "No"
+        },
+        {
+          "key": "POWERAPPS-CUSTOMCONNECTOR",
+          "value": "No"
+        }
+      ],
+      "thumbnails": [
+        {
+          "type": "image",
+          "order": 100,
+          "url": "https://raw.githubusercontent.com/pnp/powerapps-samples/main/samples/accessibility-color-contrast-checker/assets/colorcontrastratiochecker11.png",
+          "alt": "Preview"
+        }
+      ],
+      "authors": [
+        {
+          "gitHubAccount": "LuiseFreese",
+          "name": "Luise Freese",
+          "pictureUrl": "https://github.com/LuiseFreese.png"
+        }
+      ],
+      "references": [
+        {
+          "name": "Create a component for canvas apps",
+          "description": "Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app, or across apps using a component library",
+          "url": "https://docs.microsoft.com/powerapps/maker/canvas-apps/"
+        },
+        {
+          "name": "Overview of creating apps in Power Apps",
+          "description": "Power Apps is a high-productivity development platform for business apps.",
+          "url": "https://docs.microsoft.com/powerapps/maker/"
+        },
+        {
+          "name": "Power Apps canvas apps documentation",
+          "description": "Design and build a business app from a canvas in Microsoft Power Apps with data from a variety of sources without writing any code using traditional programming languages, such as C#.",
+          "url": "https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/"
+        }
+      ]
+    }
+  ]

samples/accessibility-color-contrast-checker/sourcecode/Assets/SampleImage.json

@@ -0,0 +1,12 @@
+{
+  "Content": "Image",
+  "FileName": "/ctrllib/image/images/SampleImage.svg",
+  "IsSampleData": true,
+  "IsWritable": false,
+  "Name": "SampleImage",
+  "Path": "/ctrllib/image/images/SampleImage.svg",
+  "ResourceKind": "Uri",
+  "RootPath": "ms-appx:///ctrllib/image/images/SampleImage.svg",
+  "Schema": "i",
+  "Type": "ResourceInfo"
+}

samples/accessibility-color-contrast-checker/sourcecode/CanvasManifest.json

@@ -0,0 +1,107 @@
+{
+  "FormatVersion": "0.24",
+  "Header": {
+    "DocVersion": "1.324",
+    "MinVersionToLoad": "1.324",
+    "MSAppStructureVersion": "2.0"
+  },
+  "Properties": {
+    "AppCreationSource": "AppFromScratch",
+    "AppDescription": "",
+    "AppPreviewFlagsMap": {
+      "aibuilderserviceenrollment": false,
+      "allowmultiplescreensincanvaspages": false,
+      "autocreateenvironmentvariables": false,
+      "backfromhostaction": false,
+      "behaviorpropertyui": false,
+      "blockmovingcontrol": true,
+      "cdsdataformatting": false,
+      "classiccontrols": false,
+      "componentauthoring": true,
+      "copyandmerge": false,
+      "datatablev2control": true,
+      "dataverseactionsenabled": false,
+      "delaycontrolrendering": false,
+      "delayloadscreens": true,
+      "disablecdsfileandlargeimage": false,
+      "dynamicschema": false,
+      "enableaimodelsindatapane": true,
+      "enableappembeddingux": false,
+      "enablecomponentnamemaps": false,
+      "enablecomponentscopeoldbehavior": false,
+      "enableeditcacherefreshfrequency": false,
+      "enableexcelonlinebusinessv2connector": true,
+      "enableideaspanel": true,
+      "enableonstart": true,
+      "enableonstartnavigate": false,
+      "enablepcfmoderndatasets": true,
+      "enablepowerautomatepane": true,
+      "enablerowscopeonetonexpand": false,
+      "enablerpawarecomponentdependency": true,
+      "enablerulespanel": false,
+      "enablesaveloadcleardataonweb": false,
+      "enhanceddelegation": true,
+      "enhancedgalleryinitialization": true,
+      "errorhandling": false,
+      "expandedsavedatasupport": true,
+      "exportimportcomponents2": true,
+      "externalmessage": false,
+      "formuladataprefetch": true,
+      "formularepair": true,
+      "generatedebugpublishedapp": false,
+      "herocontrols": false,
+      "improvedmediacapture": false,
+      "improvedtabstopbehavior": true,
+      "keeprecentscreensloaded": false,
+      "longlivingcache": false,
+      "nativecdsexperimental": true,
+      "optimizedforteamsmeeting": false,
+      "parallelcodegen": false,
+      "projectionmapping": true,
+      "reactformulabar": false,
+      "reliableconcurrent": true,
+      "rtlinstudiopreview": false,
+      "rtlsupport": false,
+      "searchtool": true,
+      "usedisplaynamemetadata": true,
+      "useenforcesavedatalimits": true,
+      "useexperimentalcdsconnector": true,
+      "useexperimentalsqlconnector": true,
+      "useguiddatatypes": true,
+      "usenonblockingonstartrule": true,
+      "webbarcodescanner": false
+    },
+    "Author": "",
+    "ContainsThirdPartyPcfControls": false,
+    "DefaultConnectedDataSourceMaxGetRowsCount": 500,
+    "DocumentAppType": "DesktopOrTablet",
+    "DocumentLayoutHeight": 768,
+    "DocumentLayoutLockOrientation": false,
+    "DocumentLayoutMaintainAspectRatio": true,
+    "DocumentLayoutOrientation": "landscape",
+    "DocumentLayoutScaleToFit": true,
+    "DocumentLayoutWidth": 1366,
+    "DocumentType": "App",
+    "EnableInstrumentation": false,
+    "FileID": "ba278630-f83d-4dd7-8d50-42236011d1ea",
+    "Id": "ce9aeb5c-5379-4f4c-84cc-6b2a4ff406f1",
+    "InstrumentationKey": "",
+    "LocalDatabaseReferences": "{}",
+    "Name": "ColorContrastRatio.msapp",
+    "OriginatingVersion": "1.324"
+  },
+  "PublishInfo": {
+    "AppName": "ColorContrastRatio",
+    "BackgroundColor": "RGBA(0,176,240,1)",
+    "IconColor": "RGBA(255,255,255,1)",
+    "IconName": "Edit",
+    "LogoFileName": "",
+    "PublishDataLocally": false,
+    "PublishResourcesLocally": false,
+    "PublishTarget": "player",
+    "UserLocale": "en-US"
+  },
+  "ScreenOrder": [
+    "Color Contrast Ratio Check Screen"
+  ]
+}

samples/accessibility-color-contrast-checker/sourcecode/ComponentReferences.json

@@ -0,0 +1 @@
+[]

samples/accessibility-color-contrast-checker/sourcecode/Connections/Connections.json

@@ -0,0 +1 @@
+{}