Create pipeline that will automatically check for Accessibility Issues

.github/workflows/mainCI.yml

@@ -0,0 +1,36 @@
+name: CI
+
+on:
+  pull_request:
+    branches: 
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Use Node.js 16.x
+        uses: actions/checkout@v2
+        with:
+          node-version: 16.x
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build-static-data
+
+      - name: Scan for accessibility issues
+        uses: microsoft/accessibility-insights-action@v2
+        with: 
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          site-dir: ${{ github.workspace }}/dist/website 
+          localhost-port: 12345
+          input-urls: http://localhost:12345/profile http://localhost:12345/500 http://localhost:12345/404
+
+      - name: Upload report artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: accessibility-reports
+          path: ${{ github.workspace }}/_accessibility-reports

environmentConstants.js

@@ -0,0 +1,6 @@
+
+const staticDataEnvironment = "staticData";
+
+module.exports = {
+    staticDataEnvironment
+}

package.json

@@ -20,7 +20,8 @@
         "test": "node node_modules/mocha/bin/_mocha -r mocha.js src/**/*.spec.ts tests/e2e/**/*.spec.ts --timeout 30000",
         "deploy-function": "npm run build-function && cd dist/function && func azure functionapp publish < function app name >",
         "publish": "webpack --config webpack.publisher.js && node dist/publisher/index.js && npm run serve-website",
-        "serve-website": "webpack serve --open --static ./dist/website --no-stats"
+        "serve-website": "webpack serve --open --static ./dist/website --no-stats",
+        "build-static-data": "webpack --config webpack.staticData.js && node dist/publisher/index.js"
     },
     "devDependencies": {
         "@azure/storage-blob": "12.8.0",

src/apim.publish.module.ts

@@ -37,6 +37,9 @@ import { ApiProductsModule } from "./components/apis/api-products/ko/apiProducts
 import { RuntimeConfigPublisher } from "./publishing/runtimeConfigPublisher";
 import { RuntimeConfigBuilder } from "./publishing/runtimeConfigBuilder";
 import { CustomHtmlPublishModule } from "./components/custom-html/customHtml.publish.module";
+import { StaticDataHttpClient } from "./services/staticDataHttpClient";
+import { PublisherStaticDataProvider } from "./services/publisherStaticDataProvider";
+import {staticDataEnvironment} from "./../environmentConstants"
 
 export class ApimPublishModule implements IInjectorModule {
     public register(injector: IInjector): void {
@@ -63,7 +66,7 @@ export class ApimPublishModule implements IInjectorModule {
         injector.bindModule(new ReportsModule());
         injector.bindModule(new ValidationSummaryModule());
         injector.bindModule(new CustomHtmlPublishModule());
-        injector.bindSingleton("tenantService", TenantService);        
+        injector.bindSingleton("tenantService", TenantService);
         injector.bindSingleton("backendService", BackendService);
         injector.bindSingleton("userService", StaticUserService);
         injector.bindSingleton("roleService", StaticRoleService);
@@ -80,6 +83,11 @@ export class ApimPublishModule implements IInjectorModule {
         injector.bindSingleton("runtimeConfigBuilder", RuntimeConfigBuilder);
         injector.bindToCollection("publishers", AadConfigPublisher);
         injector.bindToCollection("publishers", RuntimeConfigPublisher);
-
+
+        if (process.env.NODE_ENV === staticDataEnvironment) {
+            injector.bind("httpClient", StaticDataHttpClient);
+            injector.bind("dataProvider", PublisherStaticDataProvider);
+        }
+
     }
 }

src/apim.runtime.module.ts

@@ -77,7 +77,10 @@ import { UsersService } from "./services/usersService";
 import { ApimSettingsProvider } from "./configuration/apimSettingsProvider";
 import { AccessTokenRefrsher } from "./authentication/accessTokenRefresher";
 import { Pagination } from "./components/pagination/pagination";
+import { StaticDataHttpClient } from "./services/staticDataHttpClient";
 import { OauthServerConfiguration } from "./components/operations/operation-details/ko/runtime/oauth-server-configuration";
+import { RuntimeStaticDataProvider } from "./services/runtimeStaticDataProvider";
+import {staticDataEnvironment} from "./../environmentConstants"
 
 
 export class ApimRuntimeModule implements IInjectorModule {
@@ -149,5 +152,10 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bindToCollection("autostart", AccessTokenRefrsher);
         injector.bind("pagination", Pagination);
         injector.bind("oauthServerConfiguration", OauthServerConfiguration);
+
+        if (process.env.NODE_ENV === staticDataEnvironment) {
+            injector.bind("httpClient", StaticDataHttpClient);
+            injector.bind("dataProvider", RuntimeStaticDataProvider);
+        }
     }
 }

src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html

@@ -1,5 +1,5 @@
 <div class="form-group">
-    <div class="input-group" tabindex="0" role="button" aria-label="APIs">
+    <div class="input-group" tabindex="0" aria-label="APIs">
         <div class="form-control" data-toggle="dropdown">
             <span data-bind="text: selection"></span>
             <!-- ko if: selectedApi() -->
@@ -14,59 +14,59 @@
             <!-- /ko -->
             <!-- /ko -->
         </div>
-        <button class="input-group-addon no-border" data-toggle="dropdown">
+        <button class="input-group-addon no-border" data-toggle="dropdown" aria-label="Expand APIs list">
             <i class="icon-emb icon-emb-chevron-down"></i>
         </button>
         <div class="dropdown">
             <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search APIs"
                 data-bind="textInput: pattern" autofocus />
 
             <!-- <tag-input params="{ scope: 'apis', onChange: onTagsChange }"></tag-input> -->
-
-                <!-- ko if: working -->
-                <spinner class="block" role="presentation"></spinner>
-                <!-- /ko -->
 
-                <!-- ko ifnot: working -->
-                <!-- ko foreach: { data: apiGroups, as: 'group' } -->
-                <div class="tag-group">
-                    <span class="tag-item" role="group" data-bind="text: group.tag"></span>
-                </div>
-                <div class="menu menu-vertical" role="list">
-                    <!-- ko foreach: { data: group.items, as: 'item' } -->
-                    <a href="#" role="listitem" class="nav-link text-truncate" data-dismiss
-                        data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }">
-                        <span data-bind="text: item.displayName"></span>
-                        <!-- ko if: item.type === 'soap' -->
-                        <span class="badge badge-soap">SOAP</span>
-                        <!-- /ko -->
-                        <!-- ko if: item.type === 'websocket' -->
-                        <span class="badge badge-soap">WebSocket</span>
-                        <!-- /ko -->
-                        <!-- ko if: item.type === 'graphql' -->
-                        <span class="badge badge-soap">GraphQL</span>
-                        <!-- /ko -->
-                        <!-- ko if: item.apiVersion -->
-                        - <span data-bind="text: item.apiVersion"></span>
-                        <!-- /ko -->
-                    </a>
+            <!-- ko if: working -->
+            <spinner class="block" role="presentation"></spinner>
+            <!-- /ko -->
+
+            <!-- ko ifnot: working -->
+            <!-- ko foreach: { data: apiGroups, as: 'group' } -->
+            <div class="tag-group">
+                <span class="tag-item" role="group" data-bind="text: group.tag"></span>
+            </div>
+            <div class="menu menu-vertical" role="list">
+                <!-- ko foreach: { data: group.items, as: 'item' } -->
+                <a href="#" role="listitem" class="nav-link text-truncate" data-dismiss
+                    data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }">
+                    <span data-bind="text: item.displayName"></span>
+                    <!-- ko if: item.type === 'soap' -->
+                    <span class="badge badge-soap">SOAP</span>
+                    <!-- /ko -->
+                    <!-- ko if: item.type === 'websocket' -->
+                    <span class="badge badge-soap">WebSocket</span>
                     <!-- /ko -->
-                </div>
+                    <!-- ko if: item.type === 'graphql' -->
+                    <span class="badge badge-soap">GraphQL</span>
+                    <!-- /ko -->
+                    <!-- ko if: item.apiVersion -->
+                    - <span data-bind="text: item.apiVersion"></span>
+                    <!-- /ko -->
+                </a>
                 <!-- /ko -->
+            </div>
+            <!-- /ko -->
 
-                <!-- ko if: apiGroups().length === 0 -->
-                <div class="list-item-empty">No APIs found</div>
-                <!-- /ko -->
+            <!-- ko if: apiGroups().length === 0 -->
+            <div class="list-item-empty">No APIs found</div>
+            <!-- /ko -->
 
-                <!-- ko ifnot: working -->
-                <!-- ko if: $component.totalPages() > 1 -->
-                <pagination params="{ pageNumber: $component.pageNumber, totalPages: $component.totalPages }">
-                </pagination>
-                <!-- /ko -->
-                <!-- /ko -->
+            <!-- ko ifnot: working -->
+            <!-- ko if: $component.totalPages() > 1 -->
+            <pagination params="{ pageNumber: $component.pageNumber, totalPages: $component.totalPages }">
+            </pagination>
+            <!-- /ko -->
+            <!-- /ko -->
+
+            <!-- /ko -->
 
-                <!-- /ko -->
-
         </div>
     </div>
 </div>

src/components/operations/operation-details/ko/runtime/oauth-server-configuration.html

@@ -9,10 +9,10 @@
     <div class="col-6 align-self-center">
         <div class="form-group">
             <div class="input-group">
-                <input autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                    spellcheck="false" aria-label="Supported grant flows" readonly
-                    data-bind="textInput: $component.displayedGrantFlows()">
-                <button class="input-group-addon no-border" data-bind="copyToClipboard: $component.displayedGrantFlows()">
+                <input autocomplete="off" class="form-control form-control-sm" placeholder="value" spellcheck="false"
+                    aria-label="Supported grant flows" readonly data-bind="textInput: $component.displayedGrantFlows()">
+                <button class="input-group-addon no-border"
+                    data-bind="copyToClipboard: $component.displayedGrantFlows()" aria-label="Copy to clipboard">
                     <i class="icon-emb icon-emb-duplicate"></i>
                 </button>
             </div>
@@ -31,9 +31,10 @@
     <div class="col-6 align-self-center">
         <div class="form-group">
             <div class="input-group" data-bind="with: $component.authorizationServer">
-                <input autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                    spellcheck="false" aria-label="Client id" readonly data-bind="textInput: clientId">
-                <button class="input-group-addon no-border" data-bind="copyToClipboard: clientId">
+                <input autocomplete="off" class="form-control form-control-sm" placeholder="value" spellcheck="false"
+                    aria-label="Client id" readonly data-bind="textInput: clientId">
+                <button class="input-group-addon no-border" data-bind="copyToClipboard: clientId"
+                    aria-label="Copy to clipboard">
                     <i class="icon-emb icon-emb-duplicate"></i>
                 </button>
             </div>
@@ -57,7 +58,8 @@
                     data-bind="textInput: $component.authorizationServer().authorizationEndpoint">
 
                 <button class="input-group-addon no-border"
-                    data-bind="copyToClipboard: $component.authorizationServer().authorizationEndpoint">
+                    data-bind="copyToClipboard: $component.authorizationServer().authorizationEndpoint"
+                    aria-label="Copy to clipboard">
                     <i class="icon-emb icon-emb-duplicate"></i>
                 </button>
             </div>
@@ -76,11 +78,12 @@
     <div class="col-6 align-self-center">
         <div class="form-group">
             <div class="input-group">
-                <input autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                    spellcheck="false" aria-label="Token endpoint" readonly
+                <input autocomplete="off" class="form-control form-control-sm" placeholder="value" spellcheck="false"
+                    aria-label="Token endpoint" readonly
                     data-bind="textInput: $component.authorizationServer().tokenEndpoint">
                 <button class="input-group-addon no-border"
-                    data-bind="copyToClipboard: $component.authorizationServer().tokenEndpoint">
+                    data-bind="copyToClipboard: $component.authorizationServer().tokenEndpoint"
+                    aria-label="Copy to clipboard">
                     <i class="icon-emb icon-emb-duplicate"></i>
                 </button>
             </div>
@@ -99,10 +102,10 @@
     <div class="col-6 align-self-center">
         <div class="form-group">
             <div class="input-group">
-                <input autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                    spellcheck="false" aria-label="Scopes" readonly
-                    data-bind="textInput: $component.displayedScopes">
-                <button class="input-group-addon no-border" data-bind="copyToClipboard: $component.displayedScopes">
+                <input autocomplete="off" class="form-control form-control-sm" placeholder="value" spellcheck="false"
+                    aria-label="Scopes" readonly data-bind="textInput: $component.displayedScopes">
+                <button class="input-group-addon no-border" data-bind="copyToClipboard: $component.displayedScopes"
+                    aria-label="Copy to clipboard">
                     <i class="icon-emb icon-emb-duplicate"></i>
                 </button>
             </div>

src/components/products/product-list/ko/runtime/product-list-dropdown.html

@@ -3,7 +3,7 @@
         <div class="form-control" tabindex="0" role="button" aria-label="Products" data-toggle="dropdown">
             <span data-bind="text: selection"></span>
         </div>
-        <button class="input-group-addon no-border" data-toggle="dropdown">
+        <button class="input-group-addon no-border" data-toggle="dropdown" aria-label="Expand products list">
             <i class="icon-emb icon-emb-chevron-down"></i>
         </button>
         <div class="dropdown">

src/components/users/profile/ko/runtime/profile.html

@@ -21,7 +21,8 @@
     <div class="row">
         <div class="col-md-12">
             <button type="button" class="button button-default" data-bind="click: toggleEdit">Change name</button>
-            <button type="button" class="button button-default" data-bind="click: toggleEditPassword">Change password</button>
+            <button type="button" class="button button-default" data-bind="click: toggleEditPassword">Change
+                password</button>
             <button type="button" class="button button-default" data-bind="click: closeAccount">Close account</button>
         </div>
     </div>
@@ -36,8 +37,8 @@
     <div class="row">
         <div class="col-md-3"><label for="firstName">First name</label></div>
         <div class="col-md-9">
-            <input type="text" class="form-control" aria-required="true" autofocus="autofocus" id="firstName" name="firstName"
-                autocomplete="first-name" data-bind="textInput: firstName" />
+            <input type="text" class="form-control" aria-required="true" autofocus="autofocus" id="firstName"
+                name="firstName" autocomplete="first-name" data-bind="textInput: firstName" />
         </div>
     </div>
     <div class="row">
@@ -57,7 +58,8 @@
         <!-- /ko -->
         <!-- ko ifnot: working -->
         <div class="col-md-12">
-            <button type="button" class="button button-default" data-bind="click: changeAccountInfo, enable: isUserChanged()">Save</button>
+            <button type="button" class="button button-default"
+                data-bind="click: changeAccountInfo, enable: isUserChanged()">Save</button>
             <button type="button" class="button button-default" data-bind="click: toggleEdit">Cancel</button>
         </div>
         <!-- /ko -->

src/services/IStaticDataProvider.ts

@@ -0,0 +1,3 @@
+export default interface IStaticDataProvider {
+    getStaticData(objectType: string): Promise<any>;
+}

src/services/publisherStaticDataProvider.ts

@@ -0,0 +1,23 @@
+import path = require("path");
+import  IStaticDataProvider  from "./IStaticDataProvider";
+const fs = require('fs');
+
+export class PublisherStaticDataProvider implements IStaticDataProvider {
+    getStaticData(objectType: string): Promise<any> {
+        let fullPath = objectType == "defaultStaticData.json" ?
+            path.join(__dirname, '../../tests/mocks/defaultStaticData.json') : path.join(__dirname, '../../templates/default.json');
+        let filePath = path.resolve(fullPath);
+
+        return new Promise<any>((resolve, reject) => {
+            fs.readFile(filePath, { encoding: 'utf-8' }, function (err, data) {
+                if (err) {
+                    reject();
+                    return;
+                }
+
+                const obj = JSON.parse(data);
+                resolve(obj);
+            });
+        });
+    }
+}

src/services/runtimeStaticDataProvider.ts

@@ -0,0 +1,23 @@
+import { HttpMethod } from "@paperbits/common/http";
+import { XmlHttpRequestClient } from "@paperbits/common/http/xmlHttpRequestClient";
+import  IStaticDataProvider  from "./IStaticDataProvider";
+
+export class RuntimeStaticDataProvider implements IStaticDataProvider {
+    private readonly httpClient: XmlHttpRequestClient;
+    constructor() {
+        this.httpClient = new XmlHttpRequestClient();
+    }
+    getStaticData(objectType: string): Promise<any> {
+        let path = objectType == "defaultStaticData.json" ? "/tests/mocks/defaultStaticData.json" : "/editors/templates/default.json";
+
+        return new Promise<any>(async (resolve, reject) => {
+            let result = await this.httpClient.send({
+                method: HttpMethod.get,
+                url: path,
+                headers: [],
+                body: {}
+            });
+            resolve(result.toObject());
+        });
+    }
+}