From 47f05bf11db435229b513daf3af0f57b376925b7 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 31 Jan 2023 13:33:29 +0100
Subject: [PATCH] 97742: Feedback 2023-01-27 - Table roles and aria attributes
 + additional feedback changes

---
 ...-edit-metadata-field-values.component.html |  5 +-
 ...edit-metadata-value-headers.component.html |  5 ++
 ...edit-metadata-value-headers.component.scss |  0
 ...o-edit-metadata-value-headers.component.ts | 17 ++++
 .../dso-edit-metadata-value.component.html    | 60 ++++++++------
 .../dso-edit-metadata-value.component.scss    |  2 +-
 .../dso-edit-metadata.component.html          | 82 +++++++++++--------
 src/app/dso-shared/dso-shared.module.ts       |  2 +
 src/assets/i18n/en.json5                      |  2 -
 src/styles/_global-styles.scss                | 12 +++
 10 files changed, 123 insertions(+), 64 deletions(-)
 create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.html
 create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.scss
 create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.ts

diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html
index cfa457580f..9f74216d54 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html
@@ -1,5 +1,6 @@
-<div class="flex-grow-1 ds-drop-list h-100" [class.disabled]="(draggingMdField$ | async) && (draggingMdField$ | async) !== mdField" cdkDropList (cdkDropListDropped)="drop($event)">
-  <ds-dso-edit-metadata-value *ngFor="let mdValue of form.fields[mdField]; let idx = index"
+<div class="flex-grow-1 ds-drop-list h-100" [class.disabled]="(draggingMdField$ | async) && (draggingMdField$ | async) !== mdField" cdkDropList (cdkDropListDropped)="drop($event)" role="table">
+  <ds-dso-edit-metadata-value-headers role="presentation" [dsoType]="dsoType"></ds-dso-edit-metadata-value-headers>
+  <ds-dso-edit-metadata-value *ngFor="let mdValue of form.fields[mdField]; let idx = index" role="presentation"
                               [dso]="dso"
                               [mdValue]="mdValue"
                               [dsoType]="dsoType"
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.html
new file mode 100644
index 0000000000..2c3fb54600
--- /dev/null
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.html
@@ -0,0 +1,5 @@
+<div role="row" class="visually-hidden">
+  <div role="columnheader">{{ dsoType + '.edit.metadata.headers.value' | translate }}</div>
+  <div role="columnheader">{{ dsoType + '.edit.metadata.headers.language' | translate }}</div>
+  <div role="columnheader">{{ dsoType + '.edit.metadata.headers.edit' | translate }}</div>
+</div>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.ts
new file mode 100644
index 0000000000..dfda2a50d1
--- /dev/null
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-dso-edit-metadata-value-headers',
+  styleUrls: ['./dso-edit-metadata-value-headers.component.scss', '../dso-edit-metadata-shared/dso-edit-metadata-cells.scss'],
+  templateUrl: './dso-edit-metadata-value-headers.component.html',
+})
+/**
+ * Component displaying invisible headers for a list of metadata values using table roles for accessibility
+ */
+export class DsoEditMetadataValueHeadersComponent {
+  /**
+   * Type of DSO we're displaying values for
+   * Determines i18n messages
+   */
+  @Input() dsoType: string;
+}
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
index aa3c242511..f54dde4971 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
@@ -1,7 +1,7 @@
-<div class="d-flex flex-row ds-value-row" *ngVar="mdValue.newValue.isVirtual as isVirtual"
+<div class="d-flex flex-row ds-value-row" *ngVar="mdValue.newValue.isVirtual as isVirtual" role="row"
      cdkDrag (cdkDragStarted)="dragging.emit(true)" (cdkDragEnded)="dragging.emit(false)"
      [ngClass]="{ 'ds-warning': mdValue.reordered || mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD, 'h-100': isOnlyValue }">
-  <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center" *ngVar="(mdRepresentation$ | async) as mdRepresentation">
+  <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell">
     <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing && !mdRepresentation">{{ mdValue.newValue.value }}</div>
     <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation" [(ngModel)]="mdValue.newValue.value"
               [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
@@ -10,33 +10,45 @@
       <ds-type-badge [object]="mdRepresentation"></ds-type-badge>
     </div>
   </div>
-  <div class="ds-flex-cell ds-lang-cell">
+  <div class="ds-flex-cell ds-lang-cell" role="cell">
     <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.language }}</div>
     <input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.language"
            [dsDebounce]="300" (onDebounce)="confirm.emit(false)" />
   </div>
-  <div class="text-center ds-flex-cell ds-edit-cell">
-    <div class="btn-group edit-field">
-      <div class="btn-group" [ngbTooltip]="isVirtual ? (dsoType + '.edit.metadata.edit.buttons.virtual' | translate) : null">
-        <button class="btn btn-outline-primary btn-sm ng-star-inserted" id="metadata-edit-btn" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.edit' | translate }}" *ngIf="!mdValue.editing"
-                [disabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
-          <i class="fas fa-edit fa-fw"></i>
-        </button>
-        <button class="btn btn-outline-success btn-sm ng-star-inserted" id="metadata-confirm-btn" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.confirm' | translate }}" *ngIf="mdValue.editing"
-                [disabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
-          <i class="fas fa-check fa-fw"></i>
-        </button>
-        <button class="btn btn-outline-danger btn-sm" id="metadata-remove-btn" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.remove' | translate }}"
-                [disabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
-          <i class="fas fa-trash-alt fa-fw"></i>
-        </button>
-        <button class="btn btn-outline-warning btn-sm" id="metadata-undo-btn" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.undo' | translate }}"
-                [disabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
-          <i class="fas fa-undo-alt fa-fw"></i>
-        </button>
+  <div class="text-center ds-flex-cell ds-edit-cell" role="cell">
+    <div class="btn-group">
+      <div class="edit-field">
+        <div class="btn-group edit-buttons" [ngbTooltip]="isVirtual ? (dsoType + '.edit.metadata.edit.buttons.virtual' | translate) : null">
+          <button class="btn btn-outline-primary btn-sm ng-star-inserted" id="metadata-edit-btn" *ngIf="!mdValue.editing"
+                  [title]="dsoType + '.edit.metadata.edit.buttons.edit' | translate"
+                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.edit' | translate }}"
+                  [disabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
+            <i class="fas fa-edit fa-fw"></i>
+          </button>
+          <button class="btn btn-outline-success btn-sm ng-star-inserted" id="metadata-confirm-btn" *ngIf="mdValue.editing"
+                  [title]="dsoType + '.edit.metadata.edit.buttons.confirm' | translate"
+                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.confirm' | translate }}"
+                  [disabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
+            <i class="fas fa-check fa-fw"></i>
+          </button>
+          <button class="btn btn-outline-danger btn-sm" id="metadata-remove-btn"
+                  [title]="dsoType + '.edit.metadata.edit.buttons.remove' | translate"
+                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.remove' | translate }}"
+                  [disabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
+            <i class="fas fa-trash-alt fa-fw"></i>
+          </button>
+          <button class="btn btn-outline-warning btn-sm" id="metadata-undo-btn"
+                  [title]="dsoType + '.edit.metadata.edit.buttons.undo' | translate"
+                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.undo' | translate }}"
+                  [disabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
+            <i class="fas fa-undo-alt fa-fw"></i>
+          </button>
+        </div>
       </div>
-      <button class="btn btn-outline-secondary ds-drag-handle btn-sm" id="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled" cdkDragHandle [cdkDragHandleDisabled]="disabled"
-              [ngClass]="{'disabled': disabled}" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}" [disabled]="disabled">
+      <button class="btn btn-outline-secondary ds-drag-handle btn-sm" id="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled"
+              cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [disabled]="disabled"
+              [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
+              ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
         <i class="fas fa-grip-vertical fa-fw"></i>
       </button>
     </div>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
index bcf491b9ce..4a207ee1a4 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
@@ -7,7 +7,7 @@
   cursor: grab;
 }
 
-::ng-deep .tooltip-inner {
+::ng-deep .edit-field>ngb-tooltip-window .tooltip-inner {
   min-width: var(--ds-dso-edit-virtual-tooltip-min-width);
 }
 
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
index 51f347e163..24c3dc5cd7 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
@@ -1,61 +1,70 @@
 <div class="item-metadata" *ngIf="form">
   <div class="button-row top d-flex my-2 space-children-mr ml-gap">
     <button class="mr-auto btn btn-success" id="dso-add-btn" [disabled]="form.newValue || (saving$ | async)"
+            [title]="dsoType + '.edit.metadata.add-button' | translate"
             (click)="add()"><i class="fas fa-plus"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
     </button>
     <button class="btn btn-warning ml-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
+            [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
             (click)="reinstate()"><i class="fas fa-undo-alt"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
     </button>
     <button class="btn btn-primary ml-1" id="dso-save-btn" [disabled]="!hasChanges || (saving$ | async)"
+            [title]="dsoType + '.edit.metadata.save-button' | translate"
             (click)="submit()"><i class="fas fa-save"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.save-button' | translate }}</span>
     </button>
     <button class="btn btn-danger ml-1" id="dso-discard-btn" *ngIf="!isReinstatable"
+            [title]="dsoType + '.edit.metadata.discard-button' | translate"
             [disabled]="!hasChanges || (saving$ | async)"
             (click)="discard()"><i class="fas fa-times"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
     </button>
   </div>
 
-  <ds-dso-edit-metadata-headers [dsoType]="dsoType"></ds-dso-edit-metadata-headers>
-  <div class="d-flex flex-row ds-field-row" *ngIf="form.newValue">
-    <div class="lbl-cell ds-success">
-      <ds-metadata-field-selector [dsoType]="dsoType"
-                                  [(mdField)]="newMdField"
-                                  [autofocus]="true">
-      </ds-metadata-field-selector>
-    </div>
-    <div class="flex-grow-1 ds-drop-list">
-      <ds-dso-edit-metadata-value [dso]="dso"
-                                  [mdValue]="form.newValue"
-                                  [dsoType]="dsoType"
-                                  [saving$]="savingOrLoadingFieldValidation$"
-                                  [isOnlyValue]="true"
-                                  (confirm)="confirmNewValue($event)"
-                                  (remove)="form.newValue = undefined"
-                                  (undo)="form.newValue = undefined">
-      </ds-dso-edit-metadata-value>
-    </div>
-  </div>
-  <div class="d-flex flex-row ds-field-row" *ngFor="let mdField of form.fieldKeys">
-    <div class="lbl-cell">
-      <span class="dont-break-out preserve-line-breaks">{{ mdField }}</span>
-      <div class="btn btn-warning reset-order-button mt-2 w-100" *ngIf="form.hasOrderChanges(mdField)"
-           (click)="form.resetOrder(mdField); onValueSaved()">
-        {{ dsoType + '.edit.metadata.reset-order-button' | translate }}
+  <div role="table" [attr.aria-label]="'item.edit.head' | translate">
+    <ds-dso-edit-metadata-headers [dsoType]="dsoType"></ds-dso-edit-metadata-headers>
+    <div class="d-flex flex-row ds-field-row" role="row" *ngIf="form.newValue">
+      <div class="lbl-cell ds-success" role="rowheader">
+        <ds-metadata-field-selector [dsoType]="dsoType"
+                                    [(mdField)]="newMdField"
+                                    [autofocus]="true">
+        </ds-metadata-field-selector>
+      </div>
+      <div class="flex-grow-1 ds-drop-list" role="cell">
+        <div role="table">
+          <ds-dso-edit-metadata-value-headers role="presentation" [dsoType]="dsoType"></ds-dso-edit-metadata-value-headers>
+          <ds-dso-edit-metadata-value [dso]="dso"
+                                      [mdValue]="form.newValue"
+                                      [dsoType]="dsoType"
+                                      [saving$]="savingOrLoadingFieldValidation$"
+                                      [isOnlyValue]="true"
+                                      (confirm)="confirmNewValue($event)"
+                                      (remove)="form.newValue = undefined"
+                                      (undo)="form.newValue = undefined">
+          </ds-dso-edit-metadata-value>
+        </div>
       </div>
     </div>
-    <ds-dso-edit-metadata-field-values class="flex-grow-1"
-                                       [dso]="dso"
-                                       [form]="form"
-                                       [dsoType]="dsoType"
-                                       [saving$]="saving$"
-                                       [draggingMdField$]="draggingMdField$"
-                                       [mdField]="mdField"
-                                       (valueSaved)="onValueSaved()">
-    </ds-dso-edit-metadata-field-values>
+    <div class="d-flex flex-row ds-field-row" role="row" *ngFor="let mdField of form.fieldKeys">
+      <div class="lbl-cell" role="rowheader">
+        <span class="dont-break-out preserve-line-breaks">{{ mdField }}</span>
+        <div class="btn btn-warning reset-order-button mt-2 w-100" *ngIf="form.hasOrderChanges(mdField)"
+             (click)="form.resetOrder(mdField); onValueSaved()">
+          {{ dsoType + '.edit.metadata.reset-order-button' | translate }}
+        </div>
+      </div>
+      <ds-dso-edit-metadata-field-values class="flex-grow-1" role="cell"
+                                         [dso]="dso"
+                                         [form]="form"
+                                         [dsoType]="dsoType"
+                                         [saving$]="saving$"
+                                         [draggingMdField$]="draggingMdField$"
+                                         [mdField]="mdField"
+                                         (valueSaved)="onValueSaved()">
+      </ds-dso-edit-metadata-field-values>
+    </div>
   </div>
 
   <div *ngIf="isEmpty && !form.newValue">
@@ -64,12 +73,15 @@
   <div class="button-row bottom d-inline-block w-100">
     <div class="mt-2 float-right space-children-mr ml-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
+              [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
               (click)="reinstate()"><i class="fas fa-undo-alt"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
       </button>
       <button class="btn btn-primary" [disabled]="!hasChanges || (saving$ | async)"
+              [title]="dsoType + '.edit.metadata.save-button' | translate"
               (click)="submit()"><i class="fas fa-save"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
       </button>
       <button class="btn btn-danger" *ngIf="!isReinstatable"
+              [title]="dsoType + '.edit.metadata.discard-button' | translate"
               [disabled]="!hasChanges || (saving$ | async)"
               (click)="discard()"><i class="fas fa-times"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
       </button>
diff --git a/src/app/dso-shared/dso-shared.module.ts b/src/app/dso-shared/dso-shared.module.ts
index 0a9294105b..019a7f6b9e 100644
--- a/src/app/dso-shared/dso-shared.module.ts
+++ b/src/app/dso-shared/dso-shared.module.ts
@@ -5,6 +5,7 @@ import { MetadataFieldSelectorComponent } from './dso-edit-metadata/metadata-fie
 import { DsoEditMetadataFieldValuesComponent } from './dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component';
 import { DsoEditMetadataValueComponent } from './dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component';
 import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component';
+import { DsoEditMetadataValueHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component';
 
 @NgModule({
   imports: [
@@ -16,6 +17,7 @@ import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-me
     DsoEditMetadataFieldValuesComponent,
     DsoEditMetadataValueComponent,
     DsoEditMetadataHeadersComponent,
+    DsoEditMetadataValueHeadersComponent,
   ],
   exports: [
     DsoEditMetadataComponent,
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index fd2b049d54..cb141691fb 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2288,8 +2288,6 @@
 
   "itemtemplate.edit.metadata.edit.buttons.unedit": "Stop editing",
 
-  "itemtemplate.edit.metadata.edit.buttons.virtual": "This is a virtual metadata value, i.e. a value inherited from a related entity. It can’t be modified directly. Add or remove the corresponding relationship in the \"Relationships\" tab",
-
   "itemtemplate.edit.metadata.empty": "The item template currently doesn't contain any metadata. Click Add to start adding a metadata value.",
 
   "itemtemplate.edit.metadata.headers.edit": "Edit",
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index e337539c15..d9c01e85ae 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -92,3 +92,15 @@ ngb-modal-backdrop {
   hyphens: auto;
 
 }
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}