Skip to content

Page main container and scrollbar accessibility #1393

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

Open
Venefilyn opened this issue Apr 16, 2025 · 0 comments
Open

Page main container and scrollbar accessibility #1393

Venefilyn opened this issue Apr 16, 2025 · 0 comments

Comments

@Venefilyn
Copy link

Within a page layout the current style for both core and react is to overflow the body content inside the page main container.

However, due to the fact that Patternfly v6 introduced a card-style layout for the main container instead of the blocky-style that was in v5, we now have the scrollbar inside the main container rather than on the side in the viewport.

To see this in action, here is a codebox that introduces a scroll
https://codesandbox.io/p/sandbox/2f3pxg

This created a concern for us as we upgraded in that we wonder how this affects accessibility and if there are any improvements that can be made or designed from Patternfly's side to ensure better navigation. In particular, as the scrollbar is not on the edge of the window anymore we lose out on a huge hitbox according to Fitt's Law, which in short meant that in PF6 the scrollbar has shrunk from infinite width to the width the browser chooses.

In PF5 one could move their cursor to the edge of the screen and keep moving (given you are fullscreen and don't have another display in that direction) and you would still be able to click and move the scrollbar. Which in turn gives you the infinite space.

With all that said, I'm wondering about the accessibility reduction of this and if the niceness of the design outweigh the impact of the accessibility reduction. If so, are there any design decisions we can create or some standard we can implement to further improve the scrollbar hitbox situation?

Computerphile video I saw about it when it came out (jeez so long ago now)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Needs triage
Development

No branches or pull requests

1 participant