Resolution of issue DSpace#1190 - Improving the accessibility of the status page using the item-operation component

Author: root

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">
+<div class="col-12 col-md-3 column-height float-left d-flex h-100 action-label">
       <span class="justify-content-center align-self-center">
         {{'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-operation/item-operation.component.scss

@@ -0,0 +1,9 @@
+.column-height {
+  height: 100%;
+}
+
+@media screen and (max-width: map-get($grid-breakpoints, sm)) {
+  .column-height {
+    height: auto;
+  }
+}

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

@@ -11,6 +11,7 @@ import { ItemOperation } from './itemOperation.model';
 
 @Component({
   selector: 'ds-item-operation',
+  styleUrls: ['item-operation.component.scss'],
   templateUrl: './item-operation.component.html',
   imports: [
     TranslateModule,