Merge pull request DSpace#3148 from Neki-IT/StatusPageAccessibility

Accessibility of the status page

Author: tdonohue

src/app/item-page/edit-item-page/item-operation/item-operation.component.html

@@ -1,9 +1,9 @@
-<div class="col-3 float-left d-flex h-100 action-label">
-      <span class="justify-content-center align-self-center">
+<div class="col-12 col-md-3 h-auto float-left d-flex action-label">
+      <span class="justify-content-center align-self-center font-weight-bold">
         {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.label' | translate}}
       </span>
 </div>
-<div class="col-9 float-left action-button">
+<div class="col-12 col-md-9 float-left action-button">
   <span *ngIf="operation.authorized">
     <button class="btn btn-outline-primary" [disabled]="operation.disabled" [routerLink]="operation.operationUrl" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
       {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}

src/app/item-page/edit-item-page/item-status/item-status.component.html

@@ -1,28 +1,28 @@
 <p class="mt-2">{{'item.edit.tabs.status.description' | translate}}</p>
 <div class="row">
-  <div *ngFor="let statusKey of statusDataKeys" class="w-100">
-    <div class="col-3 float-left status-label">
+  <div *ngFor="let statusKey of statusDataKeys" class="w-100 pt-1">
+    <div class="col-12 col-md-3 float-left status-label font-weight-bold">
       {{'item.edit.tabs.status.labels.' + statusKey | translate}}:
     </div>
-    <div class="col-9 float-left status-data" id="status-{{statusKey}}">
+    <div class="col-12 col-md-9 float-left status-data" id="status-{{statusKey}}">
       {{statusData[statusKey]}}
     </div>
   </div>
 
-  <div *ngFor="let identifier of (identifiers$ | async)" class="w-100">
+  <div *ngFor="let identifier of (identifiers$ | async)" class="w-100 pt-1">
     <div *ngIf="(identifier.identifierType==='doi')">
-      <div class="col-3 float-left status-label">
+      <div class="col-12 col-md-3 float-left status-label font-weight-bold">
         {{identifier.identifierType.toLocaleUpperCase()}}
       </div>
-      <div class="col-9 float-left status-label">{{identifier.value}}
+      <div class="col-12 col-md-9 float-left status-label font-weight-bold">{{identifier.value}}
         ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})</div>
     </div>
   </div>
 
-  <div class="col-3 float-left status-label">
+  <div class="col-12 col-md-3 float-left status-label font-weight-bold">
     {{'item.edit.tabs.status.labels.itemPage' | translate}}:
   </div>
-  <div class="col-9 float-left status-data" id="status-itemPage">
+  <div class="col-12 col-md-9 float-left status-data" id="status-itemPage">
     <a [routerLink]="itemPageRoute$ | async">{{itemPageRoute$ | async}}</a>
   </div>