Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(pagination): update a11y tab bugs for pagination nav #4381

Merged
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 20 additions & 21 deletions src/pages/components/pagination/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,8 @@ other accessibility considerations, some of which are described below.
#### Pagination

The tab order goes from left to right through the controls in the pagination
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.
variant. On focus, the selects 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 select. The select can also be closed by pressing`Esc`. The previous and next page arrow buttons are activated by pressing `Space`or`Enter`.
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved

<Row>
<Column colLg={12}>
Expand Down Expand Up @@ -84,10 +81,10 @@ 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.
nav variant. When page buttons have focus, `Space` or `Enter` activates the page
button and changes the current page to the button that currently has selection.
When the previous and next page arrow buttons have focus, `Space` or `Enter`
activates them.

<Row>
<Column colLg={12}>
Expand All @@ -103,18 +100,20 @@ selection. When the previous and next page arrow buttons have focus, both
</Row>

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.
`Space` or `Up` or `Down` arrows activates the select menu to choose an
available page to navigate to. `Up` or `Down` arrows navigate between page
options in the menu. `Space` or `Enter` selects a page from the menu and closes
it. The menu can also be closed by pressing `Esc`.

<Row>
<Column colLg={12}>

![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 or Up or Down arrows and pressing Space or Enter selects a page from
the select menu and closes it.](images/pagination-a11y-4.png)

<Caption>
The menu opens by pressing Space and pressing Tab or Enter selects a page from
the menu and closes it.
The menu opens by pressing Space or Up or Down arrows and pressing Space or
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
Enter selects a page from the select menu and closes it.
</Caption>

</Column>
Expand All @@ -125,18 +124,18 @@ pressing Esc.
#### Pagination

Not all the elements in pagination have static or visually isolated labels.
Carbon constructs a programmatic name for the second dropdown by concatenating
Carbon constructs a programmatic name for the second select by concatenating
dynamically generated text on the screen. Carbon also provides accessible names
for the icon-only buttons.

<Row>
<Column colLg={8}>

![illustration showing labels for dropdown and icon-only buttons](images/pagination-a11y-5.png)
![illustration showing labels for select and icon-only buttons](images/pagination-a11y-5.png)

<Caption>
Carbon provides the accessible names "page number, of 40 pages", "previous",
and "next" for assistive technology.
Carbon provides the accessible names "Page", "Previous", and "Next" for
assistive technology.
</Caption>

</Column>
Expand All @@ -151,10 +150,10 @@ accessible names for the icon-only buttons.
<Row>
<Column colLg={8}>

![Carbon provides the accessible names "page", "previous", and "next" for assistive technology.](images/pagination-a11y-6.png)
![Carbon provides the accessible names "Page", "Previous", and "Next" for assistive technology.](images/pagination-a11y-6.png)

<Caption>
Carbon provides the accessible names "page", "previous", and "next" for
Carbon provides the accessible names "Page", "Previous", and "Next" for
assistive technology.
</Caption>

Expand Down
Binary file modified src/pages/components/pagination/images/pagination-a11y-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/pagination/images/pagination-a11y-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/pagination/images/pagination-a11y-5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading