diff --git a/src/pages/components/pagination/accessibility.mdx b/src/pages/components/pagination/accessibility.mdx index ac6fd66e91a..ab2317ecc2b 100644 --- a/src/pages/components/pagination/accessibility.mdx +++ b/src/pages/components/pagination/accessibility.mdx @@ -44,15 +44,17 @@ other accessibility considerations, some of which are described below. ### Keyboard interaction +#### Pagination + 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 +variant. 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-a11y-1.png) @@ -81,21 +83,81 @@ operable, like any other disabled control. +#### Pagination nav + +The tab order goes left to right through the button controls in the pagination +nav variant. When page buttons have focus, both `Space` and `Enter` activates +the page button and change the current page to the button that currently has +selection. When the previous and next page arrow buttons have focus, both +`Space` and `Enter` activates them. + + + + +![Interactive elements in pagination nav maintain their usual Carbon keyboard behaviors and tab order.](images/pagination-a11y-3.png) + + + Interactive elements in pagination nav maintain their usual Carbon keyboard + behaviors and tab order. + + + + + +If an overflow ellipsis is present in the pagination nav, once focused, pressing +Space activates the menu to choose an available page to navigate to. Enter or +Tab selects a value from the menu and closes it. The menu can also be closed by +pressing Esc. + + + + +![The menu opens by pressing Space and pressing Tab or Enter selects a page from the menu and closes it.](images/pagination-a11y-4.png) + + + The menu opens by pressing Space and pressing Tab or Enter selects a page from + the menu and closes it. + + + + + ### Labeling +#### Pagination + 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. +dynamically generated text on the screen. Carbon also provides accessible names +for the icon-only buttons. + + + + +![illustration showing labels for dropdown and icon-only buttons](images/pagination-a11y-5.png) + + + Carbon provides the accessible names "page number, of 40 pages", "previous", + and "next" for assistive technology. + + + + + +#### Pagination nav + +Carbon constructs a programmatic name for the page ghost buttons by +concatenating dynamically generated text on the screen. Carbon also provides +accessible names for the icon-only buttons. -![illustration showing labels for dropdown and icon-only buttons](images/pagination-a11y-3.png) +![Carbon provides the accessible names "page", "previous", and "next" for assistive technology.](images/pagination-a11y-6.png) - Carbon provides the accessible names "page number, of 40 pages", "previous - page", and "next page" for assistive technology. + Carbon provides the accessible names "page", "previous", and "next" for + assistive technology. diff --git a/src/pages/components/pagination/images/pagination-a11y-1.png b/src/pages/components/pagination/images/pagination-a11y-1.png index b8eb505c324..ea4779bf4e3 100644 Binary files a/src/pages/components/pagination/images/pagination-a11y-1.png and b/src/pages/components/pagination/images/pagination-a11y-1.png differ diff --git a/src/pages/components/pagination/images/pagination-a11y-2.png b/src/pages/components/pagination/images/pagination-a11y-2.png index 44a576535ed..f3b6eba1585 100644 Binary files a/src/pages/components/pagination/images/pagination-a11y-2.png and b/src/pages/components/pagination/images/pagination-a11y-2.png differ diff --git a/src/pages/components/pagination/images/pagination-a11y-3.png b/src/pages/components/pagination/images/pagination-a11y-3.png index aa45155c854..0264fc0d913 100644 Binary files a/src/pages/components/pagination/images/pagination-a11y-3.png and b/src/pages/components/pagination/images/pagination-a11y-3.png differ diff --git a/src/pages/components/pagination/images/pagination-a11y-4.png b/src/pages/components/pagination/images/pagination-a11y-4.png new file mode 100644 index 00000000000..54553378e1b Binary files /dev/null and b/src/pages/components/pagination/images/pagination-a11y-4.png differ diff --git a/src/pages/components/pagination/images/pagination-a11y-5.png b/src/pages/components/pagination/images/pagination-a11y-5.png new file mode 100644 index 00000000000..1e4b635431a Binary files /dev/null and b/src/pages/components/pagination/images/pagination-a11y-5.png differ diff --git a/src/pages/components/pagination/images/pagination-a11y-6.png b/src/pages/components/pagination/images/pagination-a11y-6.png new file mode 100644 index 00000000000..356e65d0055 Binary files /dev/null and b/src/pages/components/pagination/images/pagination-a11y-6.png differ diff --git a/src/pages/components/pagination/images/pagination-usage-1.png b/src/pages/components/pagination/images/pagination-usage-1.png deleted file mode 100644 index 2bc441ca3a5..00000000000 Binary files a/src/pages/components/pagination/images/pagination-usage-1.png and /dev/null differ diff --git a/src/pages/components/pagination/images/pagination-usage-2.png b/src/pages/components/pagination/images/pagination-usage-2.png deleted file mode 100644 index 23594132552..00000000000 Binary files a/src/pages/components/pagination/images/pagination-usage-2.png and /dev/null differ