Added changes to table and filter button components to help with UX/UI

src/app/app.component.html

@@ -6,7 +6,13 @@
 
 <div class="page-wrap">
   <div class="sidebar-content-wrapper">
-    <div class="sidebar-icon-container" (mouseenter)="onSidebarIconsMouseEnter()" tabindex="0" (keydown)="onSidebarIconsKeyDown($event)" role="button">
+    <div class="sidebar-icon-container" 
+         (mouseenter)="onSidebarIconsMouseEnter()"
+         tabindex="0"
+         (keydown)="onSidebarIconsKeyDown($event)"
+         role="application"
+         aria-details="Press enter or space to open the sidebar navigation"
+         aria-roledescription="sidebar navigation toggle">
       <div class="sidebar-icon-wrap">
         <div class="sidebar-icon it-strategy"><i class="fas fa-puzzle-piece fa-lg fa-fw"></i></div>
         <div class="sidebar-icon gsa-enterprise"><i class="fas fa-sitemap fa-lg fa-fw"></i></div>
@@ -21,9 +27,9 @@
 
     <!-- Main Module -->
     <div class="container-fluid content-body" id="mainModule">
-      <div class="w-100 mr-2">
+      <div class="w-100">
         <main role="main">
-          <div class="container-fluid my-3">
+          <div class="">
             <div class="col-md-12">
               <!-- Logged In Notification -->
               <div

src/app/app.component.ts

@@ -77,7 +77,7 @@ export class AppComponent implements OnInit {
   }
 
   onSidebarIconsKeyDown(e: KeyboardEvent) {
-    if(e.code === 'Space' || e.code === 'Enter') {
+    if(e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
       this.sharedService.openSidebar();
     }
   }

src/app/app.module.ts

@@ -91,6 +91,7 @@ import { IconFieldModule } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
 import { InputTextModule } from 'primeng/inputtext';
 import { FilterButtonsComponent } from './components/filter-buttons/filter-buttons.component';
+import { TooltipModule } from 'primeng/tooltip';
 
 @NgModule({ declarations: [
         AppComponent,
@@ -157,7 +158,8 @@ import { FilterButtonsComponent } from './components/filter-buttons/filter-butto
         InputIconModule,
         InputTextModule,
         SidebarModule,
-        AccordionModule
+        AccordionModule,
+        TooltipModule
     ],
     providers: [Globals, provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {

src/app/components/table/table.component.html

@@ -34,7 +34,7 @@
 
   <!-- Table actions -->
   <ng-template pTemplate="caption" *ngIf="showToolbar">
-    <div style="text-align: right">
+    <div class="table-toolbar-container">
       <!-- Search bar -->
       <p-iconField iconPosition="left" *ngIf="showSearchbar">
         <p-inputIcon styleClass="fa fa-search" />
@@ -52,19 +52,19 @@
           [(ngModel)]="visibleColumns"
           (onChange)="toggleVisible($event)"
           optionLabel="field"
-          tooltip="Add/Remove Columns"
+          pTooltip="Add/Remove Columns"
           [showToggleAll]="false"
           ariaLabel="Toggle Columns">
           <ng-template pTemplate="selectedItems">
             <i class="fa fa-th-list"></i>
           </ng-template>
         </p-multiSelect>
         <!-- Pagination toggle button -->
-        <p-button icon="fa fa-caret-square-down" severity="primary" (click)="togglePagination()" *ngIf="showPaginationToggleButton" ariaLabel="Toggle Pagination" />
+        <!-- <p-button icon="fa fa-caret-square-down" severity="primary" (click)="togglePagination()" *ngIf="showPaginationToggleButton" ariaLabel="Toggle Pagination" /> -->
         <!-- Export button -->
-        <p-button icon="fa fa-download" severity="primary" (click)="onExportData()" *ngIf="showExportButton" ariaLabel="Export Data" />
+        <p-button icon="fa fa-download" pTooltip="Export table data" severity="primary" (click)="onExportData()" *ngIf="showExportButton" ariaLabel="Export Data" />
         <!-- Filter toggle button -->
-        <p-button icon="fa fa-filter" severity="primary" (click)="toggleFilter()" *ngIf="showFilterButton" ariaLabel="Toggle Filters" />
+        <p-button icon="fa fa-filter" pTooltip="Show/Hide column filters" severity="primary" (click)="toggleFilter()" *ngIf="showFilterButton" ariaLabel="Toggle Filters" />
     </div>
   </ng-template>
 

src/app/components/table/table.component.scss

@@ -1,9 +1,9 @@
 ::ng-deep {
     .p-datatable {
         font-family: Nunito Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
-        font-size: .875rem;
-        font-weight: 400;
-        line-height: 1.5;
+        font-size: 14px;
+        font-weight: 200;
+        line-height: 21px;
 
         & .p-datatable-thead > tr > th {
             padding: .75rem;
@@ -149,7 +149,6 @@
         border-color: #027eb2;
         border-radius: 0;
         height: 42px;
-        top: 1px;
 
         &:hover {
             background-color: #1a82ae;
@@ -171,4 +170,11 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }
+}
+
+.table-toolbar-container {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: end;
 }

src/app/views/technologies/it-standards/it-standards.component.ts

@@ -176,7 +176,6 @@ export class ItStandardsComponent implements OnInit {
         header: 'Description',
         isSortable: true,
         showColumn: true,
-        class: 'wid-25',
         formatter: this.sharedService.formatDescription,
         titleTooltip: this.getTooltip('Description')
       }, {

src/styles.css

@@ -307,6 +307,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  width: 20rem;
 }
 
 .fixed-table-toolbar .search input {
@@ -353,8 +354,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   color: #ce4844;
 }
 
-.it-standards-filter-button-active {
-  outline: 0.25rem solid #2491ff;
-  position: relative;
-  z-index: 10;
+.it-standards-filter-button-active button {
+  background-color: #2491ff;
+  border-color: #2491ff;
 }