-
Couldn't load subscription status.
- Fork 156
Description
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
- Render a paginator with page-size selection and nav (simplified):
<igx-paginator
#paginator
[perPage]="4"
[selectOptions]="[3,4,5]"
[totalRecords]="50">
</igx-paginator>- Inspect the generated DOM under the paginator in DevTools.
- 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.