Accessbility Related issue

[itjayaprakash]

Hi Team,

We are facing screen reader issues in pearson pagination component standard type

1. Page number is non-descriptive

2. After selecting the page screen reader notify current page two times

3. The screen reader is not notifying the selected state of the page number

4. Incorrect role is provided for the next and previous button (screen reader is notifying the incorrect role for these buttons (Next and Pervious) as "graphic".)

5. The role defined for the provided links "1", "2" and "3" is incorrect. ( The role should be defined as links. )

[antelopeb]

Hello. We are slowly deprecating these in favor of our newer web components.
https://github.com/pearson-ux/web-components/tree/master/pagination

cc: @davodey

[StommePoes]

Hey @antelopeb @davodey
This one, the ellipsis:

<a href="#" aria-label="additional pages" data-page="9" data-ellipsis="true" class="disabled"><span>...</span></a>

it has a disabled class but if you're only listening it appears a valid link called "additional pages". I think if most people are running into "..." in paginations then it's better for them to either hear "..." or something.
I'd make this non-focusable (tabindex=-1). Screen reader users can still virtual-cursor-explore to find the ... between the two links if they want.
And if it's to remain a non-focusable anchor then it probably needs aria-disabled="true" if you really want it to announce a disabled state. This won't translate to things like Windows High Contrast (which has its own theme colours for disabled controls), but it may make more sense to people.

Or even more ideally, not a link at all, since its purpose isn't to navigate people anywhere, but to contextualise a gap between rows of page-links.

I just think the HTML I see how has a small issue and could be tweaked.