Added accessibility for the pagination snippet

[littlesvensson]

Fixes #11590

The respective nav section is recognised under the aria-label "Pagination navigation".

The current page has assigned value aria-disabled true with tabindex -1 for better navigation. Instead of "1", "2", "3"... screen reader says "Page 1" / "Page 2" etc... When using page size dropdown button, user will hear "xyz items per page" instead of just a number.

<li> elements are assigned presentation role and their nested <a> elements are assigned to menuitem role for more intuitive orientation with keyboard.

[dryrunsecurity]

DryRun Security Summary

The pull request enhances the accessibility of the pagination functionality by adding ARIA attributes, semantic markup, and improved labeling for screen readers in the dojo/templates/dojo/paging_snippet.html template.

Expand for full summary

Summary:

The code changes in this pull request are focused on improving the accessibility of the pagination functionality in the web application. The changes include adding ARIA attributes to provide more context and labeling for screen readers, as well as using semantic markup to better communicate the purpose of non-interactive elements. These accessibility enhancements do not introduce any significant security risks and are a positive change that benefits users, including those with disabilities.

Files Changed:

• dojo/templates/dojo/paging_snippet.html: The changes in this file include the following accessibility improvements:
  • The <nav> element now includes the aria-label attribute, which provides a descriptive label for the pagination navigation.
  • The pagination links now include aria-label attributes, which provide more context for screen readers about the purpose of each link (e.g., "Page 1", "Page 2", etc.).
  • The page size dropdown button now includes aria-label and aria-expanded attributes to improve the accessibility of the dropdown functionality.
  • The page size dropdown menu items now have role="menuitem" and aria-label attributes to better communicate their purpose to assistive technologies.
  • The <li> elements for non-clickable page numbers now have role="presentation" and aria-disabled="true" attributes, which helps screen readers understand that these are not interactive elements.
  • The page size dropdown menu items are now wrapped in <li> elements with role="presentation", which is more semantically correct.

Code Analysis

We ran 9 analyzers against 1 file and 1 analyzer had findings. 8 analyzers had no findings.

Analyzer	Findings
Configured Codepaths Analyzer	2 findings

Overall Riskiness

🔴 Risk threshold exceeded.

We've notified @mtesauro, @grendel513.

View PR in the DryRun Dashboard.

[kiblik]

Some small adjustment

[mtesauro]

Approved