From 1692f458a5592e926d8ee6323d5cd00057ccd354 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Tue, 1 Nov 2022 18:13:15 -0700 Subject: [PATCH] pagination accessibility update (#3224) * pagination accessibility update Contains text and images for Pagination accessibility tab * Update pagination-accessibility-1.png updated image * added and updated images * Update accessibility.mdx added code tags * chore(format): fix format error Co-authored-by: TJ Egan Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../components/pagination/accessibility.mdx | 154 +++++++++--------- .../images/pagination-accessibility-1.png | Bin 0 -> 62220 bytes .../images/pagination-accessibility-2.png | Bin 0 -> 20662 bytes .../images/pagination-accessibility-3.png | Bin 0 -> 42522 bytes 4 files changed, 79 insertions(+), 75 deletions(-) create mode 100644 src/pages/components/pagination/images/pagination-accessibility-1.png create mode 100644 src/pages/components/pagination/images/pagination-accessibility-2.png create mode 100644 src/pages/components/pagination/images/pagination-accessibility-3.png diff --git a/src/pages/components/pagination/accessibility.mdx b/src/pages/components/pagination/accessibility.mdx index fd76131e5da..836dbed926c 100644 --- a/src/pages/components/pagination/accessibility.mdx +++ b/src/pages/components/pagination/accessibility.mdx @@ -19,87 +19,91 @@ import { -The pagination React Carbon component has been tested against the latest -[W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) -and violations have been identified as high priority issues. This document will -be updated when these accessibility issues are resolved. +No accessibility annotations are needed for paginations, but keep these +considerations in mind if you are modifying Carbon or creating a custom +component. - Accessibility considerations - Resources - Accessibility testing + +What Carbon provides +Design recommendations +Development considerations + -## Accessibility considerations - -1. If descriptions or labels are changed from the default value, verify the new - value is clear and concise. - -## Resources - -- [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/): - - [1.3.1 Info and Relationships](https://www.ibm.com/able/requirements/requirements/#1_3_1) - (WCAG Success Criteria - [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)) - - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/requirements/requirements/#1_3_2) - (WCAG Success Criteria - [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence)) - - [2.1.1 Keyboard](https://www.ibm.com/able/requirements/requirements/#2_1_1) - (WCAG Success Criteria - [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)) - - [2.4.3 Focus Order](https://www.ibm.com/able/requirements/requirements/#2_4_3) - (WCAG Success Criteria - [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order)) - - [2.4.6 Headings and Labels](https://www.ibm.com/able/requirements/requirements/#2_4_6) - (WCAG Success Criteria - [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels)) - - [2.4.7 Focus Visible](https://www.ibm.com/able/requirements/requirements/#2_4_7) - (WCAG Success Criteria - [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)) - - [4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2) - (WCAG Success Criteria - [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html)) - -## Accessibility testing - -Automated, manual and screen reader accessibility verification test has been -performed on the pagination React Carbon Component. -[WCAG 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) issues -have been identified and the list of open accessibility violations is available -in the Carbon Component GitHub repository. - -### Automated test +## What Carbon provides + +Carbon bakes keyboard operation into its components, improving the experience of +blind users and others who operate via the keyboard. Carbon incorporates many +other accessibility considerations, some of which are described below. + +### Keyboard interaction + +The tab order goes from left to right through the controls in the pagination +component. On focus, the dropdowns are opened with `Space` or with up or down +arrows, which also cycle through the values. Both `Space` and `Enter` select a +value and close the dropdown. The dropdown can also be closed by pressing `Esc`. +The previous and next page arrow buttons are activated by `Space` or `Enter` +keys. + + + + +![example of tabbing into a pagination group and arrowing between selections](images/pagination-accessibility-1.png) + + + Interactive elements in pagination maintain their usual Carbon keyboard + behaviors and tab order. + + + + + +When the pagination is at either end of its range, one of the page navigation +buttons becomes invalid. When that happens, the button is no longer navigable or +operable, like any other disabled control. + + + + +![tab order bypasses the disabled left-arrow icon](images/pagination-accessibility-2.png) + + + The prior page button is disabled and unreachable when the pagination is at + the start of its range. + + + + + +### Labeling + +Not all the elements in pagination have static or visually isolated labels. +Carbon constructs a programmatic name for the second dropdown by concatenating +some dynamically generated text on the screen. Carbon also provides accessible +names for the icon-only buttons. - - - - - - Automated test environment - - Results - - - - - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Chrome version 77.0.3865.90 -
- - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM - Accessibility WCAG 2.1 Sept. 2019 Ruleset -
- Carbon React version 7.7.1 - - - DAP test: -
- No violations - - - - - + + +![illustration showing labels for dropdown and icon-only buttons](images/pagination-accessibility-3.png) + + + Carbon provides the accessible names "page number, of 3 pages", "previous + page", and "next page" for assistive technology. + + + + +## Development considerations + +Keep these considerations in mind if you are modifying Carbon or creating a +custom component. + +- Carbon uses `