Accessibility issue: <igx-paginator> form elements do not have associated labels

[mehmetardin]

Hi,

While testing the component for accessibility, I encountered an issue flagged by accessibility checkers (Lighthouse):

Form elements do not have associated labels.

It seems that some of the internal form elements rendered by , such as page size selectors or navigation controls, do not have visible or programmatic labels (, aria-label, or aria-labelledby).

Could you please confirm:

• Is this a known accessibility issue with the paginator component?
• Whether there’s a recommended approach or workaround (e.g., using resourceStrings or custom labeling)?
• If not yet addressed, is there a plan to add proper label associations in an upcoming release?

Environment:

Ignite UI for Angular version: 19.1.6
Angular version: 19.2.14
Accessibility tool: Lighthouse

Thanks in advance for your help and for your ongoing work on improving accessibility in Ignite UI!

[georgianastasov]

Hello @mehmetardin

Thanks for flagging this.

What’s happening

• The page-size control renders a visual label (“Items per page”) but the internal combobox it drives has no programmatic name (id/aria-label/aria-labelledby). Lighthouse correctly flags this.
• The paginator navigation uses icon-only buttons that rely on title=…. That isn’t a preferred accessible name source, so automated checks fail. In practice this means screen readers may announce these controls inconsistently, which is exactly what the audit aims to prevent.

1/ Is this a known issue?
It isn’t currently tracked as a documented paginator issue. The general accessibility docs don’t call out this specific labeling behavior. This is not known issue.

2) Recommended approach / workaround
resourceStrings only affect visible text/tooltips and do not create the required programmatic association, so they won’t clear the audit.

My practical workaround is to set the ARIA attributes dynamically after render:
Associate the page-size label to the internal combobox:

const label = host.querySelector('igx-page-size label');
const combo = host.querySelector('input[role="combobox"]');
if (label && combo) {
   label.id = 'pageSizeLabel'; 
   combo.setAttribute('aria-labelledby', label.id); 
}

Name the nav landmark and icon buttons:

host.querySelector('igx-page-nav')?.setAttribute('aria-label','Product list pagination');
['First page','Previous page','Next page','Last page'].forEach((name, i) => host.querySelectorAll('igx-page-nav button')[i]?.setAttribute('aria-label', name));

Because the paginator re-renders on interaction, I reapply this in:

(perPageChange)="onPerPageChange()" 
(pageChange)="onPageChange()"

I’ve put together a minimal sample showing the dynamic ARIA workaround in action so you can try it directly in the browser:
Workaround Sample
The sample applies aria-labelledby to the page-size combobox and aria-label to the paginator buttons after render, and re-applies them on perPageChange / pageChange so the labels persist during interaction.

This result to:

• <input role="combobox" aria-labelledby="pageSizeLabel">
• <igx-page-nav aria-label="Product list pagination">
• Buttons named via aria-label="First/Previous/Next/Last page"

This approach is non-breaking, keeps the current UI/behavior, and clears the Lighthouse “form elements have labels” finding; it also aligns with requirement for a programmatic name without changing visuals or localization.

3) Plan for an official fix
I’ve opened an issue so this can be addressed in the component: #16356
Please subscribe to that issue for updates and information. Once a fix ships, you will remove the dynamic patch and rely on the built-in labeling.

Thanks again for raising this and helping improve accessibility.