patternfly-design icon indicating copy to clipboard operation
patternfly-design copied to clipboard

Bug - Pagination - tab order of compact actions doesn't match visual order

Open thatblindgeye opened this issue 1 year ago • 2 comments

Describe the problem This is an issue with

  • [ ] Patternfly 5
  • [x] Patternfly 6
  • [ ] other

Please give a clear and concise description of the problem. Which components are affected? Followup to comment chain https://github.com/patternfly/patternfly/pull/6607#discussion_r1587623403

We need to update how the markup is rendered so that the tab order matches the visual order when the pagination nav is compact and rendered visually as [previous page button] [menu toggle] [next page button]. Currently Tabbing results in a tab order of menu toggle > previous page button > next page button.

How do you reproduce the problem? Provide steps to reproduce. A codepen or codesandbox demonstrating the problem is appreciated.

Expected behavior A clear and concise description of the expected behavior.

Is this issue blocking you? List the workaround if there is one.

Screenshots If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?

thatblindgeye avatar Jun 03 '24 12:06 thatblindgeye

This issue has been automatically marked as stale because it has not had activity in the last 60 days.

github-actions[bot] avatar Dec 27 '24 11:12 github-actions[bot]

For bottom pagination, when going between mobile and desktop, the order of the buttons/menus/etc changes, which makes the tab order not match the order of the elements in the code - which is an a11y issue (the tab order doesn't match the visual order). Is it possible to update the bottom pagination design so that the actions appear in the same order between desktop and mobile?

mcoker avatar Feb 06 '25 20:02 mcoker