a11y: using span for button with disabled class breaks contrast check

[anees-tricon]

Angular version: 11

ngx-pagination version: 5.1.1

Description of issue: in the fist page, previous button appears as disabled. But it is done using disabled class and span element. As a result, running a11y rules via wave extensions gives contrast error

Steps to reproduce: Just install the wave extension and right click and select "WAVE this page" to run the tool

Expected result: Elements with disabled attribute is skipped by the tool and hence there should be no contrast issue

Actual result: Since we are using disabled class and span, the element is scanned for contrast and it fails

just check the tool result on the detault stackblitz url https://angular-e1f9hq.stackblitz.io/

[michaelbromley]

Hi,

Thanks for the report.

Elements with disabled attribute is skipped by the tool

Does that mean we can just additionally add a disabled attribute to the <li> and it will then solve the issue?

[anees-tricon]

Not exactly. disabled attribute is supported on few elements like button, input etc. Ideal solution would be to use buttons instead of span for clickable things. That also makes it semantically correct :)