Resolution of issue #1190 - Improving the accessibility of the status…

… page using the item-operation component
DSpace · Jun 26, 2024 · e06b67f · e06b67f
1 parent a623976
commit e06b67f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html b/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}}

diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.scss b/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;
+  }
+}
diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.ts b/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,