Skip to content

igx-paginator: internal page-size combobox and nav buttons lack accessibility labels #16356

@georgianastasov

Description

@georgianastasov

Description

When using igx-paginator, Lighthouse flags “Form elements do not have associated labels.”
The page-size control renders a visual label (“Items per page”), but the internal combobox input does not receive a programmatic name (id/aria-label/aria-labelledby).
Additionally, the paginator navigation renders icon-only buttons that rely on title rather than an accessible name (aria-label/aria-labelledby).

Related discussion: #16350

  • igniteui-angular version: latest
  • browser: all

Steps to reproduce

  1. Render a paginator with page-size selection and nav (simplified):
   <igx-paginator
     #paginator
     [perPage]="4"
     [selectOptions]="[3,4,5]"
     [totalRecords]="50">
   </igx-paginator>
  1. Inspect the generated DOM under the paginator in DevTools.
  2. Run Lighthouse -> Accessibility.

Result

The internal input that acts as the page-size combobox lacks a programmatic label:
<input role="combobox" ... aria-haspopup="listbox" ...>
The nav buttons are icon-only and rely on title="..." rather than an accessible name.
Lighthouse flags: “Form elements do not have associated labels.”

Expected result

The page-size combobox should have a programmatic name by default; the visible “Items per page” label should be associated via aria-labelledby.
The nav landmark and icon-only buttons should expose accessible names (e.g., aria-label="First page", aria-label="Next page", etc.) without requiring manual DOM patching.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions