Fixed several accessibility issues. (#781)

* Added focus state for switch control.
* Fixed labels for inputs in test console.
* Fixed luminosity contrast ratio issue for several contols.
* Fixed contrast between foreground and background colors for links in default template.
* Fixed contrast between foreground and background colors for controls in default template.
* Upgraded paperbits libraries to 0.1.304.
* Adjusted build scripts.
* Adjusted styles.

package.json

@@ -23,69 +23,69 @@
         "postinstall": "npm rebuild node-sass"
     },
     "devDependencies": {
-        "@types/chai": "^4.2.11",
+        "@types/chai": "^4.2.12",
         "@types/google-maps": "^3.2.2",
         "@types/knockout": "^3.4.67",
         "@types/knockout.mapping": "^2.0.35",
         "@types/knockout.validation": "0.0.37",
-        "@types/lodash": "^4.14.155",
+        "@types/lodash": "^4.14.158",
         "@types/mime-types": "^2.1.0",
-        "@types/mocha": "^7.0.2",
-        "@types/node": "^14.0.12",
-        "autoprefixer": "^9.8.0",
+        "@types/mocha": "8.0.0",
+        "@types/node": "^14.0.26",
+        "autoprefixer": "^9.8.5",
         "awesome-typescript-loader": "^5.2.1",
         "azure-storage": "^2.10.3",
         "chai": "^4.2.0",
         "clean-webpack-plugin": "2.0.2",
-        "copy-webpack-plugin": "^6.0.2",
-        "css-loader": "^3.5.3",
+        "copy-webpack-plugin": "^6.0.3",
+        "css-loader": "^3.6.0",
         "extract-text-webpack-plugin": "^4.0.0-beta.0",
         "file-loader": "^6.0.0",
         "html-loader": "^1.1.0",
         "mini-css-extract-plugin": "^0.9.0",
-        "mocha": "^7.2.0",
+        "mocha": "^8.0.1",
         "node-sass": "^4.14.1",
         "path": "^0.12.7",
         "postcss-loader": "^3.0.0",
         "raw-loader": "^4.0.1",
-        "sass-loader": "^8.0.2",
+        "sass-loader": "^9.0.2",
         "style-loader": "^1.2.1",
-        "terser-webpack-plugin": "^3.0.3",
-        "ts-node": "8.0.2",
+        "terser-webpack-plugin": "^3.0.7",
+        "ts-node": "8.10.2",
         "tslint": "^6.1.2",
-        "typescript": "3.9.5",
+        "typescript": "3.9.7",
         "url-loader": "^4.1.0",
-        "webpack": "^4.43.0",
-        "webpack-cli": "^3.3.11",
+        "webpack": "^4.44.0",
+        "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.0",
-        "webpack-merge": "^4.2.2"
+        "webpack-merge": "^5.0.9"
     },
     "dependencies": {
-        "@paperbits/azure": "0.1.290",
-        "@paperbits/common": "0.1.290",
-        "@paperbits/core": "0.1.290",
-        "@paperbits/prosemirror": "0.1.290",
-        "@paperbits/styles": "0.1.290",
-        "@webcomponents/custom-elements": "1.4.1",
-        "@webcomponents/shadydom": "^1.7.3",
+        "@paperbits/azure": "0.1.304",
+        "@paperbits/common": "0.1.304",
+        "@paperbits/core": "0.1.304",
+        "@paperbits/prosemirror": "0.1.304",
+        "@paperbits/styles": "0.1.304",
+        "@webcomponents/custom-elements": "1.4.2",
+        "@webcomponents/shadydom": "^1.7.4",
         "adal-vanilla": "^1.0.18",
         "applicationinsights-js": "^1.0.21",
-        "client-oauth2": "4.3.0",
+        "client-oauth2": "4.3.2",
         "core-js": "^3.6.5",
         "d3": "^5.16.0",
-        "google-maps": "^4.2.3",
+        "google-maps": "^4.3.2",
         "js-beautify": "^1.11.0",
         "knockout": "^3.5.1",
         "knockout-mapping": "^2.6.0",
         "knockout.validation": "^2.0.4",
-        "liquidjs": "^9.12.0",
-        "lodash": "^4.17.15",
+        "liquidjs": "^9.14.1",
+        "lodash": "^4.17.19",
         "lunr": "^2.3.8",
-        "moment": "^2.26.0",
-        "msal": "^1.3.1",
+        "moment": "^2.27.0",
+        "msal": "^1.3.3",
         "prismjs": "^1.20.0",
-        "remark": "^12.0.0",
-        "remark-html": "^11.0.2",
+        "remark": "^12.0.1",
+        "remark-html": "^12.0.0",
         "slick": "^1.12.2",
         "topojson-client": "^3.1.0",
         "truncate-html": "^1.0.3",

src/components/content/content.ts

@@ -23,7 +23,7 @@ export class ContentWorkshop {
     }
 
     public async publish(): Promise<void> {
-        this.logger.traceEvent("Click: Publish website");
+        this.logger.trackEvent("Click: Publish website");
 
         if (!await this.authenticator.isAuthenticated()) {
             throw new AppError("Cannot publish website", new MapiError("Unauthorized", "You're not authorized."));
@@ -47,7 +47,7 @@ export class ContentWorkshop {
         }
         catch (error) {
             this.viewManager.notifyError("Operations", `Unable to schedule publishing. Please try again later.`);
-            this.logger.traceError(error);
+            this.logger.trackError(error);
         }
     }
 

src/components/content/resetDetails.ts

@@ -28,7 +28,7 @@ export class ResetDetailsWorkshop {
 
     public async reset(): Promise<void> {
         try {
-            this.logger.traceEvent("Click: Reset website");
+            this.logger.trackEvent("Click: Reset website");
 
             this.offlineObjectStorage.discardChanges();
             this.viewManager.clearJourney();
@@ -38,13 +38,13 @@ export class ResetDetailsWorkshop {
 
             await this.provisioningService.cleanup();
 
-            this.logger.traceEvent("Success: Website reset");
+            this.logger.trackEvent("Success: Website reset");
 
             window.location.reload();
         } 
         catch (error) {
             this.viewManager.notifyError("Confirm", `Unable to reset website. Please try again later.`);
-            this.logger.traceError(error);
+            this.logger.trackError(error);
         }
     }
 }

src/components/operations/operation-details/ko/runtime/operation-console.html

@@ -74,11 +74,12 @@ <h3>Authorization</h3>
     <!-- ko if: $component.authorizationServer -->
     <div class="row flex flex-row">
         <div class="col-4">
-            <input type="text" readonly class="form-control form-control-sm" data-bind="value: $component.authorizationServer().displayName" />
+            <label for="authServer" class="text-monospace form-label"
+                data-bind="text: $component.authorizationServer().displayName"></label>
         </div>
         <div class="col-6">
             <div class="form-group">
-                <select id="subscriptionKey" class="form-control"
+                <select id="authServer" class="form-control"
                     data-bind="options: $component.authorizationServer().grantTypes, value: $component.selectedGrantType, optionsCaption: 'No auth'">
                 </select>
             </div>
@@ -106,7 +107,7 @@ <h3>Authorization</h3>
                 </select>
                 <!-- /ko -->
                 <!-- ko if: !$component.products() || $component.products().length === 0 -->
-                <input type="text" class="form-control" placeholder="subscription key"
+                <input id="subscriptionKey" type="text" class="form-control" placeholder="subscription key"
                     data-bind="textInput: $component.selectedSubscriptionKey" />
                 <!-- /ko -->
             </div>

src/errors/unhandledErrorHandler.ts

@@ -10,11 +10,11 @@ export class UnhandledErrorHandler {
     }
 
     public handlerError(event: ErrorEvent): void {
-        this.logger.traceError(event.error);
+        this.logger.trackError(event.error);
     }
 
     public handlerPromiseRejection(event: PromiseRejectionEvent): void {
         debugger;
-        this.logger.traceError(event.reason);
+        this.logger.trackError(event.reason);
     }
 }

src/logging/appInsightsLogger.ts

@@ -12,22 +12,30 @@ export class LogService implements Logger {
             console.warn("AppInsights instrumentation key wasn't specified or cannot be used in current environment.");
         }
 
-        this.traceSession();
+        this.trackSession();
     }
 
-    public async traceSession(): Promise<void> {
-        this.traceEvent(`Session started`);
+    public async trackSession(properties?: object): Promise<void> {
+        this.trackEvent(`Session started`);
     }
 
-    public async traceEvent(eventName: string, properties?: Bag<string>, measurments?: Bag<number>): Promise<void> {
-        AppInsights.trackEvent(eventName, properties, measurments);
+    public async trackEvent(eventName: string, properties?: Bag<string>): Promise<void> {
+        AppInsights.trackEvent(eventName, properties);
     }
 
-    public async traceError(error: Error, handledAt?: string): Promise<void> {
-        AppInsights.trackException(error, handledAt);
+    public async trackError(error: Error, properties?: Bag<string>): Promise<void> {
+        AppInsights.trackException(error);
     }
 
-    public async traceView(name: string): Promise<void> {
+    public async trackView(viewName: string, properties?: Bag<string>): Promise<void> {
         AppInsights.trackPageView(name);
     }
+
+    public async trackMetric(metricName: string, properties?: Bag<string>): Promise<void> {
+        // Not implemented
+    }
+
+    public async trackDependency(name: string, properties?: Bag<string>): Promise<void> {
+        // Not implemented
+    }
 }

src/themes/designer/styles/editors/colorPicker.scss

@@ -1,9 +1,8 @@
-@import "forms.scss";
+// @import "forms.scss";
 
 .pickr {
   position: relative;
   overflow: visible;
-  min-height: 210px;
 }
 
 .pickr * {

src/themes/designer/styles/editors/colorSelector.scss

@@ -12,6 +12,12 @@
     line-height: 30px;
 }
 
+.pseudo-transparent-bckg {
+    position: relative;
+    overflow: hidden;
+    @include pseudo-transparent-bckg();
+}
+
 .palette {
     list-style: none;
     padding: 0;

src/themes/designer/styles/forms.scss

@@ -7,8 +7,7 @@
     padding: 0;
     border: none;
 
-    &.ps {
-        // perfect-scrollbar
+    &.ps { // perfect-scrollbar
         padding-right: 15px;
     }
 }
@@ -203,4 +202,4 @@ hr {
     max-height: 450px;
     min-width: 150px;
     min-height: 150px;
-}
+}