fix: use actual buttons in pager

playwright/e2e/paging.spec.ts

@@ -1,4 +1,5 @@
 import { Page } from '@playwright/test';
+
 import { expect, test } from '../support/test-helpers';
 
 test.describe('paging', () => {
@@ -142,10 +143,10 @@ const pagerTest = async (page: Page, numberOfRows: number) => {
   const pager = page.locator('datatable-pager');
   expect(pager).toBeTruthy();
 
-  const firstPageButton = page.getByLabel('go to first page').locator('..');
-  const previousButton = page.getByLabel('go to previous page').locator('..');
-  const nextButton = page.getByLabel('go to next page').locator('..');
-  const lastButton = page.getByLabel('go to last page').locator('..');
+  const firstPageButton = page.getByLabel('go to first page');
+  const previousButton = page.getByLabel('go to previous page');
+  const nextButton = page.getByLabel('go to next page');
+  const lastButton = page.getByLabel('go to last page');
 
   await page.waitForSelector('span[title="Ethel Price"]');
 
@@ -155,11 +156,11 @@ const pagerTest = async (page: Page, numberOfRows: number) => {
   await expect(page.getByRole('cell', { name: 'Ethel Price' })).toBeVisible();
   await expect(page.getByRole('cell', { name: 'Beryl Rice' })).toBeVisible();
 
-  await expect(firstPageButton).toHaveClass(/disabled/);
-  await expect(previousButton).toHaveClass(/disabled/);
+  await expect(firstPageButton).toBeDisabled();
+  await expect(previousButton).toBeDisabled();
 
-  await expect(nextButton).not.toHaveClass(/disabled/);
-  await expect(lastButton).not.toHaveClass(/disabled/);
+  await expect(nextButton).not.toBeDisabled();
+  await expect(lastButton).not.toBeDisabled();
 
   await lastButton.click();
 
@@ -168,11 +169,11 @@ const pagerTest = async (page: Page, numberOfRows: number) => {
   await expect(page.getByRole('cell', { name: 'Ethel Price' })).not.toBeVisible();
   await expect(page.getByRole('cell', { name: 'Beryl Rice' })).not.toBeVisible();
 
-  await expect(firstPageButton).not.toHaveClass(/disabled/);
-  await expect(previousButton).not.toHaveClass(/disabled/);
+  await expect(firstPageButton).not.toBeDisabled();
+  await expect(previousButton).not.toBeDisabled();
 
-  await expect(nextButton).toHaveClass(/disabled/);
-  await expect(lastButton).toHaveClass(/disabled/);
+  await expect(nextButton).toBeDisabled();
+  await expect(lastButton).toBeDisabled();
 
   await expect(page.getByRole('cell', { name: 'Humphrey Curtis' })).toBeVisible();
   await expect(page.getByRole('cell', { name: 'Christine Compton' })).toBeVisible();

projects/ngx-datatable/src/lib/components/footer/pager.component.scss

@@ -17,15 +17,11 @@
   list-style: none;
 }
 
-.pager {
-  li {
-    a {
-      cursor: pointer;
-      display: inline-block;
-    }
+.page-button {
+  cursor: pointer;
+  display: inline-block;
 
-    &.disabled a {
-      cursor: not-allowed;
-    }
+  &:disabled {
+    cursor: not-allowed;
   }
 }

projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts

@@ -133,15 +133,6 @@ describe('DataTablePagerComponent', () => {
       expect(await harness.currentPage()).toEqual(1);
     });
 
-    it('should set current page to previous page when space/enter is pressed', async () => {
-      footer.curPage.set(3);
-      await harness.pressPrevious(' ');
-      expect(await harness.currentPage()).toEqual(2);
-
-      await harness.pressPrevious('Enter');
-      expect(await harness.currentPage()).toEqual(1);
-    });
-
     it('should emit change event', async () => {
       spyOn(footer.page, 'emit');
       footer.curPage.set(2);
@@ -168,15 +159,6 @@ describe('DataTablePagerComponent', () => {
       expect(await harness.currentPage()).toEqual(3);
     });
 
-    it('should set current page to next page when space/enter is pressed', async () => {
-      footer.curPage.set(3);
-      await harness.pressNext(' ');
-      expect(await harness.currentPage()).toEqual(4);
-
-      await harness.pressNext('Enter');
-      expect(await harness.currentPage()).toEqual(5);
-    });
-
     it('should emit change event', async () => {
       spyOn(footer.page, 'emit');
       footer.curPage.set(2);
@@ -204,17 +186,12 @@ describe('DataTablePagerComponent', () => {
         expect(await harness.currentPage()).toEqual(3);
       });
 
-      it('should set current page using keyboard', async () => {
-        await harness.pressPage(3, 'Enter');
-        expect(await harness.currentPage()).toEqual(3);
-      });
-
       it('should emit change event', async () => {
         spyOn(footer.page, 'emit');
         await harness.clickPage(3);
         expect(footer.page.emit).toHaveBeenCalledWith({ page: 3 });
 
-        await harness.pressPage(4, 'Enter');
+        await harness.clickPage(4);
         expect(footer.page.emit).toHaveBeenCalledWith({ page: 4 });
       });
     });
@@ -261,7 +238,7 @@ describe('DataTablePagerComponent', () => {
       footer.rowCount.set(100);
       fixture.detectChanges();
       [firstButton, previousButton, nextButton, lastButton] = fixture.debugElement
-        .queryAll(By.css('a[role=button]'))
+        .queryAll(By.css('.page-button'))
         .filter(it => !it.parent!.classes.pages);
       pageButtons = fixture.debugElement
         .queryAll(By.css('li.pages'))