fix: accessibility - increase contrast of arrows

* changed behaviour, now only one arrow shows when sorting state
because increasing contrast made it difficult to distinguish between dark gray and black

Author: guifry

src/frontend/scss/grid.scss

@@ -81,29 +81,19 @@
     .icon-asc {
       position: absolute;
       font-size: 12px;
-      color: lightgray;
+      color: #474747;
       padding-left: 10px;
       background-color: #f8f8f8;
     }
 
     .icon-desc {
-      position: absolute;
       right: 0px;
       bottom: -2px;
-      font-size: 12px;
-      color: lightgray;
-      padding-left: 10px;
-      background-color: #f8f8f8;
     }
 
     .icon-asc {
-      position: absolute;
       right: 0px;
       top: -1px;
-      font-size: 12px;
-      color: lightgray;
-      padding-left: 10px;
-      background-color: #f8f8f8;
     }
 
     &:hover {

src/frontend/view/customAgGridHeader.ts

@@ -124,10 +124,20 @@ export default class CustomAgGridHeader {
         this.sortModel[this.colId].sortIndex + 1
       }</div>`
     }
-    html = `${html}
-    <span class="icon-desc" aria-hidden="true">▼</span>
-    <span class="icon-asc" aria-hidden="true">▲</span>
-    `
+    if (this.sortingState === SortAction.NONE) {
+      html += `
+      <span class="icon-desc" aria-hidden="true">▼</span>
+      <span class="icon-asc" aria-hidden="true">▲</span>`
+    } else if (this.sortingState === SortAction.ASC) {
+      html += `
+      <span class="icon-asc" aria-hidden="true">▲</span>
+      `
+    } else if (this.sortingState === SortAction.DESC) {
+      html += `
+      <span class="icon-desc" aria-hidden="true">▼</span>
+      `
+    }
+
     return html
   }