From ec47f91dc797bb1132ff82ef90a00715859b4935 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 12 Sep 2019 15:02:24 -0700
Subject: [PATCH 1/2] SHIBUI-1408 Added a11y element for changes

---
 .../component/property/array-property.component.html   | 10 +++++++---
 .../component/property/array-property.component.ts     |  2 +-
 .../property/primitive-property.component.html         |  3 +++
 ui/src/app/metadata/domain/model/property.ts           |  1 +
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/metadata/configuration/component/property/array-property.component.html b/ui/src/app/metadata/configuration/component/property/array-property.component.html
index ed7591702..bfda5c422 100644
--- a/ui/src/app/metadata/configuration/component/property/array-property.component.html
+++ b/ui/src/app/metadata/configuration/component/property/array-property.component.html
@@ -1,7 +1,8 @@
 <div *ngIf="property.items.type === 'object'" [ngClass]="{'bg-diff': property.differences}">
     <div class="p-2" role="term" [translate]="property.name">{{ property.name }}</div>
     <div *ngFor="let item of range; let i = index;" class="py-2 border-top" ngClass="{'bg-diff': !property.differences}">
-        <div *ngFor="let prop of getKeys(property.items); let n = index;" class="d-flex py-2">
+        <div *ngFor="let prop of getKeys(property.items); let n = index;" class="d-flex py-2" tabindex="0">
+            <span class="sr-only" *ngIf="property.differences">Changed:</span>
             <div [ngStyle]="{'width': width}" class="pl-4">
                 <span [translate]="property.items.properties[prop].title">{{ property.items.properties[prop].title }}</span>
             </div>
@@ -36,7 +37,9 @@
         <div *ngIf="property.widget && property.widget.data">
             <div *ngFor="let item of dataList"
                 class="d-flex justify-content-start border-bottom border-light"
-                [ngClass]="{'bg-diff': property.differences && item.differences}">
+                [ngClass]="{'bg-diff': property.differences && item.differences}"
+                tabindex="0">
+                <span class="sr-only" *ngIf="item.differences">Changed:</span>
                 <span class="p-2" role="term" [translate]="item.label" [ngStyle]="{'width': width}">{{ item.label }}</span>
                 <div *ngFor="let v of property.value"
                     class="py-2"
@@ -53,7 +56,8 @@
     </ng-container>
 </ng-container>
 <ng-template #listref>
-    <div class="d-flex align-items-start border-bottom border-light" [ngClass]="{'bg-diff': property.differences}">
+    <div class="d-flex align-items-start border-bottom border-light" [ngClass]="{'bg-diff': property.differences}" tabindex="0">
+        <span class="sr-only" *ngIf="property.differences">Changed:</span>
         <span class="p-2" role="term" [translate]="property.name" [ngStyle]="{'width': width}">{{ property.name }}</span>
         <ng-container *ngFor="let v of property.value">
             <p [ngStyle]="{'width': width}" class="text-secondary m-0" *ngIf="!v || !v.length">-</p>
diff --git a/ui/src/app/metadata/configuration/component/property/array-property.component.ts b/ui/src/app/metadata/configuration/component/property/array-property.component.ts
index e3e995c2b..4d09d9a8f 100644
--- a/ui/src/app/metadata/configuration/component/property/array-property.component.ts
+++ b/ui/src/app/metadata/configuration/component/property/array-property.component.ts
@@ -33,7 +33,7 @@ export class ArrayPropertyComponent extends ConfigurationPropertyComponent imple
         return UriValidator.isUri(str);
     }
 
-    get dataList(): { key: string, label: string }[] {
+    get dataList(): { key: string, label: string, differences?: boolean }[] {
         return this.property.widget.data;
     }
 }
diff --git a/ui/src/app/metadata/configuration/component/property/primitive-property.component.html b/ui/src/app/metadata/configuration/component/property/primitive-property.component.html
index 6abfa315d..5e582350d 100644
--- a/ui/src/app/metadata/configuration/component/property/primitive-property.component.html
+++ b/ui/src/app/metadata/configuration/component/property/primitive-property.component.html
@@ -1,3 +1,5 @@
+<div tabindex="0">
+<span class="sr-only" *ngIf="property.differences">Changed:</span>
 <div *ngIf="property.name"
     class="d-flex border-bottom border-light p-2"
     [ngClass]="{'bg-diff' : property.differences}">
@@ -9,4 +11,5 @@
         class="d-block"
         role="definition"
         [ngStyle]="{'width': width}">{{ v ? v : (v === false) ? v : '-' }}</span>
+</div>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/metadata/domain/model/property.ts b/ui/src/app/metadata/domain/model/property.ts
index dba90e82e..51a4bf06e 100644
--- a/ui/src/app/metadata/domain/model/property.ts
+++ b/ui/src/app/metadata/domain/model/property.ts
@@ -10,6 +10,7 @@ export interface Property {
         id: string;
         data?: {key: string, label: string}[];
         dataUrl?: string;
+        differences?: string;
         [propertyName: string]: any;
     };
 }

From aed3385a7da8ff93337e4c6a1e64586e6f53363e Mon Sep 17 00:00:00 2001
From: Bill Smith <wsmith@unicon.net>
Date: Fri, 13 Sep 2019 09:43:19 -0700
Subject: [PATCH 2/2] SHIBUI-1408-a11y

Added a fix for changes to the UI.
---
 backend/src/integration/resources/SHIBUI-1334-1.side | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/src/integration/resources/SHIBUI-1334-1.side b/backend/src/integration/resources/SHIBUI-1334-1.side
index bffdda8f1..6487ddc87 100644
--- a/backend/src/integration/resources/SHIBUI-1334-1.side
+++ b/backend/src/integration/resources/SHIBUI-1334-1.side
@@ -2128,9 +2128,9 @@
       "id": "138ad58b-f0a2-436b-a8b0-43484f4180e6",
       "comment": "",
       "command": "assertText",
-      "target": "css=array-property:nth-child(5) .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(2)",
+      "target": "css=.bg-diff > .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(3)",
       "targets": [
-        ["css=array-property:nth-child(5) .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(2)", "css:finder"],
+        ["css=.bg-diff > .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(3)", "css:finder"],
         ["xpath=//div[2]/div/div[2]", "xpath:position"]
       ],
       "value": "Test User v2"
@@ -2138,10 +2138,10 @@
       "id": "17049c95-4724-4521-ac47-6b64bde822aa",
       "comment": "",
       "command": "assertText",
-      "target": "css=array-property:nth-child(5) .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(3)",
+      "target": "css=.py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(4)",
       "targets": [
-        ["css=array-property:nth-child(5) .py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(3)", "css:finder"],
-        ["xpath=//div[3]", "xpath:position"]
+        ["css=.py-2:nth-child(2) > .d-flex:nth-child(1) > .text-truncate:nth-child(4)", "css:finder"],
+        ["xpath=//div/div[3]", "xpath:position"]
       ],
       "value": "Test User"
     }, {