feat: fix a11y issues in table component

playwright/cps-accessibility.spec.ts

@@ -222,7 +222,29 @@ const components: ComponentEntry[] = [
     name: 'Tabs',
     selector: '.example-content cps-tab-group'
   },
-  // { route: '/table', name: 'Table', selector: 'cps-table' },
+  {
+    route: '/table',
+    name: 'Table',
+    selector: 'cps-table',
+    states: [
+      'Table 1',
+      'Table 2',
+      'Table 3',
+      'Table 4',
+      'Table 5',
+      'Table 6',
+      'Table 7',
+      'Table 8',
+      'Table 9',
+      'Table 10'
+    ].map((tab) => ({
+      label: tab,
+      setup: async (page: Page) => {
+        await page.getByRole('tab', { name: tab, exact: true }).click();
+        await page.waitForSelector('cps-table');
+      }
+    }))
+  },
   { route: '/tag', name: 'Tag', selector: 'cps-tag' },
   { route: '/textarea', name: 'Textarea', selector: 'cps-textarea' },
   {

projects/composition/src/app/pages/table-page/table-page.component.html

@@ -46,7 +46,7 @@
           [sortable]="true"
           [virtualScroll]="true"
           [showColumnsToggleBtn]="true"
-          scrollHeight="500px"
+          scrollHeight="31.25rem"
           toolbarTitle="Sortable table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled"
           [filterableByColumns]="true"
           [resizableColumns]="true">
@@ -158,7 +158,7 @@
         [selectable]="true"
         toolbarSize="small"
         (rowsToRemove)="onRowsToRemove($event)"
-        scrollHeight="calc(100vh - 310px)"
+        scrollHeight="calc(100vh - 19.375rem)"
         toolbarTitle="Table with nested header and small toolbar">
         <ng-template #nestedHeader>
           <tr>
@@ -252,7 +252,7 @@
       </cps-table>
     </cps-tab>
     <cps-tab label="Table 8">
-      <cps-table [data]="[]" toolbarTitle="Empty table" emptyBodyHeight="400px">
+      <cps-table [data]="[]" toolbarTitle="Empty table" emptyBodyHeight="25rem">
         <ng-template #header>
           <th cpsTColSortable="a">A</th>
           <th cpsTColSortable="b">B</th>
@@ -266,15 +266,15 @@
       <cps-table
         [data]="data"
         [loading]="true"
-        scrollHeight="400px"
+        scrollHeight="25rem"
         [columns]="cols"
         toolbarTitle="Table in data loading state">
       </cps-table>
     </cps-tab>
     <cps-tab label="Table 10">
       <cps-table
         [data]="dataWithHTML"
-        scrollHeight="400px"
+        scrollHeight="25rem"
         [columns]="colsHTML"
         [renderDataAsHTML]="renderAsHTML"
         [showActionBtn]="true"

projects/composition/src/app/pages/table-page/table-page.component.scss

@@ -5,6 +5,6 @@
   }
 
   ::ng-deep .table-page--sub-tabs {
-    padding-top: 10px;
+    padding-top: 0.625rem;
   }
 }

projects/composition/src/app/pages/table-page/table-page.component.ts

@@ -41,38 +41,38 @@
   styleUrls: ['./table-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class TablePageComponent implements OnInit {
   selectedTabIndex = 0;
 
   dateMatchModes = [
     CpsColumnFilterMatchMode.DATE_BEFORE,
     CpsColumnFilterMatchMode.DATE_AFTER
   ];
 
   sizesOptions: CpsButtonToggleOption[] = [
     { label: 'Small', value: 'small' },
     { label: 'Normal', value: 'normal' },
     { label: 'Large', value: 'large' }
   ];
 
   selSize: CpsTableSize = 'small';
 
   isRemoveBtnVisible = false;
 
   renderAsHTML = true;
 
   dataWithHTML = [
     {
       a: '<h1>hello</h1>',
       b: '<h2>world</h2>',
       c: '<a href="https://www.github.com">link to github</a>'
     },
     {
       a: 'this is sanitized <script>console.log("pwned")</script>',
-      b: '<img src="./assets/ui_logo.svg" width="100" />',
+      b: '<img src="./assets/ui_logo.svg" alt="CPS UI Kit logo" width="100" />',
       c: '<code>null === undefined</code>'
     }
   ];
 
   data = [
     {

projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.html

@@ -20,6 +20,7 @@
     </span>
     <cps-select
       ariaLabel="Set items per page"
+      width="4rem"
       [options]="rowOptions"
       [hideDetails]="true"
       [(ngModel)]="rows"

projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.html

@@ -1,16 +1,18 @@
 @if (sortOrder === 0) {
-  <div class="cps-sortable-column-icon sort-unsorted">
+  <div class="cps-sortable-column-icon sort-unsorted" aria-hidden="true">
     <div class="sort-unsorted-arrow-up"></div>
     <div class="sort-unsorted-arrow-down"></div>
   </div>
 }
 @if (sortOrder === 1) {
-  <div class="cps-sortable-column-icon sort-desc"></div>
+  <div class="cps-sortable-column-icon sort-desc" aria-hidden="true"></div>
 }
 @if (sortOrder === -1) {
-  <div class="cps-sortable-column-icon sort-asc"></div>
+  <div class="cps-sortable-column-icon sort-asc" aria-hidden="true"></div>
 }
 
 @if (isMultiSorted()) {
-  <span class="cps-sortable-column-badge">{{ getBadgeValue() }}</span>
+  <span class="cps-sortable-column-badge" aria-hidden="true">{{
+    getBadgeValue()
+  }}</span>
 }

projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.scss

@@ -1,31 +1,58 @@
+@use '../../../../../../../styles/mixins' as *;
+
 :host {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: bottom;
+  cursor: pointer;
+
+  height: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-right: 0.5rem;
+  margin-top: -0.1875rem;
+  margin-bottom: -0.25rem;
+  margin-right: -0.5rem;
+
+  @media (max-width: 37.5rem) {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-right: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    @include focus-ring(0.1875rem, 0.25rem, 0.25rem);
+  }
+
   .cps-sortable-column-icon {
     display: inline-flex;
-    margin-left: 8px;
+    margin-left: 0.5rem;
   }
   .sort-desc {
-    border: 4px solid transparent;
+    border: 0.25rem solid transparent;
     border-bottom-color: var(--cps-color-calm);
-    margin-bottom: 4px;
   }
   .sort-asc {
-    border: 4px solid transparent;
+    border: 0.25rem solid transparent;
     border-top-color: var(--cps-color-calm);
-    margin-top: 4px;
   }
   .sort-unsorted {
     flex-direction: column;
     vertical-align: bottom;
     .sort-unsorted-arrow-up {
       display: inline-flex;
-      border: 4px solid transparent;
+      border: 0.25rem solid transparent;
       border-bottom-color: var(--cps-color-line-dark);
-      margin-bottom: 4px;
-      margin-top: -4px;
+      margin-bottom: 0.25rem;
+      margin-top: -0.25rem;
     }
     .sort-unsorted-arrow-down {
       display: inline-flex;
-      border: 4px solid transparent;
+      border: 0.25rem solid transparent;
       border-top-color: var(--cps-color-line-dark);
     }
   }