SHIBUI-1472 added badges to tab order

TIER · Nov 19, 2019 · 0d6fe9a · 0d6fe9a
1 parent ae9452f
commit 0d6fe9a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/ui/src/app/metadata/manager/component/resolvers-list.component.html b/ui/src/app/metadata/manager/component/resolvers-list.component.html
@@ -16,17 +16,19 @@
                     <a [routerLink]="['/', 'metadata', 'resolver', 'new', 'blank', 'common']"
                         [queryParams]="{'id': resolver.getId()}">{{ resolver.name }}</a>
                 </td>
-                <td>{{ resolver.getDisplayId() }}</td>
-                <td>{{ resolver.createdBy }}</td>
-                <td>{{ resolver.getCreationDate() ? (resolver.getCreationDate() | customDate) : '&mdash;' }}</td>
+                <td [attr.aria-label]="resolver.getDisplayId()">{{ resolver.getDisplayId() }}</td>
+                <td [attr.aria-label]="resolver.createdBy">{{ resolver.createdBy ? resolver.createdBy : '&mdash;' }}</td>
+                <td [attr.aria-label]="resolver.getCreationDate() ? (resolver.getCreationDate() | customDate) : 'unknown'">
+                    {{ resolver.getCreationDate() ? (resolver.getCreationDate() | customDate) : '&mdash;' }}
+                </td>
                 <td class="text-right">
                     <span *ngIf="resolver.isDraft()">
                         <button class="btn btn-outline btn-sm btn-danger" (click)="delete.emit(resolver)">
                             <span class="sr-only">Delete</span>
                             <i class="fa fa-trash"></i>
                         </button>
                         &nbsp;
-                        <span class="badge badge-warning" aria-label="Warning Badge: Incomplete Form"
+                        <span class="badge badge-warning" tabindex="0" aria-label="Warning Badge: Incomplete Form"
                             translate="message.incomplete-form">
                             Incomplete Form
                         </span>
@@ -42,10 +44,13 @@
                         </button>
                     </ng-container>
                     <ng-container *ngIf="!toggleEnabled.observers.length">
-                        <span class="badge" *ngIf="!resolver.isDraft()" [class.badge-danger]="!resolver.enabled"
+                        <span tabindex="0"
+                            [attr.aria-label]="(resolver.enabled ? 'value.enabled' : 'value.disabled') | translate"
+                            class="badge"
+                            *ngIf="!resolver.isDraft()"
+                            [class.badge-danger]="!resolver.enabled"
                             [class.badge-success]="resolver.enabled">
-                            <span *ngIf="resolver.enabled" translate="value.enabled">Enabled</span>
-                            <span *ngIf="!resolver.enabled" translate="value.disabled">Disabled</span>
+                            {{ (resolver.enabled ? 'value.enabled' : 'value.disabled') | translate }}
                         </span>
                     </ng-container>
                 </td>

diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.html
@@ -52,11 +52,12 @@
                             <td>{{ provider.createdBy }}</td>
                             <td>{{ provider.createdDate | customDate }}</td>
                             <td class="text-right">
-                                <span class="badge"
+                                <span tabindex="0"
+                                    class="badge"
+                                    [attr.aria-label]="(provider.enabled ? 'value.enabled' : 'value.disabled') | translate"
                                     [class.badge-danger]="!provider.enabled"
                                     [class.badge-success]="provider.enabled">
-                                    <span *ngIf="provider.enabled" translate="value.enabled">Enabled</span>
-                                    <span *ngIf="!provider.enabled" translate="value.disabled">Enabled</span>
+                                    {{ (provider.enabled ? 'value.enabled' : 'value.disabled') | translate }}
                                 </span>
                             </td>
                         </tr>