fix: use actual buttons in pager

[spike-rabbit]

What kind of change does this PR introduce? (check one with "x")

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Other... Please describe:

What is the current behavior? (You can also link to an open issue here)

Pager is using anchors.

What is the new behavior?

Pager is using buttons.

Does this PR introduce a breaking change? (check one with "x")

• Yes
• No

If this PR contains a breaking change, please describe the impact and migration path for existing applications:

The pager component now uses buttons instead of anchors. We did this change to properly reflect the nature of those buttons, which have never been anchors in terms of their behavior.

This change affects custom themes. Please adjust them accordingly:

// Before
.datatable-pager li a {
  // styling
}

// After
.datatable-pager .page-button {
  // Override default button styles
  border: 0;
  background none;
  // previous styling
}

Other information:

This also fixes some alignment issues in the pager, causing multiple snapshot changes.

[Copilot]

Pull Request Overview

This PR refactors the pagination component by replacing anchor (<a>) elements with semantic button (<button>) elements for pager controls. This is a significant accessibility and semantic improvement, as buttons are the appropriate HTML element for interactive controls that perform actions rather than navigate to URLs.

Key Changes:

• Converted all pager anchor tags to button elements with type="button" and class="page-button"
• Replaced class-based disabled state (.disabled on <li>) with the native disabled attribute on buttons
• Removed explicit keyboard event handlers (keydown.enter, keydown.space) as buttons natively handle these
• Updated CSS selectors across all themes (material, dark, bootstrap) from a to .page-button
• Updated test harness to query buttons directly and check disabled property instead of class names
• Updated E2E tests to use toBeDisabled() matchers instead of checking for class names

Reviewed Changes

Copilot reviewed 40 out of 40 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pager.component.ts	Converted anchor tags to buttons with native disabled state and removed redundant keyboard handlers
pager.harness.ts	Updated selectors to target .page-button and changed disabled checks from class-based to property-based
pager.component.spec.ts	Removed keyboard navigation tests (now handled natively by buttons) and updated selector queries
pager.component.scss	Changed selectors from a to .page-button with disabled state styling
material.scss	Updated pager styling to use .page-button selector and :disabled pseudo-class
dark.scss	Updated pager styling to use .page-button selector (contains selector bug)
bootstrap.scss	Updated pager styling to use .page-button selector with correct :disabled pseudo-class
paging.spec.ts	Updated E2E tests to use button selectors and toBeDisabled() assertions
(various .png files)	Updated visual regression test snapshots reflecting the styling changes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The selector &:not(.disabled) should be &:not(:disabled) to correctly target enabled buttons. HTML button elements use the :disabled pseudo-class, not a .disabled CSS class. This inconsistency means disabled buttons will still receive hover/active styling.

[fh1ch]

Agree, this seems to be a left-over from the old code, the other areas (e.g. https://github.com/siemens/ngx-datatable/pull/498/files#diff-eccd3293f095264b067c6f8bc5009e77fad64f7ef548e9885398c6ecd7e5f9eaR26) were adapted accordingly.

[Copilot]

The :disabled pseudo-class selector should use &:disabled instead of :disabled. Without the &, this selector will look for disabled children of .page-button rather than the button itself being disabled.

[fh1ch]

Hahahha, I was also wondering since there is only the icon as an inner-child, but the button itself should be marked as disabled, see https://github.com/siemens/ngx-datatable/pull/498/files#diff-21694ad3fc9021de26798e65a4abefe74e5682afde69e0159130a38859f55d19R34.

[fh1ch]

@spike-rabbit really cool stuff here, thanks a bunch 🙇

Just two open points and then we're good to go 🏓

[fh1ch]

Agree, this seems to be a left-over from the old code, the other areas (e.g. https://github.com/siemens/ngx-datatable/pull/498/files#diff-eccd3293f095264b067c6f8bc5009e77fad64f7ef548e9885398c6ecd7e5f9eaR26) were adapted accordingly.

[fh1ch]

Hahahha, I was also wondering since there is only the icon as an inner-child, but the button itself should be marked as disabled, see https://github.com/siemens/ngx-datatable/pull/498/files#diff-21694ad3fc9021de26798e65a4abefe74e5682afde69e0159130a38859f55d19R34.