SHIBUI-1408 Added a11y element for changes

TIER · Sep 12, 2019 · ec47f91 · ec47f91
1 parent 46fe0b5
commit ec47f91
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 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
@@ -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;
     };
 }