Pagination > Accessibility Audit
Refer to the parent epic description for more information on this effort.
Purpose
Audit the accessibility of the GitLab UI Pagination component in all variants and states.
Component description
Pagination is a form of navigation that allows a user to sequentially walk through a set of results. Pagination can use two methods, offset with a defined set of results, and keyset where results can be dynamic.
Methods and Tools
Review the initial testing methods in the parent epic. List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic.
- Evaluate all of the pagination.
- Visual review for contrast and states.
- Semantic and functional review to align with WAI-ARIA Authoring Guidelines for navigation.
- Keyboard only
- Screen reader: VoiceOver + Safari on macOS
- Screen reader: NVDA + Chrome on Windows
- axe DevTools extension in browser) variants and configurations in GitLab UI.
Audit Criteria
Review the general audit criteria in the parent epic. Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic. A check indicates that the audit has been performed, not that it passes.
-
All actions and functionality can be done with a keyboard. -
Links, buttons, and controls have a visible focus state. -
All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label
for icons that have meaning or perform actions. -
Current page should use aria-current="page"
. -
Page links should be meaningful for sighted and unsighted users. -
Color combinations have sufficient contrast.
Results
Problem | Solution | Related MR |
---|---|---|
No way to test focus management in GitLab UI after a link is activated. | Although focus management is mentioned in Pajamas, it could be clarified further. | |
Using role="navigation" aria-label="Pagination" on the <ul> is incorrect and changes the semantic meaning of the list. |
Wrap the <ul> in a <nav aria-label="Pagination"> element. |
|
The use of disabled and aria-disabled="true" are incorrect, and not necessary at all for both individual items and the set in general. Disabled should only apply to some interactive elements. <li class="page-item disabled"><span size="md" aria-disabled="true" class="page-link">…</span></li>
|
This should be formatted as a normal list item with child text content. See https://www.w3schools.com/tags/att_disabled.asp for usage notes on the disabled attribute. |
|
Current page is not identified. | The link (<a> ) of the current page should have aria-current="page" to identify it as the current page for screen readers. The link should remain enabled. |
|
In the compact example the markup for Prev or Next when a user can't move forward or back is incorrect. The <span> still has an href and as mentioned elsewhere, incorrect use of aria-disabled="true" . |
Remove aria-disabled="true" and the href and instead use aria-hidden="true" on the element. |
|
If the purpose of the compact example is to represent keyset pagination, then the "Page x of x" text is unnecessary since the total pages would be indeterminate. If the purpose is to just reduce the visible number of elements then it would be unclear to a user what page they're on and to what page they're navigating. | Determine what the purpose it and update accordingly. | |
Unclear controls in Storybook. | Make control purpose more clear. |
Completing the audit
After the solutions have been explored and applied, review the completing the audit section in the parent epic. Complete all items prior to closing this issue.
accessibility ~"Category:FE/UX Foundations" component:pagination