Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility [NgbPagination] ARIA attribute #4637

Open
xpl0siv opened this issue Nov 24, 2023 · 0 comments · May be fixed by #4639
Open

Accessibility [NgbPagination] ARIA attribute #4637

xpl0siv opened this issue Nov 24, 2023 · 0 comments · May be fixed by #4639

Comments

@xpl0siv
Copy link

xpl0siv commented Nov 24, 2023

Accessibility issue at NgbPagination:

Bug description:

Affected component is ngb-pagination, when I use [ellipses]="true" and [maxSize]="3" the element created
to display the three dots.

image

I'm using the extension 'siteimprove accesibility checker'.

They report this to me:
WAI-ARIA authoring practices
An ARIA attribute has been specified that is either not supported or is prohibited, on this type of element.

<li class="page-item disabled">
     <a tabindex="-1" aria-disabled="true" class="page-link">
        ...
     </a>
</li>

Resolve with adding 'aria-pressed=false' and 'role=button':

<li class="page-item disabled">
     <a tabindex="-1" role="button" aria-pressed="false" class="page-link">
        ...
     </a>
</li>

Link to minimally-working StackBlitz that reproduces the issue:

Stackblitz

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: "17.0.3"

ng-bootstrap: "16.0.0"

Bootstrap: "5.3.2"

@xpl0siv xpl0siv changed the title Accessibility Accessibility [NgbPagination] ARIA attribute Nov 24, 2023
@bastienmoulia bastienmoulia linked a pull request Nov 30, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants