Access testing 2022

src/Sfx-Proxy/proxy.js

@@ -97,11 +97,11 @@ const port = process.env.PORT || 2500;
 //this is mainly for SFRP clusters to test against.
 process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';
 
-const basePath = __dirname  +  serveSFXV1Files ? '../Sfx' : ''
-app.use(express.static(basePath + '/wwwroot/'))
+// const basePath = __dirname  +  serveSFXV1Files ? '../Sfx' : ''
+app.use(express.static(__dirname + '/wwwroot/'))
 app.use(express.json())
 app.get('/', function(req, res) {
-    res.sendFile(path.join(basePath + 'wwwroot/index.html'));
+    res.sendFile(path.join(__dirname + 'wwwroot/index.html'));
 });
 app.all('/*', async (req, res) => {
     let resp = null;
@@ -111,6 +111,12 @@ app.all('/*', async (req, res) => {
         delete req.query['endtimeutc'];
     }
 
+
+    if(req.url.includes("robot")) {
+        res.status(200).end();
+        return;
+    }
+
     if(replayRequest && await checkFile(req)){
         resp =  await loadRequest(req);
         process.stdout.write("Playback: ");
@@ -122,6 +128,7 @@ app.all('/*', async (req, res) => {
 
     if(!resp) {
       res.status(200).end();
+      return;
     }
 
     res.status(resp.status);

src/SfxWeb/src/Styles/_navbar.scss

@@ -1,24 +1,22 @@
 .nav-wrapper {
-  a {
-        border-bottom: 4px solid transparent;
-        transition: .25s border-bottom-color;
+  display: flex;
+  gap: 10px;
 
-        &.current, &.active {
-            border-bottom-color: var(--accent-darkblue) !important;
-            color: var(--font-primary-color);
-        }
+  .nav-link {
+    padding: 0px;
+    transition: .25s border-bottom-color;
+    border-bottom-color: transparent;
+    min-width: 40px;
+    text-align: center;
 
-        &:hover {
-          border-bottom-color: var(--font-accent-color);
-        }
-      }
-
-    .nav {
-      display: flex;
-      gap: 10px;
+    &.current,
+    &.active {
+      border-bottom: 4px solid var(--accent-darkblue) !important;
+      color: var(--font-primary-color);
     }
 
-    .nav-link {
-      padding-bottom: 0px;
+    &:hover {
+      border-bottom: 4px solid var(--accent-darkblue) !important;
     }
+  }
 }

src/SfxWeb/src/Styles/_tiles.scss

@@ -55,6 +55,13 @@ $tile-width: 240px;
   grid-column: span 2;
 }
 
+@media (max-width: 400px) {
+  .long {
+    grid-column: span 1;
+    overflow: auto;
+  }
+}
+
 .tile-container {
   width: 100%;
   display: grid;

src/SfxWeb/src/app/ViewModels/DashboardViewModels.ts

@@ -15,6 +15,7 @@ export interface IDashboardViewModel {
     dataPoints: IDashboardDataPointViewModel[];
     onClick(): void;
     getDataPointTooltip(dp: IDashboardDataPointViewModel): string;
+    acessibilityText?: string;
 }
 
 export interface IDashboardDataPointViewModel {
@@ -29,7 +30,7 @@ export interface IDashboardDataPointViewModel {
 export class DashboardViewModel implements IDashboardViewModel {
     public count = 0;
     public viewPath: string;
-
+    public acessibilityText?: string = "";
     public static fromHealthStateCount(
         title: string,
         titleInSingular: string,
@@ -45,6 +46,7 @@ export class DashboardViewModel implements IDashboardViewModel {
 
         const data = new DashboardViewModel(title, titleInSingular, dps, largeTile, routes, viewPath);
 
+
         return data;
     }
 
@@ -59,6 +61,7 @@ export class DashboardViewModel implements IDashboardViewModel {
         this.viewPath = viewPath;
         this.count = dataPoints.reduce((sum, d) => sum + d.count, 0);
         this.adjustCount();
+        this.acessibilityText = `${title} has ${dataPoints[0].count} in error, ${dataPoints[1].count} in warning and ${dataPoints[2].count} are healthy.`
     }
 
     public get displayTitle(): string {

src/SfxWeb/src/app/app.component.html

@@ -75,7 +75,7 @@
     <div [ngStyle]="{'left': smallScreenSize ? '0px' : rightOffset }" class="right-panel main-content" (click)="smallScreenSize ? resize(0): null" (focusin)="smallScreenSize ? resize(0): null">
       <main>
         <div class="view-container" #main>
-          <div class="expander-container">
+          <div class="expander-container" *ngIf="!smallScreenSize">
             <span class=" expander-icon mif-vertical-align-bottom" [ngClass]="{'flip': treeWidth === '8px'}" placement="right"
                   [ngbTooltip]="(treeWidth === '8px' ? 'Expand' : 'Close') + ' tree view'"  tooltipClass="styled-tooltip" (click)="collapseSide()"></span>
           </div>

src/SfxWeb/src/app/modules/charts/dashboard-tile/dashboard-tile.component.html

@@ -1,15 +1,27 @@
-<a class="dashboard-wrapper" [routerLink]="data.viewPath ? data.viewPath : []">
-    <div class="dashboard" [ngClass]="{'has-view-path' : data.viewPath, 'dashboard-large': data.largeTile,  'dashboard-small': !data.largeTile}"  role="group">
-        <div class="dashboard-donut-chart chart-wrapper">
-            <div #chart></div>            
-        </div>
-        <div class="dashboard-datapoints">
-            <div class="dashboard-datapoint" *ngFor="let dataPoint of data.dataPoints; let i = index">
-                <div class="dashboard-datapoint-leftbar" [ngClass]="dataPoint.state.badgeClass"></div>
-                <div class="dashboard-datapoint-title">{{dataPoint.title}}</div>
-                <div class="dashboard-datapoint-number">{{dataPoint.count}}</div>
-            </div>
+<ng-template #internal>
+  <div class="dashboard-wrapper">
+    <div class="dashboard"
+      [ngClass]="{'has-view-path' : data.viewPath, 'dashboard-large': data.largeTile,  'dashboard-small': !data.largeTile}"
+      role="group">
+      <div class="dashboard-donut-chart chart-wrapper">
+        <div #chart></div>
+      </div>
+      <div class="dashboard-datapoints">
+        <div class="dashboard-datapoint" *ngFor="let dataPoint of data.dataPoints; let i = index">
+          <div class="dashboard-datapoint-leftbar" [ngClass]="dataPoint.state.badgeClass"></div>
+          <div class="dashboard-datapoint-title">{{dataPoint.title}}</div>
+          <div class="dashboard-datapoint-number">{{dataPoint.count}}</div>
         </div>
+      </div>
     </div>
-</a>
+  </div>
+</ng-template>
 
+<ng-template #default>
+  <div [attr.aria-label]="data.acessibilityText" tabindex="0" style="height: 100%;">
+    <ng-container *ngTemplateOutlet="internal"></ng-container>
+  </div>
+</ng-template>
+<a *ngIf="data.viewPath; else default" [routerLink]="data.viewPath" [attr.aria-label]="data.acessibilityText">
+  <ng-container *ngTemplateOutlet="internal"></ng-container>
+</a>

src/SfxWeb/src/app/modules/clustermap/section-overview/section-overview.component.html

@@ -9,18 +9,18 @@
 
     <div>
       <div class="flex-center" style="flex-direction: column;">
-        <div class="essential-list-item" *ngIf="repairInfo"  tooltipClass="styled-tooltip"
+        <div class="essential-list-item" *ngIf="repairInfo"  tooltipClass="styled-tooltip" tabindex="0"
           ngbTooltip="The count of Repair Jobs in progress / Recently finished Repair Job counts" container="body">
           <span class="mif-cog link space-right"></span> <span
             class="small-icon-text">{{repairInfo.inProgress}}/{{repairInfo.recent}}</span>
         </div>
-        <div class="essential-list-item"  tooltipClass="styled-tooltip"s
+        <div class="essential-list-item"  tooltipClass="styled-tooltip" tabindex="0"
           ngbTooltip="The count of disabled nodes / Nodes that are in the process of disabling" container="body"
           data-cy="disabling-nodes">
           <app-status-resolver status="Disabling" [showText]="false" class="space-right"></app-status-resolver> <span
             class="small-icon-text">{{info.statusTypeCounts[constants.Disabled]}}/{{info.statusTypeCounts[constants.Disabling]}}</span>
         </div>
-        <div class="essential-list-item" ngbTooltip="The count of down nodes"  tooltipClass="styled-tooltip" container="body" data-cy="down-nodes">
+        <div class="essential-list-item" ngbTooltip="The count of down nodes"  tooltipClass="styled-tooltip" container="body" data-cy="down-nodes" tabindex="0">
           <app-status-resolver status="Down" [showText]="false" class="space-right"></app-status-resolver><span
             class="small-icon-text">{{info.statusTypeCounts[constants.Down]}}</span>
         </div>

src/SfxWeb/src/app/modules/detail-list-templates/detail-list/detail-list.component.html

@@ -101,7 +101,7 @@
         </div>
 
         <div style="margin-top: 10px;" *ngIf="sortedFilteredList.length > listSettings.limit">
-            <ngb-pagination [collectionSize]="sortedFilteredList.length" [(page)]="page" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"
+            <ngb-pagination [collectionSize]="sortedFilteredList.length" [(page)]="page" [maxSize]="3" [rotate]="true" [boundaryLinks]="true"
                             (pageChange)="pageChange($event)" style="display: inline-block;" [pageSize]="listSettings.limit"></ngb-pagination>
             <div style="float: right; margin-top: 10px;">
                 <span *ngIf="sortedFilteredList.length > listSettings.limit">

src/SfxWeb/src/app/modules/detail-list-templates/detail-list/detail-list.component.ts

@@ -80,7 +80,6 @@ export class DetailListComponent implements OnInit, OnDestroy {
         displayPath: this.displayPath
       });
 
-      this.liveAnnouncer.announce(`There are ${this.sortedFilteredList.length} items in the search result`);
    });
   }
 

src/SfxWeb/src/app/modules/event-store/event-store-timeline/event-store-timeline.component.html

@@ -9,13 +9,11 @@
         <ng-content select="[buttons]"></ng-content>
 
 
-        <div (click)="flipShowControls();" >
-            <div class="simple-button flip-button">
-                <span class="mif-arrow-drop-up mif-2x" style="transition: .5s;"
-                    [ngClass]="{'rotated': showControls}"></span>
-                {{showControls ? '' : 'Show Controls'}}
-            </div>
-        </div>
+        <button class="simple-button flip-button" (click)="flipShowControls();">
+            <span class="mif-arrow-drop-up mif-2x" style="transition: .5s;"
+                [ngClass]="{'rotated': showControls}"></span>
+            {{showControls ? '' : 'Show Controls'}}
+        </button>
 
         <ng-container  *ngIf="showControls">
             <button type="button" class="simple-button margined" (click)="fitData()"  tooltipClass="styled-tooltip"
@@ -49,10 +47,9 @@
             </button>
 
             <div class="margined">
-              <label style="width: 105px; display: flex; gap: 10px; align-items: center;">
+              <label style="width: 105px; display: flex; gap: 10px; align-items: center;" [attr.aria-label]="(isUTC ? 'Untoggle' : 'Toggle') + ' to use ' + (isUTC ? 'Local Time' : 'UTC time') ">
                 <input type="checkbox" [(ngModel)]="isUTC" (ngModelChange)="flipTimeZone()">
-                {{isUTC ? 'Local
-                Time' : 'UTC'}}</label>
+                Use UTC time</label>
             </div>
         </ng-container>
     </div>

src/SfxWeb/src/app/modules/event-store/event-store/event-store.component.html

@@ -1,5 +1,5 @@
 <div class="essen-pane detail-pane">
-  <div class="flex-container wrap" style="margin-bottom: 10px;">
+  <div class="flex-container" style="margin-bottom: 10px; flex-wrap: wrap; gap: 10px;">
     <div class="flex-container wrap">
         <app-dual-date-picker [minDate]="startDateMin" [maxDate]="startDateMax" (dateChanged)="setNewDates($event)"
               [currentStartDate]="startDate" [currentEndDate]="endDate"></app-dual-date-picker>

src/SfxWeb/src/app/modules/event-store/event-store/event-store.component.scss

@@ -48,7 +48,7 @@ $border-radius: 5px;
 }
 
 .slider-wrapper {
-    min-width: 400px;
+    min-width: 300px;
     flex: 1;
     padding-left: 15px;
     margin-right: 15px;
@@ -58,6 +58,12 @@ $border-radius: 5px;
     }
 }
 
+@media (max-width: 400px) {
+  .slider-wrapper {
+    min-width: 200px;
+  }
+}
+
 .flex-container {
     display: flex;
     flex-direction: row;

src/SfxWeb/src/app/modules/infrastructure-job/infrastructure-job-tile/infrastructure-job-tile.component.html

@@ -10,7 +10,7 @@
   </div>
 
   <div>
-    <div ngbNav #nav="ngbNav">
+    <div ngbNav #nav="ngbNav" class="nav-wrapper">
       <div [ngbNavItem]="1">
         <a ngbNavLink style="font-size: 12pt;">
           Condensed

src/SfxWeb/src/app/modules/upgrade-progress/upgrade-info/upgrade-info.component.scss

@@ -44,3 +44,10 @@ h5 {
   flex: 2;
   min-width: 500px;
 }
+
+
+@media (max-width: 400px) {
+  .overview-container {
+    min-width: 0;
+  }
+}

src/SfxWeb/src/app/shared/component/advanced-option/advanced-option.component.html

@@ -1,13 +1,13 @@
 <!-- the last tabbed element needs to close the drop down for accessability compliance -->
-<div ngbDropdown placement="bottom-right" (openChange)="closeChange($event)" #myDrop="ngbDropdown">
+<div ngbDropdown placement="bottom-right" (openChange)="closeChange($event)" #myDrop="ngbDropdown" [autoClose]="false" id="container" >
   <button class="flat-button" ngbDropdownToggle aria-label="settings drop down">
     <span class="mif-tools"></span>
   </button>
   <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropdown-container">
     <ul style="margin: 0px; padding: 0px; min-width: 200px;">
       <li ngbDropdownItem>
         <label>
-          <span tabindex="0" class="mif-info"  tooltipClass="styled-tooltip"
+          <span tabindex="0" class="mif-info" tooltipClass="styled-tooltip" tabindex="0"
             ngbTooltip="Advanced mode is only meant to be turned on to perform potentially dangerous operations. Use with caution."></span>
           Advanced Mode
           <input type="checkbox" [(ngModel)]="status" (ngModelChange)="change()" [attr.aria-checked]="status">
@@ -16,7 +16,8 @@
 
       <li ngbDropdownItem>
         <label>
-          <span tabindex="0" class="mif-info" ngbTooltip="Hide all messages in the bottom right."  tooltipClass="styled-tooltip"></span>
+          <span tabindex="0" class="mif-info" tooltipClass="styled-tooltip" tabindex="0"
+            ngbTooltip="Hide all messages in the bottom right."></span>
           Suppress Messages
           <input type="checkbox" [(ngModel)]="messageService.suppressMessage"
             [attr.aria-checked]="messageService.suppressMessage">
@@ -25,18 +26,20 @@
 
       <li ngbDropdownItem>
         <label>
-          <span tabindex="0" class="mif-info" title="Set whether telemetry is enabled." style="padding-right: 5px;"></span>
+          <span tabindex="0" class="mif-info" tooltipClass="styled-tooltip" tabindex="0"
+          ngbTooltip="Set whether telemetry is enabled."></span>
           Enable Telemetry
           <input type="checkbox" [(ngModel)]="telemetryService.telemetryEnabled" (ngModelChange)="telemetryChange()">
         </label>
       </li>
 
       <li ngbDropdownItem>
         <label>
-          <span tabindex="0" class="mif-info" title="Display items per page in lists"></span>
+          <span tabindex="0" class="mif-info" tooltipClass="styled-tooltip" tabindex="0"
+          ngbTooltip="Display items per page in lists"></span>
           Page size
           <input type="number" min="5" [(ngModel)]="settingsService.paginationLimit" class="input-flat"
-            style="width: 50px; margin-left: 5px">
+            style="width: 50px;">
         </label>
       </li>
 

src/SfxWeb/src/app/shared/component/advanced-option/advanced-option.component.scss

@@ -23,6 +23,13 @@ tr {
 label {
   margin-bottom: 0px;
   width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  >:last-child {
+    margin-left: auto;
+  }
 }
 
 input {