Merged in bugfix/SHIBUI-1408-a11y (pull request #370)

SHIBUI-1408 Added a11y element for changes Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Sep 16, 2019 · caff708 · caff708
2 parents b1abc91 + aed3385
commit caff708
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/backend/src/integration/resources/SHIBUI-1334-1.side b/backend/src/integration/resources/SHIBUI-1334-1.side
@@ -2128,20 +2128,20 @@
       "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"
     }, {
       "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"
     }, {

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
@@ -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
@@ -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
@@ -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>
diff --git 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;
     };
 }